Module 13 Web Engineering

Frontend Engineering Deep Dive

The browser is an extraordinarily complex piece of software, and most frontend developers who use it every day have no idea how it works. They know that their code changes the page — they don't know how that change propagates from JavaScript to pixels on screen. They know their app is slow — they don't know whether the bottleneck is parsing, layout, painting, compositing, or the JavaScript thread. They know their event handler fires — they don't know where in the task queue it lives. This module gives you the mental model of the browser as a system. You'll trace the complete rendering pipeline — HTML parsing, CSS cascade, layout, paint, compositing — and understand exactly where performance work pays off. You'll understand the event loop in the browser, including microtasks, the task queue, and why long tasks block user interaction. You'll build a complete single-page application in vanilla JavaScript that demonstrates mastery of DOM manipulation, state management, and rendering. The accessibility lesson alone is worth the module. Semantic HTML, ARIA roles, keyboard navigation, focus management, screen reader testing — these aren't optional niceties. They're engineering requirements, and the engineers who can implement them correctly from the start are dramatically more valuable than those who bolt accessibility on as an afterthought.

What You'll Learn

  • 1
    The DOM — What it actually is and how browsers build it from HTML
  • 2
    The Browser Rendering Pipeline — Parse, layout, paint, composite
  • 3
    The Event Loop in the Browser — Call stack, task queue, microtask queue
  • 4
    State Management — Lifting state, Context API, external stores, signals
  • 5
    Component Architecture — Composition, custom hooks, design principles
  • 6
    CSS Layout Engines — Flexbox internals, Grid algorithm, stacking contexts
  • 7
    Web Performance — Core Web Vitals, code splitting, Lighthouse
  • 8
    Accessibility — Semantic HTML, ARIA, keyboard navigation, screen readers

Capstone Project: Build an Accessible, Performant Single-Page App — Vanilla JS Only

Build a fully functional single-page application in vanilla JavaScript — no frameworks, no libraries — that scores 90+ on Lighthouse for performance and accessibility, implements full keyboard navigation, handles client-side routing, manages complex state across components, and recovers gracefully from all error states. You'll implement your own minimal state management system, custom event bus, and virtual DOM diffing to understand exactly what frameworks provide.

Why This Matters for Your Career

Framework knowledge is perishable. The browser is not. Engineers who understand the DOM, the rendering pipeline, and the event loop have knowledge that transfers across every framework and library — because all of them are ultimately built on the same foundation. When Angular replaced Backbone, when React replaced Angular, when Next.js became dominant — engineers with deep browser knowledge adapted in days. Those with only framework knowledge had to start over. Core Web Vitals — Largest Contentful Paint, Cumulative Layout Shift, Interaction to Next Paint — are now Google ranking factors and the standard measure of frontend performance. Engineers who can read a Lighthouse report, identify the bottlenecks, and implement the fixes are increasingly valuable as performance becomes a competitive advantage. Accessibility audits are becoming more common in enterprise contracts, and accessibility lawsuits against web properties are a real and growing liability. Engineers who implement accessible interfaces correctly from the start eliminate both risk and expensive retrofitting. Understanding ARIA, focus management, and keyboard navigation deeply enough to get it right without relying on automated checkers is a scarce and valuable skill.