Chapter 1 · 6 lessons · 664 min
Foundations of the Web
Before you build, know what you're building on.
Overview
Before you write a line of code, you need a mental model for the thing you're building on. This chapter gives you the vocabulary, the cast of characters, and the toolkit you'll touch every single day for the rest of your career.
What you'll learn
- How a click in a browser becomes a server response 8,000 km away.
- The exact difference between frontend, backend, and full-stack — and which to learn first.
- The 6-tool starter kit that every professional builder installs on day one.
- Why HTTP, DNS, and CDNs matter even when you 'just want to make a website'.
Who this chapter is for
Anyone who has never coded, anyone who learned from random YouTube videos and feels like they have gaps, and anyone who can write code but can't explain how the internet actually works.
Lessons in this chapter
All lessons are free and open — start anywhere, in any order.
- 1How the Internet Actually WorksCables, signals, and a polite postal service of packets — the boring magic behind every website.112 min
- 2Frontend vs Backend vs Full-StackWhat the user sees, what they don't see, and the people who can do both.110 min
- 3Your Starter ToolkitThe 6 tools every web builder installs before writing a single line of code.109 min
- 4Common Mistakes & How to Avoid ThemThe 5 traps beginners fall into when working on foundations of the web — and the fix for each.111 min
- 5A Real-World WalkthroughA start-to-finish example of applying foundations of the web to a real project you can copy.111 min
- 6Mental Models That Actually HelpThe 3 mental models we keep coming back to when things get hard in foundations of the web.111 min
Glossary
Key terms used throughout this chapter.
- Client
- A device that requests data — your browser, your phone, an IoT sensor.
- Server
- A computer that's always on, waiting to answer requests.
- DNS
- Domain Name System — turns a name like nax.com.my into a numeric IP address.
- ISP
- Internet Service Provider — the company that connects your home or office to the wider internet.
- Packet
- A small piece of data sent across the network. Big files are split into many.
- Latency
- The time it takes for a packet to travel from A to B, measured in milliseconds.
Try it yourself
Knowledge sticks when you use it. Do at least one of these before moving on.
- 01.Open your browser devtools, go to the Network tab, and reload nax.com.my. Count how many separate requests the page makes.
- 02.Run `ping nax.com.my` in your terminal. Note the latency in ms. Then ping a US site like apple.com — compare.
- 03.Install VS Code and the 5 extensions listed in Lesson 1.3. Open a fresh folder, save an empty `index.html`.
Further reading & sources
Primary, official sources we cross-checked against while writing this chapter.