Chapter 2: Web Basics
You now understand what happens underneath a webpage, the hardware, the network, the browser turning HTML and CSS into pixels. Now it's time to actually write the thing the browser is turning into those pixels.
Every website you've ever opened, no matter how advanced it looks, still starts with the exact same two building blocks: HTML and CSS. This chapter is where you actually learn to build with them, properly, not just copy a snippet and hope it looks right.
What a Webpage Is Actually Made Of
Strip away every framework, every animation, every fancy interaction, and a webpage is still just two things underneath: structure and style. HTML gives a page its bones, what's a heading, what's a paragraph, what's a button. CSS gives it its appearance, colors, spacing, layout, how it responds when the screen gets smaller.
You already saw, back in the Foundation chapter, how the browser turns this into the DOM, the CSSOM, and eventually pixels on your screen. This chapter is about getting good at writing the actual HTML and CSS that feeds that whole process, well enough that the page looks and behaves exactly the way you intended, not however the browser happened to guess.
What You'll Learn Here
Web Basics is split into two parts, one for structure, one for style.
- HTML. The structure and skeleton of every webpage. Every tag you actually need to know, semantic structure, forms, accessibility, and the metadata that helps a page get found and shared properly.
- CSS. The visual language of the web: the cascade, the box model, Flexbox and Grid, responsive design, animations, and modern approaches like TailwindCSS and CSS Modules.
One part teaches you what a page is made of. The other teaches you how to make it look, and behave, the way you actually want.
Why This Comes Before Anything Else You Build
It's tempting to rush past HTML and CSS to get to something that feels more like "real programming," a framework, some logic, an app. But every framework you'll learn later, React, Vue, Next.js, all of it, is still ultimately just generating HTML and CSS underneath. Skip this chapter, or rush it, and you'll spend years fighting layouts you don't actually understand, copying class names you can't quite explain.
Get comfortable here instead, and everything after this gets noticeably easier. A layout bug in React stops being mysterious once you actually understand Flexbox. A weird spacing issue stops being frustrating once you understand the box model underneath it.
This is where you start actually building the things people see. Let's begin.