Web Engineering Fundamentals Guide
The knowledge you need to build web applications does not fit inside a single framework. How CSS calculates the width of an element. What gets cached between the browser and the server. How a database handles simultaneous access. How a shell passes environment variables to child processes. Which archetype turns a slow piece of code fast. Where the pieces start to break once users grow. Why a query that spans several tables no longer adds up. How a single thread juggles both networking and timers. Why the same date or the same character can be counted differently depending on how you count. None of these live at a layer you can learn by memorizing a particular library.
This guide organizes that layer into 44 chapters.
About this guide
Day-to-day, the framework keeps the foundation hidden. That's fine while it stays hidden — but there are moments when what was hidden comes to the surface. When a layout breaks in ways you did not intend. When a cache serves you stale data. When simultaneous updates corrupt the database. Whether you can narrow down the cause depends on whether you know the layer underneath.
This guide covers two things.
- How the machinery works — what runs, in what order, and what falls out of it
- How to make the call — starting from what you can observe, how to narrow down where the cause is
We emphasize the second. Knowing the definitions of the three Core Web Vitals is a different skill from working back from a reading where LCP is fine but INP is poor to identify the cause. You can pick up the first from a book; the second requires you to understand how the metrics relate to one another.
Who this is for
- Web developers with a few months to a few years of experience, comfortable with frameworks but uneasy about the layers beneath
- Anyone who wants their cross-discipline groundwork organized as a system rather than as scattered fragments
- Anyone stepping into the role of explaining why things happen the way they do — in incident response or in code review
Every chapter opens by naming the chapters worth reading first as prerequisites. As long as you have those covered, you can start with any chapter you like.
Prerequisites
| Required? | Knowledge | Note |
|---|---|---|
| Required | Experience building screens with HTML and CSS | You do not need to have the syntax memorized |
| Required | Experience writing programs in some language | Code examples are in TypeScript, but the concepts are language-agnostic |
| Recommended | Experience developing or operating a web application | Recalling past failures at work makes things click faster |
SQL and shell commands are explained inside the chapters that need them, to the extent needed there. Reading and writing SQL itself is covered by two chapters in Part 12.
Chapter outline
All 44 chapters, grouped into 14 parts.
Part 1: Browsers and CSS
| Chapter | What it covers |
|---|---|
| 01 Box model | What width refers to. How box-sizing changes the calculation, when margins collapse, and how far the background gets painted |
| 02 Selectors and cascade | The difference between combinators, pseudo-classes vs. pseudo-elements, how specificity is calculated, and which style ultimately wins |
Part 2: UI and rendering
| Chapter | What it covers |
|---|---|
| 03 Declarative and imperative UI | Deriving UI from state versus operating on the DOM directly |
| 04 Rendering patterns | CSR, SSR, SSG, and ISR — when and where to build the HTML, and what each choice costs |
| 05 Optimistic updates | Advancing the UI without waiting for the response. Rollback on failure, and situations where you must not use it |
Part 3: Performance
| Chapter | What it covers |
|---|---|
| 06 Core Web Vitals | The definitions of LCP, INP, and CLS. How to narrow down causes from combinations of the readings |
| 07 HTTP caching and CDNs | Each directive of Cache-Control. How to design caching from the nature of the resource |
Part 4: Computer science basics
| Chapter | What it covers |
|---|---|
| 08 Complexity | How to read big-O. Time and space complexity, and the feel of the common orders |
| 09 Binary search | Halving a sorted array. Implementation pitfalls, and the conditions it applies to |
| 10 Choosing data structures | Arrays, linked lists, stacks, queues, hash maps, trees. What each is good and bad at, operation by operation |
| 11 Bit operations | Using bitwise AND and shifts to handle flags. Building masks, and where you actually reach for them |
| 12 Design patterns | Strategy, Singleton, Observer, and Abstract Factory. Sharing designs through named vocabulary |
Part 5: Networking
| Chapter | What it covers |
|---|---|
| 13 TCP/IP | The layered model. The division of labor between IP, TCP, and UDP. How port numbers get assigned |
| 14 DNS | The name resolution flow. Zones and delegation, TTL and caching, and what "DNS propagation" really is |
| 15 HTTP | The structure of requests and responses. The nine standard methods, safety and idempotency, and status codes |
Part 6: Security
| Chapter | What it covers |
|---|---|
| 16 Authentication and authorization | Confirming who someone is, and deciding what they can do. What separates 401 from 403 |
| 17 Common web attacks and defenses | XSS, CSRF, SQL injection, and more. Deriving defenses from the conditions that make each attack succeed |
Part 7: Databases
| Chapter | What it covers |
|---|---|
| 18 Transactions | The four properties of ACID. What commit and rollback actually do and do not undo |
| 19 Locks and isolation levels | Shared vs. exclusive locks, the four isolation levels, optimistic vs. pessimistic locking, and deadlocks |
| 20 Indexes | How lookups get faster, and the cost you pay in exchange. The column order in composite indexes |
Part 8: Working practices
| Chapter | What it covers |
|---|---|
| 21 Shell basics | Standard I/O, pipes, and redirection. Thinking in terms of composing commands |
| 22 Shell scripting and environment variables | The difference between shell variables and environment variables. export and inheritance by child processes, and picking the right way to run a script |
| 23 Error handling | Distinguishing normal, near-normal, and abnormal paths. Where to catch things, and what to tell whom |
| 24 Retries and idempotency | How to tell whether a failure is safe to retry. Backoff and jitter, and what an idempotency key actually guarantees |
Part 9: Trust boundaries
The browser holds more than one boundary. Origins and cookie scopes do not line up, storage divides on the opposite line from cookies, and the range a certificate vouches for is different again. That mismatch is where incidents come from.
| Chapter | What it covers |
|---|---|
| 25 Origins and CORS | The three components of an origin. The same-origin policy blocks reading, not sending |
| 26 Cookies | Attributes and scopes. Why Domain widens rather than narrows, and how SameSite decides at the site level |
| 27 Browser storage | Three mechanisms across five axes. The capacity limits run in opposite directions as floors and ceilings |
| 28 IndexedDB and the Cache API | The gap between the key the spec defines and the key implementations use. What makes stored data disappear |
| 29 TLS and certificates | Certificates vouch for identity. Chain verification, and what changes when you move TLS termination |
Part 10: Algorithm patterns
This is a continuation of Part 4. Where that part covered complexity and data structures as the foundation, this one covers "when you see slow code, which pattern do you rewrite it into?" These are cross-discipline tools, but complexity and data structures from Part 4 are a prerequisite.
| Chapter | What it covers |
|---|---|
| 30 Recursion and divide-and-conquer | Base cases and recursive steps. Counting steps with a recursion tree. What separates merge sort from quicksort |
| 31 Graphs and traversal | Adjacency lists, choosing between BFS and DFS, ordering by dependency, and detecting cycles |
| 32 Dynamic programming | The overlap of subproblems. Memoization vs. tabulation, and designing states and transitions |
| 33 Array scanning patterns | Two-pointer, sliding window, prefix sum, monotonic stack |
Part 11: System design
Where the parts up to here covered the mechanics of individual technologies, this part covers how you combine them. It's about deciding how many boxes to line up when load grows, and what stops working when what breaks. The answer is never uniquely determined, so being able to say why you chose it is the endpoint.
This part builds on material from other parts. Which ones to read first is listed at the top of each chapter.
| Chapter | What it covers |
|---|---|
| 34 Capacity estimation | Deriving requests per second and data volume from user counts. The conditions under which you can say "one machine is enough" |
| 35 Scaling directions | Vertical and horizontal. The procedure for pulling state outside, how load balancers distribute, and offloading to caches and queues |
| 36 Availability and redundancy | How to find single points of failure. Multiplying availability out, the shapes of standby, failover time, and degraded operation |
| 37 Data distribution | Replication and sharding. Why you can't read what you just wrote, skew in partition keys, and how to read CAP |
| 38 Architecture diagrams and trade-offs | What boxes and lines represent. How to choose what to leave out. Why the same requirements have multiple right answers |
Part 12: Reading and writing SQL
This is a continuation of Part 7. Where that part covered transactions and indexes — the machinery of the database — this one covers the queries themselves. Row counts that don't add up, amounts that double, rows that disappear on NULL. None of these throw an error.
| Chapter | What it covers |
|---|---|
| 39 Joins and aggregation | The evaluation order of SELECT, viewing inner vs. outer joins in terms of row counts, the granularity of GROUP BY, and the three-valued logic of NULL |
| 40 Subqueries and window functions | The three positions where a subquery can go, EXISTS, CTEs, and tools that aggregate and rank without collapsing rows |
Part 13: Concurrency
The insides of "running at the same time". This part covers the machinery of handling wait time on top of a single thread, and the split when you actually run things separately. Both the responsiveness questions in Part 3 and the contention questions in Part 7 can be explained from this layer.
| Chapter | What it covers |
|---|---|
| 41 Event loop | The order of tasks and microtasks, where the continuation after await runs, and how a long task blocks painting and input |
| 42 Processes and threads | What is separated and what is shared, why copying environment variables goes one way, races on shared memory, and terminating with signals |
Part 14: Representing values
Where the same value can be written more than one way, this part covers where the gaps show up. Differences in representation are invisible; most of the time, "the count doesn't match" or "the order is wrong" is your only clue.
| Chapter | What it covers |
|---|---|
| 43 Datetimes and time zones | Instants vs. local times vs. durations, offsets vs. time zones, day boundaries, and the pitfalls of calendar arithmetic |
| 44 Character encoding | Character sets vs. encoding schemes, four ways of counting, normalization, collation, and byte-based limits |
How each chapter is structured
Every chapter follows the same shape.
| Section | Content | In every chapter? |
|---|---|---|
| What you'll learn in this chapter | What you will be able to do by the end of the chapter | Yes |
| Prerequisites | Chapters worth reading first | Yes |
| Body | How things work, and how to make the call. Uses diagrams, tables, and code | Yes |
| What this chapter does not cover | Areas covered deeply by existing guides, and pointers there | Only where applicable |
| How to structure a written answer | How to organize an answer when asked to explain in prose | Only Chapters 16, 17, 23, and 38 |
| Common misconceptions | Where people actually stumble in the field, and the correct understanding | Yes |
| Exercises | Questions to check your understanding. Answers and explanations are collapsible | Yes |
| Summary | The key points of the chapter | Yes |
| Related references | Deeper links into existing guides, and links to primary sources | Yes |
| What to read next | The next chapter, and cross-links to related chapters in other parts | Yes |
How this fits with the other guides
This site already has detailed guides for each technology stack. This guide doesn't compete with them — it takes responsibility for the foundation and forwards deeper questions to the individual guides.
For example, the transactions chapter covers the meaning of ACID and the scope of a rollback; how you write DB::transaction() in Laravel gets forwarded to the backend guide. The design-patterns chapter aligns the vocabulary of four representative patterns; whether a given TypeScript codebase actually needs one of those patterns gets forwarded to the design-patterns guide.
Each chapter's "What this chapter does not cover" section says where it forwards to.
How to read it
You do not need to read from the top. When a chapter has prerequisite chapters, they are named at the very top of it. A few natural ways to choose:
- Start with your weakest areas — scan the chapter list and pick chapters you cannot yet explain from memory
- Start from what's hurting — layout breaking? Part 1. Slow rendering? Part 3. Bad data? Part 7. Processing that never finishes? Part 10. Traffic outgrowing your setup? Part 11. Queries whose results don't add up? Part 12. Screen freezing? Part 13. Dates or characters behaving unexpectedly? Part 14
- Read straight through — Parts 1 through 9 descend from the frontend, through the backend, into the layers beneath. Parts 10 through 14 build on what the other parts established. Read each chapter's prerequisites first and the connections between chapters click into place