This course is designed for absolute beginners to learn modern frontend development using HTML5, CSS3, JavaScript, Tailwind CSS, and React. By the end, students will understand web structure, write semantic HTML, style with modern CSS, apply responsive techniques, and deploy a live webpage.
Course Outline:
π Month 1: HTML & CSS (Weeks 1β4)
Week 1: Understanding the Web + HTML Deep Dive
β’ Session 1: Web Basics & HTML Structure
o What is Web Development?
o Frontend vs Backend
o How the web works (DNS, HTTP, Browsers)
o Dev tools setup: VS Code, Chrome DevTools
o File naming & folder structure
o HTML boilerplate: doctype, head, body
o Tags & attributes, headings, paragraphs
o Comments, line breaks, horizontal lines
β’ Session 2: Semantic HTML & Structure
o Nesting & indentation
o Anchor tags & hyperlinks
o Images + alt text
o Lists: ordered, unordered, nested
o Semantic tags: header, nav, main, section, article, footer
o Block vs inline elements
o div vs span
π Assignment 1
Build a basic personal webpage:
β’ Your name, bio, image
β’ Navigation links
β’ Hobbies listed with semantic tags
Week 2: Forms, Tables & CSS Introduction
β’ Session 3: HTML Forms & Tables
o Form structure
o Input types: text, password, email, number, date
o Label linking
o Textarea, select, option
o Checkboxes, radios
o Submit/reset buttons
o Form validation: required, min, max, maxlength
o Tables: table, thead, tbody, tfoot, tr, td, th
o Merging cells: colspan, rowspan
β’ Session 4: CSS Basics & Typography
o What is CSS?
o CSS syntax: selector { property: value; }
o Selectors: element, class, ID
o Adding CSS: inline, internal, external
o Color formats: hex, rgb, hsl
o Font-family, font-size (px, em, rem)
o Font-weight, line-height, letter-spacing
o Google Fonts usage
π Assignment 2
Style your personal page and form with:
β’ Custom fonts
β’ Color scheme
β’ Proper spacing and alignment
Week 3: CSS Box Model, Positioning, Flexbox & Responsive Design
β’ Session 5: Box Model, Display & Positioning
o Box Model: content, padding, border, margin
o box-sizing: border-box
o Display types: block, inline, inline-block, none
o Position: static, relative, absolute, fixed, sticky
o Position offsets: top, left, bottom, right
o Live examples: sticky nav, image overlay
o z-index for layering
o Transition and hover effect
o CSS Animation - @keyframe
o Overflow effect
o Styling of form, navbars, list, tables
β’ Session 6: Flexbox & Image Styling
o Float Property β Left, right - Clear fix hack
o Flexbox intro: why and when
o Parent: display: flex, flex-direction, justify-content, align-items
o Child: flex, flex-grow, flex-basis
o Responsive layouts with Flexbox
o Styling images:
ο§ width, height, max-width
ο§ object-fit: cover, contain
ο§ object-position
ο§ border-radius, box-shadow, opacity
o Responsive banners and profile cards
Assignment 3a
Build a Chair website using Float:
π Assignment 3b
Build a 3-card layout:
β’ Responsive layout with Flexbox
β’ Each card with image styled using object-fit
β’ One card with overlay text using absolute positioning
β’ Sticky navigation at the top
Week 4: Grid, Advanced CSS & Final Project
β’ Session 7: CSS Grid & Transitions
o Grid basics: display: grid
o grid-template-columns, rows
o gap, grid-area
o Naming areas
o Pseudo-classes: :hover, :active, :nth-child
o Pseudo-elements: ::before, ::after
o Transitions: transition, transform, scale, translate
o CSS variables: --main-color, var(--main-color)
β’ Session 8: Final Project Build + Deployment
o Final project layout planning
o Section breakdown: Hero, Features, About, Contact, Footer
o Mobile-first media queries
o Responsive styling using Grid & Flex
o Deploying to GitHub Pages or Netlify
π Assignment 4
Start building your final project layout:
β’ Setup HTML structure & sections
β’ Apply responsive styles
β’ Include transitions, grid/flex layout
π Month 2: Tailwind CSS (Weeks 5β8)
Week 5: Tailwind Fundamentals
β’ Session 1
o Why Tailwind?
o Setup via CDN and Vite/PostCSS
o Utility-first classes, customizing fonts, colors
o Layout: container, margin, padding, width, height
β’ Session 2
o Flexbox utilities
o Grid system
o Responsive design & breakpoints
o Typography: text size, weight, spacing
π Assignment
Build a 3-column responsive pricing table using Tailwind
Week 6: UI Components & Effects
β’ Session 3
o Buttons, Cards, Alerts, Badges
o Custom themes via Tailwind config
o Forms & input styling
β’ Session 4
o Hover, focus, transitions
o Pseudo-classes: hover:, focus:, group-hover:
o Gradients, shadows, animations
π Assignment
UI component library page (buttons, cards, inputs, alerts)
Week 7: Page Layouts & Plugins
β’ Session 5
o Responsive navbar and hero sections
o Layouts with Grid/Flex
o Mobile-first design tips
β’ Session 6
o Tailwind plugins: Typography, Forms
o Accessibility tips
o Organizing utility classes
π Assignment
Landing page with multiple sections: hero, about, features, contact
Week 8: Final Tailwind Project
β’ Session 7
o Plan layout, design sections (header, hero, CTA, footer)
β’ Session 8
o Complete and deploy Tailwind landing page on Netlify/Vercel
Final Tailwind Project:
Fully responsive landing page with Tailwind CSS
π Month 3: JavaScript (ES6+) (Weeks 9β12)
Week 9: JavaScript Fundamentals
β’ Session 9
o Introduction to JavaScript
o Variables: var, let, const
o Data types, typeof
o Operators: arithmetic, logical, comparison
β’ Session 10
o Conditions: if, else, switch
o Template literals
o Functions: declarations, expressions, arrow functions
π Assignment
Build a grade calculator and color switcher using functions and DOM
Week 10: Arrays, Loops, Objects
β’ Session 11
o Arrays and methods: push, pop, splice, map, filter
o Loops: for, while, forEach
β’ Session 12
o Objects: keys, values, destructuring
o ES6 features: spread/rest, shorthand
π Assignment
Build a dynamic to-do list using arrays and functions
Week 11: Advanced JS (ES6+)
β’ Session 13
o Sets and Maps
o Optional chaining, nullish coalescing
o Arrow functions vs traditional
β’ Session 14
o JavaScript modules
o Error handling with try/catch
o Debugging with console and breakpoints
π Assignment
User manager with Map/Set to store user sessions uniquely
Week 12: DOM, Events & APIs
β’ Session 15
o DOM selection and manipulation
o Events: click, change, input
β’ Session 16
o Fetch API: GET and POST
o LocalStorage
o Building a mini app using DOM and Fetch
Final JavaScript Project:
Build a persistent notes app with categories, API integration, and local storage
π Month 4: React (with Hooks & API) (Weeks 13β16)
Week 13: React Basics
β’ Session 17
o What is React?
o JSX and rendering elements
o Functional components and props
β’ Session 18
o useState for dynamic data
o Handling events
o Conditional rendering
π Assignment
Build a light/dark toggle, counter, and visibility toggler
Week 14: Lists, Forms, State Lifting
β’ Session 19
o Lists, keys, and mapping data
o Controlled inputs
β’ Session 20
o Lifting state up
o Forms and validations
π Assignment
Build a form with validation, displaying dynamic feedback
Week 15: useEffect, API Calls
β’ Session 21
o useEffect: lifecycle methods in functional components
o Fetch data with useEffect
o Asynchronous code with promises and async/await
β’ Session 22
o Using external APIs (weather, news, etc.)
π Assignment
Build a weather app using fetch and useEffect
Week 16: Final React Project & Deployment
β’ Session 23
o Project planning & structure
o Routing with React Router
β’ Session 24
o Deploy on Vercel/Netlify
Final React Project:
Build a multi-page app (e.g., blog, dashboard) with React, React Router, and an external API
π Course Completion
At the end of the course, you will have the skills to build a complete portfolio of frontend web applications, from simple webpages to complex, dynamic React apps. You will also gain hands-on experience deploying your projects online.
Uploaded on: May 1, 2025
Last Updated: June 4, 2025