Week 1 – Web Basics & HTML Introduction
Topics:
- Frontend vs Backend
- How the web works (HTTP, Browsers, Servers)
- Basic web tools (VS Code, Chrome DevTools)
- HTML Basics: tags, elements, attributes
- Document structure (,,)
Practice:
- Create a simple HTML page with headings, paragraphs, and lists
- Explore Chrome DevTools
Mini Project: Personal info webpage with text, images, and links
Week 2 – HTML Advanced
Topics:
- Forms & Inputs
- Tables, Multimedia (audio/video)
- Semantic HTML5 tags
- HTML APIs: Local Storage, Geolocation (intro)
Practice:
- Build a contact form with validations
- Embed an image gallery or video
- Mini Project: Portfolio homepage with links and images
Week 3 – CSS Basics
Topics:
- CSS syntax, selectors, properties
- Colors, backgrounds, gradients
- Typography, fonts, and text styling
- Box Model: margin, padding, border
Practice:
- Style headings, paragraphs, buttons
- Experiment with box model properties
- Mini Project: Styled personal portfolio page
Week 4 – CSS Advanced
Topics:
- Positioning: static, relative, absolute, fixed, sticky
- Flexbox layout
- CSS Grid layout
- Transitions, animations, transformations
Practice:
- Build a responsive navigation menu
- Create hover animations for buttons
- Mini Project: Responsive landing page
Week 5 – Responsive Design & Preprocessors
Topics:
- Media queries for mobile-first design
- Introduction to SASS/SCSS
- CSS Variables
- Responsive images and typography
Practice:
- Convert a static webpage to responsive
- Use SCSS variables and nesting
- Mini Project: Responsive multi-section landing page
Week 6 – JavaScript Basics
Topics:
- Variables, data types, operators
- Loops, conditions, arrays
- Functions and scope
- DOM Manipulation
- Event Handling
Practice:
- Build a dynamic list or counter
- Change element styles using JS
- Mini Project: Simple to-do list app
Week 7 – JavaScript Advanced
Topics:
- Objects & Object-Oriented JS basics
- ES6+ features: let/const, arrow functions, destructuring, template literals
- DOM Traversing and Manipulation
- JSON Parsing & Fetch API intro
Practice:
- Build a dynamic user info card
- Fetch data from a sample API and display
- Mini Project: Weather app (basic API integration)
Week 8 – JavaScript Deep Dive
Topics:
- Callbacks, Promises, Async/Await
- Event Loop & Asynchronous JS
- Local Storage & Session Storage
- Error Handling & Debugging
Practice:
- Store/retrieve user preferences in local storage
- Use async/await to fetch API data
- Mini Project: Movie search app using free API
Week 9 – Version Control & Workflow
Topics:
- Git basics: init, commit, push, pull, branching
- GitHub workflow & collaboration
- Deployment using GitHub Pages / Netlify / Vercel
Practice:
- Push mini projects to GitHub
- Deploy a website online
- Mini Project: Portfolio deployment online
Week 10 – CSS Frameworks
Topics:
- Bootstrap basics
- Grid & Flex utilities
- Components: buttons, cards, modals
- Introduction to Tailwind CSS
Practice:
- Convert existing webpage to Bootstrap layout
- Style elements using Tailwind utilities
- Mini Project: Responsive dashboard UI
Week 11 – React Basics
Topics:
- Introduction to React.js & Virtual DOM
- JSX & Components
- Props, State, Event Handling
- Conditional Rendering & Lists
Practice:
- Build a small counter component
- Pass data via props to child components
- Mini Project: React to-do list with components
Week 12 – React Advanced
Topics:
- Hooks: useState, useEffect
- Context API for state management
- React Router Basics
- Fetching API data in React
Practice:
- Build a multi-page React app with routing
- Display API data in a component
- Mini Project: React-based e-commerce product listing page
Week 13 – Advanced Frontend Concepts
Topics:
- Accessibility (ARIA, semantic HTML)
- SEO basics
- Browser compatibility testing
- Performance optimization (lazy loading, minification)
Practice:
- Test website in multiple browsers
- Optimize images and scripts
- Mini Project: Accessible and SEO-friendly blog page
Week 14 – Progressive Web Apps & TypeScript Intro
Topics:
- Progressive Web Apps (PWA) basics
- Service Workers & offline mode
- Introduction to TypeScript for frontend
Practice:
- Convert small React app to PWA
- Add TypeScript types to components
- Mini Project: Offline-capable React app
Week 15 – Capstone Project Planning
- Create GitHub repo & initial setup
Week 16 – Capstone Project Development
Topics:
- Full development using HTML, CSS, JS/React
- Responsive design, accessibility, SEO, performance
- Deployment online
