Front-end web development: an ordered reading path from HTML to modern interfaces
This curriculum takes you from absolute zero to building polished, interactive browser interfaces across four progressive stages. Each stage builds directly on the last — you'll first speak the language of the web (HTML & CSS), then animate it with JavaScript, then master the modern patterns and frameworks professionals use daily. By the end, you'll have the vocabulary, intuition, and practical skills to build real front-end products.
The Language of the Web
BeginnerUnderstand how browsers render pages; write well-structured HTML and styled CSS with confidence, including the box model, layouts, and basic responsive techniques.
▸ Study plan for this stage
Pace: 6–8 weeks, ~40–50 pages/day (3–4 hours of reading + practice per day)
- HTML structure and semantic markup: understanding elements, attributes, and how to organize content with proper tags (headings, paragraphs, lists, forms, etc.)
- The DOM and how browsers parse and render HTML documents into visual pages
- CSS selectors, properties, and the cascade: how styles are applied and inherited across elements
- The CSS box model: margins, borders, padding, and content; calculating element dimensions and spacing
- Layout techniques: normal flow, positioning (static, relative, absolute, fixed), floats, and introduction to flexbox and grid
- Responsive design fundamentals: media queries, flexible grids, fluid images, and mobile-first thinking
- Typography and color in CSS: font properties, text styling, and color systems for accessible, readable designs
- Developer tools and debugging: using browser DevTools to inspect, test, and refine HTML and CSS
- What is the difference between semantic and non-semantic HTML elements, and why does semantic markup matter?
- Explain the CSS box model: what are margins, borders, padding, and content, and how do they affect an element's total size?
- How do CSS selectors work, and what is the cascade? How do specificity and inheritance influence which styles are applied?
- What are the main layout techniques in CSS (normal flow, positioning, floats, flexbox, grid), and when should you use each one?
- How do media queries enable responsive design, and what is a mobile-first approach?
- How would you use browser DevTools to debug a layout issue or inspect an element's computed styles?
- Build a semantic HTML page for a fictional business or blog, using proper heading hierarchy, lists, forms, and sectioning elements; validate it with an HTML validator.
- Create a multi-section landing page with a header, hero section, feature cards, and footer; style it with CSS and ensure the box model is correctly applied (measure margins, padding, and borders).
- Recreate a simple website layout (e.g., a two-column blog with sidebar) using at least two different layout techniques (e.g., floats and flexbox); compare the approaches.
- Build a responsive portfolio or product showcase page that adapts from mobile (single column) to tablet (two columns) to desktop (three columns) using media queries and flexible grids.
- Style a form with proper typography, spacing, and visual hierarchy; test accessibility by checking color contrast and ensuring labels are properly associated with inputs.
- Debug a provided broken HTML/CSS file using browser DevTools: identify rendering issues, inspect computed styles, and fix layout problems.
Next up: Mastering HTML structure and CSS styling provides the foundation for adding interactivity and dynamic behavior with JavaScript, which will be the focus of the next stage.
The single most approachable entry point to HTML and CSS — visual, example-driven, and deliberately paced for true beginners. It builds the mental model of how a browser reads and displays a page before anything else.
Layouts, Responsiveness & Design Thinking
BeginnerBuild fully responsive, multi-device layouts using Flexbox and CSS Grid, and develop an eye for good visual design as it applies to the web.
▸ Study plan for this stage
Pace: 6–8 weeks, ~25–30 pages/day (CSS Secrets: 4–5 weeks; Responsive Web Design: 2–3 weeks)
- CSS Flexbox and Grid as foundational layout systems—understanding flex containers, grid tracks, alignment, and when to use each
- Responsive design principles: fluid grids, flexible images, and media queries as the core pillars of multi-device layouts
- Mobile-first design philosophy and progressive enhancement—starting with mobile constraints to build better, simpler layouts
- CSS techniques for creating resilient, maintainable layouts without relying on fixed pixel dimensions
- Visual design thinking applied to web: hierarchy, whitespace, typography, and contrast in responsive contexts
- Performance and accessibility considerations in responsive layouts—ensuring designs work across devices and abilities
- Modern CSS features (custom properties, calc(), clamp()) that enable flexible, scalable designs
- What are the key differences between Flexbox and CSS Grid, and when should you choose one over the other for a given layout problem?
- How do fluid grids and flexible images work together to create responsive layouts, and what are the mathematical principles behind them?
- What is the mobile-first approach, and why does Ethan Marcotte advocate for it as a design and development strategy?
- How do media queries function in responsive design, and what breakpoints should you consider when designing for multiple devices?
- What CSS techniques from Lea Verou's book help you create layouts that adapt without media queries, and why is this valuable?
- How do visual hierarchy, whitespace, and typography contribute to responsive design, and how do they change across different screen sizes?
- Build a 3-column desktop layout using CSS Grid that collapses to 2 columns on tablet and 1 column on mobile—write it mobile-first with media queries
- Create a navigation bar using Flexbox that stacks vertically on mobile and displays horizontally on desktop; test on real devices or browser DevTools
- Implement a fluid grid system using percentages and calc() (inspired by CSS Secrets techniques) and use it to build a multi-section landing page
- Design and code a responsive image gallery where images scale proportionally and reflow based on viewport width—use flexible images principles
- Refactor a fixed-width layout into a responsive one using Flexbox, Grid, and media queries; document the decisions you made at each breakpoint
- Build a case study: a complete responsive website (blog, portfolio, or product page) applying all concepts—Flexbox, Grid, fluid typography, and visual hierarchy across mobile, tablet, and desktop
Next up: This stage equips you with the layout and responsive design fundamentals needed to build adaptable, visually coherent interfaces—setting the stage for the next level, where you'll layer in interactive components, state management, and JavaScript-driven responsiveness.
Bridges the gap between knowing CSS rules and thinking in CSS — Verou's puzzle-based approach teaches you to solve real layout and visual problems elegantly, cementing Flexbox and advanced selectors through practice.
The book that coined the term and defined the discipline. Short and essential, it explains fluid grids, flexible images, and media queries as a unified philosophy rather than a bag of tricks.
JavaScript — From Syntax to the DOM
IntermediateWrite clean, modern JavaScript; understand core language concepts (scope, closures, async); and manipulate the DOM to make pages genuinely interactive.
▸ Study plan for this stage
Pace: 8–10 weeks, ~40–50 pages/day (3–4 reading sessions per week, allowing time for exercises and practice)
- JavaScript syntax fundamentals: variables, data types, operators, and control flow
- Functions as first-class objects: declaration, scope, closures, and higher-order functions
- Asynchronous JavaScript: callbacks, Promises, and async/await patterns
- Objects and arrays: creation, manipulation, and iteration patterns
- The DOM API: selecting, modifying, and listening to events on HTML elements
- Scope and the execution context: lexical scope, this binding, and variable hoisting
- Modern JavaScript practices: ES6+ syntax (arrow functions, destructuring, template literals)
- Building interactive web pages: event handling, state management, and dynamic DOM updates
- How do scope and closures work in JavaScript, and why are they essential for writing maintainable code?
- What is the difference between callbacks, Promises, and async/await, and when should you use each approach?
- How do you select, modify, and remove DOM elements, and what are the performance implications of different approaches?
- Explain the difference between function declarations, arrow functions, and how this binding differs between them.
- How do event listeners work in the DOM, and what is event delegation and why is it useful?
- What are higher-order functions and closures, and how do you use them to write reusable, composable code?
- Build a to-do list application: add, delete, and mark items complete using DOM manipulation and event listeners
- Create a simple weather dashboard that fetches data from a public API using async/await and displays results dynamically
- Write a module using closures and higher-order functions that manages application state without global variables
- Implement event delegation on a list: add click handlers to dynamically created items without attaching listeners to each one
- Refactor callback-based code into Promise chains and then into async/await syntax to compare readability
- Build an interactive form with real-time validation that updates the DOM based on user input and state changes
- Create a simple game (e.g., rock-paper-scissors or memory game) that uses DOM events, state management, and conditional logic
Next up: This stage equips you with the JavaScript fundamentals and DOM manipulation skills needed to build interactive single-page applications; the next stage will introduce frameworks and libraries that abstract and scale these patterns for larger, more complex projects.
Goes far deeper into the language itself — functions, higher-order programming, asynchronous patterns, and the browser environment. Reading this after Duckett transforms you from a scripter into a JavaScript thinker.
Modern Front-End — Frameworks & Professional Practice
ExpertBuild component-driven, stateful user interfaces with React; understand the modern JavaScript ecosystem (modules, tooling, state management); and adopt the habits of a professional front-end engineer.
▸ Study plan for this stage
Pace: 8–10 weeks, ~40–50 pages/day (alternating between Learning React and JavaScript; approximately 4 weeks on Learning React, then 4–6 weeks on JavaScript)
- React component architecture: functional components, hooks (useState, useEffect, useContext), and composition patterns for building reusable UI elements
- JSX syntax and how it compiles to JavaScript; understanding the virtual DOM and React's reconciliation algorithm
- State management in React: local component state, lifting state up, context API, and when to reach for external state libraries
- Modern JavaScript fundamentals from Crockford: prototypal inheritance, closures, function scope, and the 'this' keyword in different contexts
- Asynchronous JavaScript: promises, async/await, and handling side effects in React with useEffect
- Module systems (ES6 modules) and how modern tooling (bundlers, transpilers) enables professional development workflows
- Professional practices: component testing, debugging, performance optimization, and code organization patterns used in production React applications
- JavaScript's object model and functional programming paradigms: first-class functions, higher-order functions, and immutability patterns
- What is the difference between a functional component and a class component in React, and why are hooks making functional components the modern standard?
- How does React's virtual DOM and reconciliation process improve performance compared to direct DOM manipulation?
- Explain the purpose of the useEffect hook and how to properly manage side effects and dependencies in React components.
- What is the difference between prototypal and classical inheritance in JavaScript, and how does Crockford's perspective on prototypes inform modern React patterns?
- How do closures work in JavaScript, and why are they essential to understanding React hooks and state management?
- When should you use the Context API versus a separate state management library, and what are the trade-offs?
- What is JSX, how does it compile to JavaScript, and why is understanding this compilation important for debugging?
- How do async/await and promises work in JavaScript, and how do you properly handle asynchronous operations in React components?
- Build a multi-component React application (e.g., a todo list or note-taking app) using only functional components and hooks; practice lifting state up and passing props through multiple levels.
- Refactor a class-component-based React application to use functional components and hooks; document what changes and why.
- Create a custom React hook that encapsulates complex state logic (e.g., a useForm hook or useFetch hook) and use it in multiple components.
- Write a React application that uses the Context API to manage global state (e.g., user authentication or theme preferences) across multiple pages/sections.
- Implement a component that fetches data from a public API using useEffect and async/await; handle loading, error, and success states properly.
- Study and rewrite 3–5 code examples from Crockford's JavaScript book to understand prototypal inheritance, closures, and function scope; annotate your understanding.
- Debug a React application using React Developer Tools; identify unnecessary re-renders, inspect component state and props, and optimize performance using React.memo or useMemo.
- Set up a small React project from scratch using a modern bundler (Vite or Create React App); understand the build process and how modules are resolved.
Next up: This stage equips you with the core skills to build professional React applications and a deep understanding of the JavaScript language itself, preparing you to tackle advanced topics like state management libraries (Redux, Zustand), performance optimization at scale, testing strategies, and architectural patterns needed for large-scale front-end systems.
A thorough, practical introduction to React and its ecosystem — hooks, state, and component patterns — written for developers who already know JavaScript well, making it the natural next step after the JS stage.
A concise, opinionated distillation of the subset of JavaScript that leads to clean, maintainable code. Reading it at this stage reframes everything you've learned and sharpens your professional judgment.
Discussion
Keep reading
Paths that share books, cover the same subject, or open a related topic.
