Front-end Development

Lesson 1 — Introduction & Setup

Course overview, expectations, grading

What is Frontend Development?

Client vs Server architecture

How browser works (request/response basics)

Introduction to tools:

VS Code installation

Extensions (Live Server, Prettier, etc.)

Folder structure & workflow

Lesson 2 — HTML Fundamentals

HTML document structure (<!DOCTYPE>, html, head, body)

Basic tags:

headings, paragraphs

links, images

Attributes (href, src, alt)

Inline vs block elements

Best practices (clean structure)

Lesson 3 — HTML Forms & Semantic

Forms:

Lesson 2 — HTML Fundamentals

HTML document structure (<!DOCTYPE>, html, head, body)

Basic tags:

headings, paragraphs

links, images

Attributes (href, src, alt)

Inline vs block elements

Best practices (clean structure)

Lesson 3 — HTML Forms & Semantic

Forms: input types (text, email, password) o textarea, select

Form validation (required, minlength)

Semantic HTML: header, section, article, footer

Accessibility basics (labels, alt text)

Lesson 4 — CSS Fundamentals

CSS syntax (selector, property, value)

Types of CSS: inline, internal, external

Selectors: class, id, element

Box model: margin, padding, border, content

Units (px, %, rem, em)

Lesson 5 — Layout & Flexbox

Display properties (block, inline, inline-block)

Positioning: static, relative, absolute, fixed

Flexbox: flex container vs items o justify-content, align-items

Real layout examples

Lesson 6 — Grid & Responsive Design

CSS Grid basics: rows, columns, gap

Grid vs Flexbox (when to use)

Responsive design: media queries o mobile-first approach

Breakpoints

Lesson 7 — SCSS & Frameworks

SCSS basics: variables o nesting

Intro to Bootstrap or Tailwind

Utility-first vs component-based styling

When to use frameworks

Lesson 8 — Git & Project Setup

What is Git?

Basic commands: init, add, commit, push

GitHub workflow: repo creation o push project

Collaboration basics

Project structure setup

Lesson 9 — JS Basics

What is JavaScript?

Variables (let, const, var)

Data types: string, number, boolean

typeof operator

Naming conventions

Lesson 10 — Operators & Conditions

Arithmetic operators

Comparison operators

Logical operators

Conditional statements: if, else if, else o switch

Lesson 11 — Loops

for loop

while / do-while

Loop use cases

Basic problem solving

Lesson 12 — Functions

Function declaration vs expression

Arrow functions

Parameters & return

Scope (global vs local)

Hoisting concept

Lesson 13 — Arrays & Objects

Arrays: creation, indexing o push, pop, shift, unshift

Objects :key-value structure

Access & update data

Lesson 14 — Advanced Arrays

map()

filter()

reduce()

find(), sort()

Real examples with data

Lesson 15 — Modern JS

Destructuring (array, object)

Spread & rest operators

Template literals

Optional chaining

Lesson 16 — DOM & Events

What is DOM?

Selecting elements: querySelector, getElementById

Changing content & styles

Events: click, input

Event listeners

Lesson 17 — Forms & Validation

Handling form submission

Prevent default behavior

Form validation logic

Error handling in UI

Lesson 18 — Async JavaScript

Synchronous vs asynchronous

setTimeout, setInterval

Callbacks concept

Introduction to Promises

Lesson 19 — Fetch & API

What is API?

HTTP basics (GET)

Fetch API usage

Handling responses (JSON)

Error handling

Lesson 20 — Advanced JS Concepts

OOP basics: classes, constructor

Event loop (simplified)

JavaScript runtime overview

Intro to NPM

Modules (import/export)

Lesson 21 — React Introduction

What is React?

SPA concept

Setup (Vite / CRA)

Project structure

Lesson 22 — JSX & Components

JSX syntax

Creating components

Functional components

Rendering UI

Lesson 23 — Props

Passing data between components

Props drilling basics

Reusable components

Lesson 24 — State & Events

useState hook

Updating state

Event handling (onClick, onChange)

Lesson 25 — Rendering Logic

Conditional rendering

Lists & keys

Dynamic UI

Lesson 26 — useEffect & API

useEffect basics

Side effects

API call inside React

Loading & error states

Lesson 27 — React Router

SPA routing

Route, Link, Navigate

Dynamic routes

Lesson 28 — Forms in React

Controlled components

Handling input state

Form submission

Lesson 29 — Advanced Hooks

useRef

useMemo

useCallback

Performance basics

Lesson 30 — Custom Hooks

What are custom hooks?

Creating reusable logic

Code organization

Lesson 31 — Context API

Global state problem

Context creation

useContext usage

Lesson 32 — Redux Toolkit

Why Redux?

Store & slices

Actions & reducers

Lesson 33 — Redux Advanced

useDispatch, useSelector

Async logic (thunk)

Best practices

Lesson 34 — React Query

Data fetching vs state management

useQuery basics

Caching & refetching

useMutation intro

Lesson 35 — Performance Optimization

React.memo

Lazy loading

Code splitting

Avoiding re-renders

Lesson 36 — Architecture & Best Practices

Folder structure

Clean code principles

Reusability

Scalability mindset

Lesson 37 — AI Tools

ChatGPT for developers

GitHub Copilot usage

Prompt basics

Real coding examples

Lesson 38 — AI Workflow

Prompt engineering

Code generation

Debugging with AI

Refactoring code

Lesson 39 — Project Planning

Choosing project idea

Architecture planning

API integration planning

Task breakdown

Lesson 40 — Finalization & Deploy

Project completion

Debugging & optimization

Deployment (Vercel / Netlify)

Presentation & demo