Module 11 Web Engineering

HTML, CSS & the Web Platform

Every senior frontend engineer has war stories about junior developers who can use React fluently but can't center a div without a library, don't understand why their flexbox isn't working, or have never written a form without a form library. This is the vibe coding problem manifest in frontend work: knowing how to use the frameworks without understanding the platform they're built on. HTML, CSS, and vanilla JavaScript aren't legacy knowledge — they're the foundation. React renders to HTML. CSS frameworks are just pre-written CSS. JavaScript in the browser is JavaScript manipulating the DOM. When the framework abstraction leaks (and it always does), the engineers who understand the web platform underneath are the ones who can fix it. Everyone else files a bug and waits. This module takes you through the web platform from scratch. Semantic HTML and accessibility. The CSS cascade, specificity, and inheritance — the rules that govern every stylesheet. The box model in full detail. Flexbox and Grid without the cargo-cult patterns. Responsive design with real viewport units and media queries. And finally, vanilla JS DOM manipulation — because understanding how to build an interactive page without a framework teaches you exactly what frameworks are doing for you.

What You'll Learn

  • 1
    HTML Document Structure — Semantic HTML, the full vocabulary of elements, common mistakes
  • 2
    HTML Forms — Input types, labels, validation, accessibility, and the FormData API
  • 3
    CSS Fundamentals — The cascade, specificity, inheritance, and common properties
  • 4
    The CSS Box Model — Content, padding, border, margin, box-sizing, margin collapse
  • 5
    CSS Layout: Flexbox and Grid in Practice — Axes, gaps, placement, and when to use each
  • 6
    Responsive Design — Viewport meta, media queries, fluid typography, container queries
  • 7
    CSS Methodology and Organization — BEM, utility-first, CSS Modules, custom properties
  • 8
    JavaScript in the Browser — DOM API, events, delegation, and building interactive pages

Capstone Project: Build a Complete Portfolio Website — No Frameworks, No Build Tools

Build a fully responsive, accessible portfolio website using only HTML, CSS, and vanilla JavaScript — no React, no Tailwind, no build tools, no CSS preprocessors. The site must include a working contact form with client-side validation, a filterable project gallery, smooth scroll behavior, and a theme toggle — all implemented from scratch using web platform APIs, demonstrating that you understand the platform beneath the frameworks you use every day.

Why This Matters for Your Career

Framework fatigue is real: React, Next.js, Remix, Astro, SvelteKit — the landscape changes every few years, but HTML, CSS, and the DOM API have been stable for decades. Engineers who understand the platform aren't locked into any framework's abstraction. They can read framework source code, debug rendering issues at the browser level, and migrate between frameworks without being lost. Accessibility is a legal requirement for many web properties and a quality marker for all of them. Semantic HTML is the foundation of accessibility — using the right elements means browsers and assistive technologies understand your content without any additional work. Engineers who reach for a div when they should use a button are creating accessibility barriers that affect real users. The CSS cascade is notoriously difficult to understand by vibe-coding your way through it. Specificity conflicts, inheritance surprises, margin collapse — these issues appear in every frontend codebase and confuse developers who don't understand the underlying rules. Understanding the cascade is what lets you write CSS that behaves predictably, not CSS that's constantly being overridden with !important.