Skip to main content
This is the definitive low-level frontend engineering course. You’ll build browsers, engines, and frameworks from scratch.

​
Course progression

The course is structured to build knowledge progressively, starting from hardware fundamentals and ending with production-ready systems.
1

Hardware fundamentals (Week 0.5)

Start with CPU and memory architecture to understand how code executes at the lowest level.
2

Network layer (Week 1)

Build networking knowledge from scratch, implementing sockets, HTTP, TLS, and WebSockets.
3

Browser engine (Weeks 2-3)

Implement a complete browser engine with HTML parsing, CSS engine, layout, and rendering.
4

JavaScript engine (Weeks 4-5)

Build a JS engine from scratch with parsing, interpretation, garbage collection, and event loop.
5

Virtual DOM (Week 6)

Understand reconciliation algorithms, batching, and performance optimization strategies.
6

React internals (Week 7)

Deep dive into Fiber reconciler, hooks implementation, concurrent features, and SSR.
7

Performance engineering (Week 8)

Master profiling tools and optimization techniques for production applications.
8

Engine modification (Week 9)

Hack browser and JS engines, add custom instrumentation, and integrate WebAssembly.
9

Hardware constraints (Week 10)

Optimize for embedded systems and extreme resource constraints.
10

Capstone project (Weeks 11-12)

Build a complete production-ready system integrating all learned concepts.

​
Week-by-week breakdown

​
Week 0.5: CPU & memory architecture

Hardware fundamentals

  • CPU basics: fetch, decode, execute, writeback
  • Registers & instructions
  • Branching & pipelines with prediction
  • Cache hierarchy (L1/L2/L3)
  • Stack vs heap memory

Low-level execution

  • System calls overview
  • Memory layout: text, data, stack, heap
  • Pointers and memory alignment
  • Virtual memory basics

​
Week 1: Networking from scratch

  • Socket programming: TCP & UDP sockets
  • TCP basics: Three-way handshake, flow control
  • HTTP basics: Parsing headers, chunked encoding, keep-alive
  • TLS basics: Handshake overview, certificate verification
  • WebSocket basics: Upgrade handshake, frame handling
  • tcpdump / Wireshark fundamentals
  • Simulate network latency and packet loss

​
Weeks 2-3: Browser engine implementation

HTML parsing

  • Tokenization state machine (13 states, 67 transitions)
  • Tree construction algorithm
  • Error recovery and quirks mode
  • Parser-blocking scripts and async/defer

CSS engine

  • Tokenizer and parser
  • Selector matching with specificity
  • Cascade resolution algorithm
  • Style computation and inheritance
  • Media query evaluation

Layout engine

  • Box model calculation
  • Normal flow, floats, positioning
  • Flexbox algorithm implementation
  • Grid algorithm implementation
  • Line breaking and text shaping

Paint and composite

  • Layer tree construction
  • Paint recording and display lists
  • Rasterization strategies
  • GPU compositing and textures
Project: Build a browser engine in C++ or Rust that renders Wikipedia. Handle fonts, images, CSS animations. Measure every phase: parse, style, layout, paint, composite.

​
Weeks 4-5: JavaScript engine

  • Lexical analysis and tokenization
  • Recursive descent parser
  • AST construction and validation
  • Scope analysis and symbol resolution
Project: JS engine executing real programs. Implement closures, prototypes, async/await, event loop. Profile GC pauses and optimize hot paths. Connect to DOM for interactive apps.

​
Week 6: Virtual DOM & reconciliation

  • Tree diffing complexity analysis (O(n³) → O(n))
  • Key-based reconciliation
  • Heuristics: component type, element type, lists
  • Fiber architecture preparation
  • Requestanimationframe-based updates
  • Double buffering for UI consistency
  • Priority queues for updates
  • Time slicing for interruptibility
  • Layout thrashing detection
  • Read/write batching (FastDOM pattern)
  • CSS containment and layer creation
  • Composite-only animations
Project: Virtual DOM library with optimized reconciliation. Stress test with 10,000+ dynamic nodes. Profile layout/paint timings.

​
Week 7: React/Next.js internals

Fiber reconciler

  • Work loop and unit of work
  • Reconciliation phases: render and commit
  • Effect list construction
  • Priority levels and lane model

Hooks implementation

  • Hooks queue and cursor
  • useEffect cleanup and dependency checking
  • useRef mutable container
  • useCallback/useMemo memoization
  • Custom hook composition

Concurrent features

  • Time slicing and work interruption
  • Suspense and lazy loading
  • useTransition and useDeferredValue
  • Automatic batching

Server-side rendering

  • renderToString vs renderToPipeableStream
  • Progressive hydration and selective hydration
  • Double pass problem and solutions
  • Edge rendering vs Node rendering
  • File-based routing implementation
  • SSG: getStaticProps build-time execution
  • ISR: revalidation and stale-while-revalidate
  • API routes and middleware
  • Module bundling and code splitting
Project: Clone React’s core reconciler with Fiber and hooks. Build SSR framework with streaming and hydration. Implement file-based routing.

​
Week 8: Performance engineering

Profiling tools

  • Chrome DevTools Performance tab
  • React DevTools Profiler
  • Lighthouse metrics: FCP, LCP, TTI, CLS, FID
  • Custom performance marks
  • Heap snapshots and allocation timelines

Optimization techniques

  • Component memoization strategies
  • Virtualized lists and windowing
  • Image optimization: formats, lazy loading
  • Font optimization: subsetting, preloading
  • Bundle analysis and tree shaking
  • Code splitting strategies

Critical rendering path

  • Eliminate render-blocking resources
  • Minimize critical CSS
  • Defer non-critical JavaScript
  • Preload/prefetch/preconnect strategies
Project: Optimize real-world app from 3s to 1s LCP. Document every optimization with before/after metrics. Handle 60fps animations with heavy DOM updates.

​
Week 9: Engine modification & debugging

  • Build V8 from source with custom patches
  • Add custom bytecode instructions
  • Instrument GC for detailed metrics
  • Profile JIT compilation decisions
Project: Add custom profiling to browser engine. Build WASM module for computationally intensive task (image processing, physics simulation). Optimize JS/WASM boundary.

​
Week 10: Hardware simulation & constraints

Embedded systems

  • Run minimal browser on microcontroller simulation
  • Memory-constrained rendering (64KB RAM)
  • CPU-constrained JavaScript (10MHz)
  • Display optimization for small screens

Stress testing

  • Memory pressure simulation
  • CPU throttling
  • Network constraint testing (2G, 3G)
  • GPU bottleneck analysis
Project: Port mini-browser to embedded environment. Optimize for extreme constraints. Document performance characteristics.

​
Weeks 11-12: Capstone project

1

Custom browser engine

Complete browser engine with HTML/CSS/JS support
2

React-like framework

Framework with Fiber and concurrent features
3

SSR framework

Server-side rendering with streaming and hydration
4

Production application

Production-optimized Next.js application
5

Performance suite

Full performance profiling suite
6

WebAssembly acceleration

WASM acceleration for critical paths
7

Hardware testing

Hardware constraint testing and optimization
Requirements:
  • Render complex UIs at 60fps
  • Handle 10,000+ concurrent DOM updates
  • Sub-second initial page load
  • Progressive enhancement and graceful degradation
  • Comprehensive error handling and edge cases
  • Full performance documentation
Deliverable: Production-ready system with complete understanding of every layer from CPU to pixels.

​
Prerequisites

Before starting this course, you should have:

Programming

Strong C/C++ or Rust programming skills

Computer architecture

Knowledge of computer architecture fundamentals

Operating systems

Understanding of operating systems fundamentals

Algorithms

Mastery of data structures and algorithms