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

Build docs developers (and LLMs) love

Get started for freeTalk to us