Learning topics
Modern Front-End Engineering develops basic web knowledge into an understanding of how to build, evaluate, and maintain front-end applications. This guide explains the book’s learning topics, expected outcomes, and depth of coverage.
You should already know basic HTML and CSS, JavaScript variables, conditions, loops, functions, arrays, and objects, and basic command-line usage. Professional front-end experience is not assumed.
How to use this guide
Choose a topic below, read its chapter, and use the linked practical brief to apply it. For the full progression, read the book in order. For teaching materials, browse the lecture slides.
The goal is broad, solid engineering understanding. Some subjects are developed far enough to use; others are introduced so you can compare approaches and decide where to study further. Mentioning a technology does not imply complete coverage or mastery.
Explore the topics
- Browser internals
- Semantic HTML & accessibility
- Responsive CSS
- Modern JavaScript
- TypeScript & runtime validation
- Component architecture
- Reactivity & rendering
- State, routing & forms
- APIs & caching
- Real-time & offline systems
- Rendering strategies
- Development tooling
- Front-end security
- Design systems & scaling
- Performance engineering
- Front-end testing
- Delivery & observability
- Architectural decisions
1. Browser internals
Understand the browser as the runtime that makes an interface work. Follow a page from resource loading through DOM and CSSOM construction, layout, painting, and interaction.
What you should be able to do: Explain how the event loop schedules work, identify render-blocking resources, and use developer tools to investigate what the browser actually does.
Read Chapter 1 · Try Practical 01 · All topics
2. Semantic HTML & accessibility
Use HTML to describe meaning and behavior, not just appearance. Connect semantic elements, accessible names, forms, keyboard interaction, and document structure to the ways people navigate an interface.
What you should be able to do: Choose native controls before adding ARIA, check keyboard access, and account for language and text direction. Accessibility requires evaluation beyond passing an automated check.
Read Chapter 2 · Try Practical 02 · All topics
3. Responsive CSS
Build layouts that respond to their content and available space. Learn how the cascade, Flexbox, Grid, container queries, custom properties, and logical properties work together.
What you should be able to do: Choose a layout technique, explain why a style wins, and organize CSS so a change does not create unexpected effects elsewhere.
Read Chapter 3 · Try Practical 03 · All topics
4. Modern JavaScript
Understand the language mechanisms behind interactive applications: scope, closures, modules, promises, asynchronous functions, and error handling.
What you should be able to do: Trace asynchronous work, coordinate requests, handle cancellation and failures, and choose language patterns that make application behavior easier to follow.
Read Chapter 4 · Try Practical 04 · All topics
5. TypeScript & runtime validation
Use types to express valid states and make data contracts explicit. Work with unions, narrowing, generics, interfaces, and strict checking while recognizing that external data can still violate your assumptions.
What you should be able to do: Distinguish compile-time guarantees from runtime validation and place checks where untrusted data enters an application.
Read Chapter 5 · Try Practical 05 · All topics
6. Component architecture
Divide interfaces into components with clear responsibilities. Explore composition, communication, reusable behavior, and patterns for separating interaction logic from visual presentation.
What you should be able to do: Choose component boundaries and APIs that support reuse without introducing abstractions before they are needed.
Read Chapter 6 · Try Practical 06 · All topics
7. Reactivity & rendering
Compare how state changes become visible updates. Study React’s rendering model, Vue’s reactive model, derived values, effects, and the ideas behind signals and compiler optimization.
What you should be able to do: Reason about update dependencies and side effects. React and Vue illustrate architectural models here; this book does not replace their dedicated framework documentation.
Read Chapter 7 · Try Practical 07 · All topics
8. State, routing & forms
Give state a deliberate owner and lifetime. Distinguish local, shared, server, URL, and form state, and connect navigation to the information users expect to preserve or share.
What you should be able to do: Decide what belongs in a component, a shared store, a cache, or the URL, and design routing and forms around those choices.
Read Chapter 8 · Try Practical 08 · All topics
9. APIs & caching
Treat communication with a backend as a boundary that can be slow, unavailable, or inconsistent. Cover HTTP, Fetch, REST, request states, mutations, caching, and invalidation, with GraphQL as a comparison.
What you should be able to do: Represent loading and failure states explicitly, handle authenticated requests, and explain when cached data becomes stale. GraphQL coverage supports evaluation rather than specialist mastery.
Read Chapter 9 · Try Practical 09 · All topics
10. Real-time & offline systems
Consider what happens when data changes remotely or connectivity disappears. Compare polling, server-sent events, WebSockets, browser storage, IndexedDB, service workers, and offline strategies.
What you should be able to do: Choose an appropriate communication and persistence approach and reason about recovery and synchronization. These topics introduce important trade-offs rather than every production edge case.
Read Chapter 10 · Try Practical 10 · All topics
11. Rendering strategies
Compare where and when HTML and application work are produced: client-side rendering, server-side rendering, static generation, and hybrid approaches. Connect hydration, streaming, and server/client components to that choice.
What you should be able to do: Explain the effects on initial delivery, interactivity, caching, and operational complexity instead of assuming one rendering strategy is always best.
Read Chapter 11 · Try Practical 11 · All topics
12. Development tooling
Understand the path from source files to a deployable application. Explore package management, Git workflows, Vite and build systems, bundling, code splitting, linting, source maps, and production builds.
What you should be able to do: Inspect a module graph, recognize what the build transforms, and make tooling decisions that support reproducible development and useful debugging.
Read Chapter 12 · Try Practical 12 · All topics
13. Front-end security
Recognize trust boundaries in browser applications. Study XSS, CSRF, CSP, CORS, cookies, authentication approaches, dependency risks, and browser-side credential handling.
What you should be able to do: Identify unsafe data flows and choose appropriate safeguards. Authentication protocols and advanced browser isolation are introduced for informed evaluation, not as a substitute for specialist security review.
Read Chapter 13 · Try Practical 13 · All topics
14. Design systems & scaling
Explore how shared code and team boundaries influence architecture. Compare design systems, shared packages, monorepos, and micro-frontends through ownership, coordination, reuse, and deployment needs.
What you should be able to do: Explain when shared infrastructure helps and when it adds cost. Micro-frontends, Module Federation, and advanced monorepo architecture are survey topics rather than promised areas of mastery.
Read Chapter 14 · Try Practical 14 · All topics
15. Performance engineering
Treat performance as an investigation supported by measurement. Connect Core Web Vitals with network activity, JavaScript execution, asset size, caching, memory behavior, and browser profiling.
What you should be able to do: Find a bottleneck, choose a targeted intervention, and compare results under meaningful conditions rather than optimizing from intuition alone.
Read Chapter 15 · Try Practical 15 · All topics
16. Front-end testing
Choose tests according to the behavior and risk being checked. Compare static analysis, unit, component, integration, end-to-end, accessibility, and visual testing.
What you should be able to do: Build a balanced strategy, test observable behavior, and understand what each check can and cannot establish about a user’s experience.
Read Chapter 16 · Try Practical 16 · All topics
17. Delivery & observability
Follow an application beyond a successful build. Examine CI/CD, preview and production environments, error monitoring, Real User Monitoring, dependency upgrades, and technical debt.
What you should be able to do: Plan how to release, observe, recover, and maintain an application, with feedback from production informing subsequent changes.
Read Chapter 17 · Try Practical 17 · All topics
18. Architectural decisions
Bring the earlier topics together to compare alternatives against actual requirements. Consider frameworks, state, rendering, styling, networking, and application structure as choices with costs and constraints.
What you should be able to do: Record a reasoned decision, state its trade-offs, avoid unnecessary complexity, and identify evidence that would justify revisiting it.
Read Chapter 18 · Try Practical 18 · All topics
Where the coverage stops
WebRTC, OAuth/OIDC, GraphQL, service workers, micro-frontends, Module Federation, cross-origin isolation, and advanced monorepo architecture are introduced to explain the problems they address and their major trade-offs. Plan further study and project-specific validation before relying on specialist expertise in those areas.
React and Vue are used for architectural comparisons and representative examples. Neither is taught as a complete framework reference.