Introduction to Web Development
- What is Front-End Development?
- Understanding Client-Side vs Server-Side
- Overview of Web Technologies (HTML, CSS, JS, Frameworks)
- Setting Up Development Environment (VS Code, Chrome DevTools)
HTML – Structuring Web Pages
HTML Basics
- HTML Page Structure ()
- Headings, Paragraphs, Links, Images, Lists
- Forms & Input Elements (<input>, <textarea>, <select>, <button>)
- Tables & Semantic Elements (<header>, <footer>, <section>)
HTML5 Advanced Topics
- Audio & Video Embedding (<audio>, <video>)
- HTML5 APIs (Geolocation, Canvas, Local Storage)
- SEO Basics (Meta Tags, Open Graph Tags)
CSS – Styling Web Pages
CSS Basics
- Inline, Internal & External CSS
- Selectors, Classes, IDs
- Box Model (Margin, Padding, Border)
- Positioning (Static, Relative, Absolute, Fixed)
CSS Advanced & Responsive Design
- Flexbox & Grid Layout
- Media Queries for Responsive Design
- Transitions & Animations
- CSS Variables & Preprocessors (SASS, LESS)
CSS Frameworks
- Bootstrap (Grid System, Components, Forms)
- Tailwind CSS (Utility-First CSS)
JavaScript – Adding Interactivity
JavaScript Basics
- Variables (let, const, var)
- Data Types & Operators
- Functions & Scope
- DOM Manipulation (document.querySelector(), addEventListener())
JavaScript Advanced Concepts
- Event Handling (onClick, onChange)
- Asynchronous JavaScript (setTimeout(), setInterval())
- Promises & Async/Await
- ES6 Features (Arrow Functions, Template Literals, Destructuring)
Front-End Frameworks & Libraries
React.js – Modern UI Development
- Introduction to React
- Components & Props
- State & useState Hook
- Handling Events in React
- React Router (Navigation)
- API Calls in React (fetch, axios)
- State Management (Redux, Context API)
UI Frameworks for React
- Material-UI (MUI)
- Tailwind CSS with React
- ShadCN for UI Components
Back-End Basics for Front-End Developers (Optional)
- Introduction to Node.js & Express.js
- Connecting Front-End with REST APIs
- Fetching Data from Databases (MongoDB, Firebase)
Deployment & Optimization
- Web Performance Optimization
- Deploying on Netlify, Vercel, or GitHub Pages
- Lighthouse Audits for Performance
Final Projects
- Portfolio Website (Personal Website with Resume)
- E-commerce UI (Product Listing, Cart, Checkout)
- Weather App (API Integration, Dynamic UI)
- To-Do List App (CRUD Operations)
