Click any module to expand. This module is the PREREQUISITE for React, MERN, Java Full Stack, Python Full Stack, and every other full-stack path. Students who skip web fundamentals struggle with frameworks — frameworks abstract HTML/CSS/JS, they don't replace them.
The markup language of the web — structure content so browsers and screen readers understand it
DOCTYPE declaration, html/head/body structure. Meta tags: charset, viewport (essential for mobile), description. Title and favicon. Linking CSS and JavaScript (defer vs async). Browser DevTools: Elements panel for inspecting HTML structure. Every web page starts with this structure — understanding it is understanding the web itself.
Semantic elements: header, nav, main, section, article, aside, footer — NOT just divs everywhere. Why semantics matter: SEO (search engines understand page structure), accessibility (screen readers navigate by landmarks), and maintainability (developers understand code faster). "div soup" is the #1 HTML anti-pattern. Using section vs article vs div — when each is appropriate.
Headings (h1–h6 hierarchy — only one h1 per page), paragraphs, emphasis (strong vs em vs b vs i — semantic differences). Links: href, target="_blank" with rel="noopener noreferrer" (security). Images: src, alt text (accessibility requirement, not optional), loading="lazy" for performance. Lists: ul/ol/dl. Tables: thead/tbody/tfoot, scope for accessibility. The building blocks of all content.
Form elements: input types (text, email, password, number, date, file, checkbox, radio, range, color), textarea, select/option. Labels: always connect label to input (for="id" — accessibility requirement). Validation: required, pattern, minlength, maxlength — browser-native validation before JavaScript. Form submission: action, method (GET vs POST). Placeholder vs label (placeholder is NOT a label replacement). Forms are the primary user interaction on the web.
Video element: src, controls, autoplay (avoid — bad UX), poster, multiple sources for browser compatibility. Audio element: src, controls. iframe for embedding (YouTube, Google Maps). picture element with source for responsive images (different images for different screen sizes). figure and figcaption for image captions. Lazy loading for media performance.
WCAG 2.1: Perceivable, Operable, Understandable, Robust. Alt text for every image (describe content, not "image of"). Keyboard navigation: all interactive elements must be reachable via Tab. Focus indicators: never remove :focus outlines without replacement. Colour contrast: 4.5:1 minimum for text. ARIA labels for custom elements (aria-label, aria-describedby, role). Accessibility isn't optional — it's a legal requirement in many contexts and an ethical responsibility always.
Transform plain HTML into beautiful, responsive interfaces — the visual layer of the web
Selectors: element, class (.btn), ID (#header), attribute ([type="email"]), pseudo-classes (:hover, :focus, :nth-child), pseudo-elements (::before, ::after), combinators (descendant, child, sibling). Specificity: inline > ID > class > element (and why !important is an anti-pattern). Box model: content → padding → border → margin. box-sizing: border-box (always use it — default box-sizing is unintuitive).
display: flex — the 1D layout system. Container: flex-direction (row/column), justify-content (main axis alignment), align-items (cross axis), flex-wrap, gap. Items: flex-grow, flex-shrink, flex-basis, align-self, order. Common patterns: centering (justify-content + align-items: center), navbar, card layouts, footer sticking to bottom. Flexbox solves 80% of layout problems — learn it thoroughly before Grid.
display: grid — the 2D layout system. grid-template-columns/rows (fr units, repeat(), minmax()). grid-gap / gap. grid-column / grid-row for item placement. Named grid areas: grid-template-areas for visual layout definition. auto-fit + minmax for responsive grids WITHOUT media queries. When Grid vs Flexbox: Grid for page-level 2D layouts, Flexbox for component-level 1D alignment. Together they handle ALL layout scenarios.
Mobile-first approach: design for mobile, then add complexity for larger screens. Media queries: @media (min-width: 768px) { }. Breakpoints: mobile (< 640px), tablet (640–1024px), desktop (> 1024px) — use content-based breakpoints, not device-based. Responsive units: rem, em, vw, vh, %, clamp(). Container queries (2024+): style based on parent container size, not viewport. The responsive web is the DEFAULT web — not an add-on.
CSS custom properties (variables): --primary: #3b82f6; → color: var(--primary). Theming: change variables for dark mode. Transitions: smooth state changes (hover, focus). @keyframes animations: loading spinners, entrance effects, scroll animations. Transforms: translate, rotate, scale. Filters: blur, brightness, grayscale. CSS nesting (2024+): write nested rules without preprocessors. clamp() for fluid typography: font-size: clamp(1rem, 2.5vw, 2rem).
The CSS framework that replaced Bootstrap — build UIs without writing custom CSS
Utility-first: style with class names (bg-blue-500, text-lg, px-4, rounded-lg, shadow-md) instead of writing CSS. Installation: npm install tailwindcss, configure tailwind.config.js. Why Tailwind won: faster development (no context-switching to CSS files), consistent design system (predefined scales for spacing, colours, typography), smaller production bundles (unused utilities are purged). "Bootstrap gives you components; Tailwind gives you design tokens."
Flex: flex, items-center, justify-between, gap-4. Grid: grid, grid-cols-3, gap-6. Responsive: sm:, md:, lg:, xl: prefixes (mobile-first). Container: max-w-7xl, mx-auto, px-4. Spacing: p-4, m-2, space-y-4 for vertical spacing. Width/height: w-full, h-screen, max-w-md. Every CSS layout concept maps to Tailwind utilities — students who learned CSS3 in Module 2 now apply it with Tailwind's concise syntax.
Building with Tailwind: buttons (bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700), cards, navbars, modals, forms. Dark mode: dark: prefix (dark:bg-gray-900, dark:text-white). Custom configuration: extend the default theme with brand colours, fonts, spacing. @apply for extracting repeated utility patterns into CSS classes (use sparingly). Tailwind + component libraries: shadcn/ui, DaisyUI, Headless UI for accessible pre-built components.
Tailwind: utility-first, highly customisable, no default visual style, larger class attributes in HTML, pairs with React/Vue/Svelte. Bootstrap: component-first, opinionated design, ready-made nav/modal/carousel, jQuery-based JS plugins. Tailwind dominates in 2025: used by Next.js, Vercel, Stripe, Shopify, and most modern startups. Bootstrap still appears in enterprise/legacy codebases. Learn both — Tailwind for new projects, Bootstrap for maintaining existing ones.
Variables to async/await — the programming language every web developer must master
Variables: let (block-scoped, reassignable), const (block-scoped, not reassignable), never var (function-scoped, hoisted — legacy). Data types: string, number, boolean, null, undefined, symbol, bigint. Type coercion: == vs === (always use ===). Template literals: `Hello ${name}`. Operators: arithmetic, comparison, logical, nullish coalescing (??), optional chaining (?.). Control flow: if/else, switch, ternary. Loops: for, for...of (arrays), for...in (objects).
Function declaration vs expression vs arrow function. Parameters: default values, rest (...args), destructuring. Return values. Scope: block, function, global. Closures: function that "remembers" its outer scope (used in event handlers, React hooks, module patterns). IIFE (Immediately Invoked Function Expression). Higher-order functions: functions that take/return functions. this keyword: how context changes with arrow vs regular functions (the #1 JS interview question).
Array methods: map (transform), filter (select), reduce (accumulate), find, findIndex, some, every, flat, flatMap, includes. Object methods: Object.keys(), values(), entries(), spread (...obj), Object.assign(). Destructuring: const {name, age} = person; const [first, ...rest] = arr. JSON: parse, stringify. Immutability: never mutate arrays/objects directly (spread creates new copy). These methods are used in EVERY React component — mastering them is the prerequisite for React.
Selecting elements: querySelector, querySelectorAll (modern), getElementById (legacy). Modifying: textContent, innerHTML, classList.add/remove/toggle, setAttribute, style. Creating elements: createElement, appendChild, insertAdjacentHTML. Events: addEventListener (click, submit, input, keydown, scroll). Event delegation: attach one listener to parent instead of many to children. Event object: e.target, e.preventDefault(), e.stopPropagation(). DOM manipulation is what makes web pages INTERACTIVE.
Callbacks: function passed to another function (the old way — leads to "callback hell"). Promises: .then().catch().finally() — cleaner async chaining. async/await: const data = await fetch(url) — synchronous-looking async code (the modern standard). Error handling: try/catch with async/await. Promise.all (parallel), Promise.race (first resolved). The event loop: call stack → web APIs → callback queue → microtask queue. Understanding async is ESSENTIAL — every API call, every database query, every timer is async.
ES Modules: import/export (named and default). Dynamic import: import() for code splitting. Classes: constructor, methods, inheritance (extends, super), static methods, private fields (#). Iterators and generators (yield). Map, Set, WeakMap, WeakSet. Proxy and Reflect (advanced). Structured clone for deep copying. Optional chaining (?.) and nullish coalescing (??) — the two operators that make every codebase cleaner.
Track changes, collaborate, and build a developer portfolio — the tool every developer uses daily
git init, git add, git commit (with meaningful messages — "Fix login bug" not "update"). Staging area: what's tracked vs untracked vs staged. git status, git log, git diff. .gitignore: never commit node_modules, .env, build folders. Undoing: git restore (discard changes), git reset (unstage), git revert (reverse a commit safely). Git is NOT optional — every professional developer uses it daily. Start using it from your first project.
Branches: git branch feature-login, git checkout -b (create + switch). Merge: fast-forward vs 3-way merge. Merge conflicts: how to read conflict markers, resolve, and commit. Git flow: main (production), develop (integration), feature/* (individual work). Pull requests (PRs): the collaboration workflow — push branch → create PR → code review → merge. Rebasing: cleaner history (git rebase vs merge — trade-offs). Cherry-pick for specific commits.
Repository setup, README.md (project description, install, usage — the first thing interviewers see). GitHub Pages for free static site hosting. GitHub Issues for project management. GitHub Actions basics (CI: run tests on push). Forking and contributing to open source. Profile README: pin best repos, add badges. "Show me your GitHub" is how tech hiring works — an active GitHub profile IS the portfolio.
Type-safe JavaScript — the language every modern frontend and full-stack project uses
TypeScript = JavaScript + static types. Catches bugs BEFORE runtime: "Cannot assign string to number" at compile time, not at 3 AM in production. Basic types: string, number, boolean, any (avoid), unknown (safe any), void, null, undefined. Arrays: string[], number[]. Type inference: TypeScript often infers types without explicit annotation. 2025 reality: 80%+ of new React/Next.js/Node projects use TypeScript. It's not optional anymore — it's the default.
Interfaces: define object shapes (interface User { name: string; age: number; }). Type aliases: type ID = string | number. Union types: string | number. Optional properties: name?: string. Function types: (a: number, b: number) => number. Generics introduction: Array<string>, Promise<User>. Enums for fixed sets of values. This is an INTRODUCTION — deeper TypeScript comes in the React and full-stack modules.
fetch, REST basics, npm, Vite, Lighthouse — the ecosystem around the core languages
fetch(): make HTTP requests from JavaScript. GET (retrieve data), POST (send data), PUT (update), DELETE (remove). JSON: sending and receiving. Headers, status codes (200 OK, 201 Created, 400 Bad Request, 401 Unauthorised, 404 Not Found, 500 Server Error). Async/await with fetch. Error handling: network errors vs HTTP errors. Using public APIs (weather, Pokémon, GitHub) for practice. Understanding APIs is the bridge from "frontend-only" to "full-stack thinking."
npm init, package.json (project metadata + dependencies). npm install: --save vs --save-dev. node_modules (never commit — use .gitignore). package-lock.json (pin exact versions). Scripts: "dev": "vite", "build": "vite build". npx for running packages without installing. Semantic versioning: ^1.2.3 (compatible), ~1.2.3 (patch only). Every JavaScript project beyond basic HTML uses npm — understanding it is prerequisite for frameworks.
Vite: modern build tool — instant dev server, hot module replacement, fast builds. npm create vite@latest → choose vanilla/react/vue. VS Code extensions: ESLint (code quality), Prettier (formatting), Live Server, Tailwind Intellisense, GitLens. Browser DevTools: Elements (HTML/CSS), Console (JS errors), Network (API calls), Performance (bottlenecks), Lighthouse (audits). The professional development environment setup.
Core Web Vitals: LCP (Largest Contentful Paint — loading), INP (Interaction to Next Paint — interactivity), CLS (Cumulative Layout Shift — visual stability). Lighthouse audit: run in DevTools → score out of 100. Image optimization: WebP/AVIF formats, responsive sizes, lazy loading. Minification: CSS/JS compressed for production. CDN for static assets. "Why is this page slow?" — the debugging skill every web developer needs.
Build 3 websites and deploy them live — the portfolio that proves you can build
Semantic HTML5, Tailwind CSS, responsive design, dark mode toggle (CSS variables + JS), smooth scroll navigation, contact form. Deployed on GitHub Pages with custom domain. The first project every developer builds — and the one interviewers see first. Clean, responsive, accessible, and deployed with a live URL.
A functional app using HTML + CSS + JavaScript: weather app (fetch API + geolocation), task manager (CRUD + localStorage), quiz app (dynamic rendering + scoring), or expense tracker (calculations + charts). DOM manipulation, event handling, async API calls, local storage. Deployed on Netlify or Vercel. The project that demonstrates JavaScript skill beyond static HTML.
A complete multi-page website (5+ pages): homepage, about, services, portfolio/gallery, contact. Tailwind CSS with custom theme configuration. Mobile navigation (hamburger menu), image gallery with lightbox, testimonial carousel, form with validation. Responsive across all device sizes. Lighthouse score 90+. Deployed on Vercel with Git-based deployment (push to main → auto-deploy).
GitHub Pages: free, static sites, custom domains. Netlify: free, form handling, serverless functions, continuous deployment from Git. Vercel: free, optimised for frontend, instant previews for branches, custom domains. How deployment works: Git push → build step → serve static files → CDN distribution. "Here's my deployed website" — a live URL is worth more than a screenshot. Every project must be deployed and accessible.
Trainers build web pages live. Students code alongside on their own machines. Every concept is immediately practised — not slides about HTML, but writing HTML.
"Recreate this landing page in 2 hours using Tailwind." "Build a responsive navbar with dark mode." Timed challenges that build speed and confidence.
Trainers review: semantic HTML usage, CSS organisation, JavaScript patterns, accessibility, responsive behaviour, Git workflow. The feedback loop that builds professional habits from day one.
Every project gets a live URL on GitHub Pages, Netlify, or Vercel. "Show me your work" → share 3 live links. Deployed projects beat screenshots in every interview.
React components return JSX (HTML). React apps are styled with Tailwind CSS. React state management uses JavaScript closures. React effects use async/await. Students who skip fundamentals struggle with frameworks — frameworks ABSTRACT the web, they don't replace it.
Backend developers write APIs that serve HTML. Mobile developers use web views. Data scientists build Streamlit dashboards. DevOps engineers deploy websites. Every technical role touches the web. Web fundamentals aren't just for "frontend developers" — they're universal tech literacy.
3 deployed websites accessible to anyone with a browser. No installation, no setup, no "clone my repo and run npm install." Just click the URL. Interviewers evaluate in 10 seconds: "Does it look professional? Is it responsive? Does it work?" Live projects beat static resumes.
2020: HTML + CSS + jQuery + Bootstrap. 2025: HTML5 + Tailwind + TypeScript + Git + Vite + fetch API. The baseline has shifted. Students who learn the 2025 stack are immediately productive at modern companies. Students who learn the 2020 stack need retraining on Day 1.
E-305, Industrial Area, Sahibzada Ajit Singh Nagar, Punjab 160055, IN
