Front-End Web Development

• Web Development Overview
• Frontend vs Backend
• Client–Server Model
• HTTP & HTTPS Basics
• Domain & Hosting
• Development Tools
• Web Workflow

HTML Structure

Tags & Elements

Headings & Paragraphs

Links & Images

Lists

Tables

Semantic Tags

• Forms & Inputs
• Form Validation
• Media Elements
• Iframe & Embed
• SEO HTML
• Accessibility
• Best Practices

• CSS Introduction
• Selectors
• Colors & Units
• Fonts & Typography
• Box Model
• CSS Priority
• Code Structure

• Display Properties
• Positioning
• Float & Clear
• Overflow
• Z-Index
• Visibility
• Layout Rules

• Flex Container
• Flex Items
• Direction & Wrap
• Alignment
• Spacing
• Responsive Layout
• UI Practice

• Grid System
• Columns & Rows
• Grid Areas
• Media Queries
• Mobile-First Design
• Responsive Patterns
• Layout Practice

• Bootstrap Setup
• Grid System
• Containers
• Typography
• Buttons
• Colors
• Utilities

• Navbar
• Cards
• Modals
• Forms
• Alerts
• Carousel
• Custom Styling

• JavaScript Intro
• Variables
• Data Types
• Operators
• Conditions
• Loops
• Functions

• Arrays
• Objects
• String Methods
• Scope
• Hoisting
• DOM Intro
• Events

• ES6 Features
• Arrow Functions
• Destructuring
• Spread Operator
• Callbacks
• Error Handling
• Clean Code

• DOM Manipulation
• Event Delegation
• Form Handling
• Local Storage
• Session Storage
• Browser APIs
• Mini Projects

• Git Basics
• Repository Setup
• Commit & Push
• Branching
• Merging
• GitHub Workflow
• Portfolio Repo

• React Overview
• JSX
• Components
• Props
• State
• Events
• File Structure

• useState
• useEffect
• Conditional Rendering
• Lists & Keys
• Lifecycle
• Forms
• Best Practices

• Context API
• useReducer
• Custom Hooks
• React Router
• Lazy Loading
• Optimization
• Production Build

• UI Planning
• Component Design
• API Integration
• Authentication UI
• Form Validation
• Deployment Prep
• Portfolio Project