FRONTEND WEB DEVELOPMENT
COURSE OUTLINE
Month 1: Web Basics + HTML + CSS
Week 1: Introduction to Web Development
• Web development roadmap
• Internet & browsers
• Developer tools setup (VS Code, Chrome, Git)
• Structure of a website
Week 2–3: HTML5 – Building the Page Structure
• HTML tags and elements
• Text formatting, images, links, lists
• Tables, forms, input types
• Semantic HTML and accessibility
• Audio, video, and embedding content
Mini Project: Personal Resume or Portfolio Homepage
Week 4: CSS Fundamentals
• Selectors, properties, and values
• Box model, display types
• Text styling, fonts, colors
• Borders, margins, padding
Mini Project: Styled resume/portfolio page
Month 2: CSS Layouts + Bootstrap
Week 5: Intermediate CSS
• CSS units (px, %, rem, em)
• Positioning (static, relative, absolute, fixed)
• Pseudo-classes and pseudo-elements
• Transitions and animations
Week 6: Flexbox and Grid
• Flexbox containers and items
• Responsive layouts with Grid
• Media queries for all screen sizes
Project: Responsive 2-column website layout
Week 7–8: Bootstrap 5
• Bootstrap setup
• Containers, grid system
• Components: Navbar, Cards, Carousel, Forms, Buttons
• Utility classes
• Creating responsive websites
Project: Company landing page using Bootstrap
Month 3: JavaScript Fundamentals
Week 9–10: JavaScript Basics
• Data types, variables (var, let, const)
• Operators, conditionals
• Loops (for, while), functions
• Arrays and objects
Week 11: DOM Manipulation
• Accessing and modifying HTML with JavaScript
• DOM events (click, change, keyup)
• Creating elements dynamically
• Styling elements with JS
Project: To-Do List App or Simple Quiz App
Week 12: Advanced JS Concepts
• ES6+ features (arrow functions, template literals, destructuring)
• Array methods (map, filter, reduce)
• Local storage
• Form validation
Project: Expense Tracker or Quiz App
Month 4: React.js – Fundamentals
Week 13–14: Introduction to React
• React concepts (SPA, components)
• JSX syntax
• Functional components
• Props and state
• Events in React
Project: React-based user profile card or counter app
Week 15–16: React Intermediate
• Lists and keys
• Conditional rendering
• Forms in React
• Lifting state up
• useState and useEffect hooks
Project: Notes app or basic form app
Month 5: React Advanced + Routing + APIs
Week 17: React Router
• React Router v6
• Navigating with Link
• Routes and nested routes
Week 18–19: Working with APIs
• Fetch API and Axios
• useEffect to call API
• Displaying dynamic data
Project: Movie Search App or Weather App (using external API)
Week 20: Component Reusability & State Management Basics
• Reusable components
• State lifting
• Intro to Context API (optional)
Project: Mini E-Commerce Product List
Month 6: Final Projects + Deployment + GitHub
Week 21–22: Capstone Project
Pick one or more:
• Full personal portfolio in React
• Blogging platform (React + Routing + JSON API)
• Task Manager / To-do dashboard
• Mini Shopping Cart
Week 23: Git & GitHub
• Version control basics
• Git commands
• Creating repositories
• Pushing code to GitHub
Week 24: Deployment & Portfolio
• Deploy projects using Netlify or Vercel
• Building a project showcase portfolio
• Resume building & job portfolio tips
Final Presentation: Showcase your capstone project
