Basic knowledge of HTML and CSS

A practical beginner course that teaches JavaScript from the ground up, including

modern JavaScript, DOM manipulation for interactive pages, and async JavaScript

for working with APIs and real data. A major part of the course focuses on React,

where students build modern, component-based web apps with real features. The

course includes lots of exercises and mini projects, uses Git/GitHub from day one,

and ends with a complete final project that students can upload to GitHub and

optionally deploy online.

• VS Code setup (Live Server, Prettier, ESLint)
• Introduction to DevTools for debugging
• Using Git & GitHub from day one

• Linking JS to HTML
• Variables: let, const, var
• Data Types
• Basic Operators
• Template Literals
• Conditional Statements
• Type Conversion & Coercion
• Truthy/Falsy Values
• Equality & Logical Operators
• Coding Challenge

• Strict Mode
• Functions (declaration, expression, arrow)
• Arrays & Looping
• Objects & Methods
• Loop Control (for, while, do-while)
• Coding Challenge: Mini Quiz App

• Intro to the DOM
• Selecting/Manipulating Elements
• Event Listeners
• Styling with JS
• Working with Forms + Basic Validation
• DOM List Rendering Patterns
• Intro to Fetch + JSON
• Promises (concept) + async/await
• Error Handling (try/catch)
• Loading & Error UI States
• Project: To-Do + API Search App

• What is React? Component mindset
• JSX basics
• Components & Props
• State with useState
• Handling Events in React
• Forms (controlled inputs)
• Conditional Rendering
• Rendering Lists & Keys
• Mini Project: React To-Do App

• useEffect (side effects)
• Fetch in React
• Loading & Error states
• Search & Filter UI patterns
• Component splitting & structure
• Lifting State Up
• Mini Project
• React Router: pages & navigation
• Layouts + nested routes (basic)
• Passing callbacks (child → parent)
• Intro to Context (global state concept)
• Project structure (components/pages/services)
• Mini Project

• What is Vibe Coding?
• Cursor — AI-powered editor in your workflow
• Claude — prompting for code, debugging & building features
• Figma Make — from design to code with AI
• Intro to AI Agents — how they work in real dev workflows
• Final Project planning + GitHub/Vercel workflow

Minimum criteria:

1. Course attendance – 80%.

2. Final Project/Exam - 20%