Chapter 02 — Reading & Writing HTML + CSS

You're not becoming a developer

Let's be clear about what this chapter is. It's not "memorize 200 HTML tags." It's more like learning enough Spanish that you can have a real conversation — not just order coffee by pointing at a menu. You need enough to write a component yourself, catch what's wrong when something breaks, and reason about layout without needing help for every line.

The tags and rules in this chapter will become fluent through practice, not passive reading. By the end, you'll have written real CSS — not just looked at it. Bookmark this page as a reference, but expect to not need it for long.

💡 How to install VS Code

Your code editor — download before this chapter

VS Code (Visual Studio Code) is a free code editor made by Microsoft. Think of it as Google Docs, but for code — it color-codes everything and makes files easy to navigate. Download it at code.visualstudio.com (free, no account needed). Once installed, you can open any folder or file and start editing.

The HTML tags you'll actually use

HTML is written in "tags" — words wrapped in angle brackets. Most tags come in pairs: an opening tag and a closing tag, with the closing tag having a forward slash. Content goes between them.

<!-- Headings: h1 is the biggest/most important, h6 is smallest -->
<h1>This is the main page title</h1>
<h2>This is a section heading</h2>
<h3>This is a sub-section heading</h3>

<!-- Paragraphs -->
<p>This is a paragraph of body text.</p>

<!-- Div: a generic box. The most common element in all of HTML. -->
<div>I'm just a container. I hold other things.</div>

<!-- Links: href is where the link goes -->
<a href="https://figma.com">Click here to go to Figma</a>

<!-- Images: src is the image file path, alt describes the image -->
<img src="photo.jpg" alt="A smiling person at a computer">

<!-- Bullet list -->
<ul>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>

<!-- Button -->
<button>Click me</button>

📖 Jargon decoded

What's an "attribute"?

Attributes are extra information you add to an HTML tag. In <a href="figma.com">, href is an attribute — it tells the browser where the link should go. In <img src="photo.jpg" alt="Description">, both src and alt are attributes. They're always written inside the opening tag as name="value".

CSS: painting the structure

CSS works by selecting HTML elements and then styling them. The selector is how you tell CSS which element you're talking about. The styles are what you want to do to it.

/* Element selector — targets ALL h1 tags on the page */
h1 {
  font-size: 48px;
  color: #ffffff;
}

/* Class selector — targets any element with class="card" */
/* A class is a nickname you give to an element so CSS can find it */
.card {
  background: #111111;
  border-radius: 12px;
  padding: 24px;
}

/* ID selector — targets the ONE element with id="hero" */
/* IDs should be unique — only one per page */
#hero {
  height: 100vh;
  display: flex;
  align-items: center;
}

In your HTML, you add a class like this: <div class="card">. Then in your CSS, .card { } targets it. The dot before "card" in CSS means "look for an element with this class name." That's the connection.

The box model — the most important concept in CSS

Every HTML element — every heading, paragraph, div, image, button — is a rectangle. Always. Even if it looks circular on screen, the underlying structure is a box. Understanding this box is the key to understanding all of CSS layout.

The box has four layers, from inside out:

Content — the actual stuff inside the element (your text, your image)
Padding — breathing room between the content and the edge of the box. Makes the element feel less cramped inside.
Border — a line around the edge of the box. Can be solid, dashed, dotted — any color and thickness.
Margin — space outside the border, between this element and its neighbors.

💡 Analogy

Think of a framed photo on a wall

The photo itself = content. The white matting around the photo = padding. The picture frame = border. The space between this frame and the next frame on the wall = margin. When you want "more breathing room inside a button," you increase padding. When you want "more space between two buttons," you increase margin.

.card {
  /* Content size */
  width: 320px;

  /* Padding: space inside the card (top/bottom left/right) */
  padding: 24px 20px;

  /* Border: 1px solid dark line around the card */
  border: 1px solid #333333;

  /* Border radius: rounds the corners */
  border-radius: 12px;

  /* Margin: space outside the card, pushing neighbors away */
  margin-bottom: 16px;
}

Flexbox — how modern layouts are built

In the old days, web layouts were a nightmare. Today, almost everything is built with Flexbox — and once you understand it, you'll see it everywhere. The key insight: Flexbox is about the relationship between a parent container and its children.

You put display: flex on the parent, and that parent starts controlling how its children are arranged.

/* The PARENT container — this is what you put display: flex on */
.nav {
  display: flex;               /* Turns on flexbox */
  justify-content: space-between; /* Spreads items across horizontal axis */
  align-items: center;         /* Centers items on vertical axis */
  gap: 16px;                   /* Space between items */
  padding: 20px 40px;
}

/* The CHILDREN — these get arranged by the parent */
.nav-logo { font-weight: 700; }
.nav-links { display: flex; gap: 24px; }
.nav-button { background: #f5e642; padding: 10px 20px; }

justify-content — controls alignment along the main axis (horizontal by default): flex-start (left), center, flex-end (right), space-between (push to edges)
align-items — controls alignment on the cross axis (vertical by default): flex-start (top), center (middle), flex-end (bottom)
gap — sets the space between flex children without needing individual margins
flex-direction: column — stacks items vertically instead of horizontally (useful for mobile layouts)

🎯 The Figma connection

Auto Layout = Flexbox

If you use Auto Layout in Figma, you already understand Flexbox conceptually. The direction (horizontal/vertical), gap, padding, and alignment in Auto Layout map directly to Flexbox properties in CSS. You've been thinking in Flexbox this whole time without knowing it. Chapter 04 goes deeper on this mapping.

How to see your changes live

The simplest way: save your HTML file in VS Code, then drag it into Chrome. Every time you change something, save the file (Cmd + S) and reload Chrome (Cmd + R).

For a better experience, install the Live Server extension in VS Code (it's free). Right-click your HTML file → "Open with Live Server" — it opens a browser tab that auto-refreshes whenever you save. No manual reloading needed.

To install Live Server: open VS Code → click the Extensions icon in the left sidebar (looks like four squares) → search "Live Server" → click Install on the one by Ritwick Dey.

What CSS failures look like — and how to diagnose them

CSS has a forgiving failure mode: when it does not understand something, it skips it silently. No red error in the console, no warning — it just does nothing. This is useful (a typo does not crash the page) but it means you have to know where to look.

Wrong selector — nothing changes
You wrote .Card in CSS but the HTML has class="card". CSS is case-sensitive. The rule exists but matches nothing. In DevTools: right-click the element → Inspect → look at the Styles panel on the right. If your rule is absent entirely, the selector is not matching.
Property typo — silently ignored
You wrote colour: red instead of color: red. The browser ignores it without complaint. In DevTools → Styles panel: invalid declarations appear with a yellow warning triangle or are struck through. That is your signal that the property name or value is wrong.
Specificity conflict — your rule loses
You added a rule but another rule elsewhere is winning because it is more specific. An ID selector (#hero) always beats a class rule (.card). In DevTools → Styles panel: losing declarations appear struck through with the winning rule shown above them.

💡 DevTools as your CSS debugger

The Styles panel is your first stop

Open DevTools (Cmd + Option + I), click the Elements tab, then click any element on the page. The Styles panel on the right shows every CSS rule applying to it — including struck-through overridden rules and yellow-flagged invalid declarations. You can click any value and edit it live to test a fix. Changes here do not save to your file, but they let you experiment instantly.

You need: VS Code (free — code.visualstudio.com) Claude (free — claude.ai) Chrome browser

1

Create a new folder on your Desktop called my-card. Inside it, create a new file called index.html (you can do this in VS Code: File → New File → save it with that name).
2

Open Claude at claude.ai and paste this prompt: "Write me a simple profile card in a single HTML file — name, a placeholder photo using a gradient background, and a two-sentence bio. Use a dark background (#0a0a0a), white text, Inter font from Google Fonts, and a yellow (#f5e642) accent color for the name. Include the CSS inside a <style> tag in the same file."
3

Copy the code Claude gives you. Paste it into your index.html file in VS Code. Save it (Cmd + S). Drag the file into Chrome — you should see your card.
4

Now make 3 manual changes yourself (don't ask Claude — try to find and change these yourself in the code): (a) Change the text color of the name, (b) Change the padding on the card, (c) Change the border-radius to make corners more or less rounded. Save after each change and reload Chrome.
5

Break something on purpose: Delete one closing tag (like the </div> at the end). Save and reload. See what happens. Then undo (Cmd + Z) and it'll recover. This teaches you what a broken HTML file looks like — it's usually not catastrophic, just weird-looking.

✦ Own your code

Can you explain every line?

Before moving on: pick any 5 lines from the code above and say out loud what each one does. Not the general idea — the specific line. If Claude ever gives you code like this, hold it to this standard before you use it. If you cannot explain a line, you cannot debug it.

Key takeaways

<div> is the most common HTML element — it's just a generic box that holds other things
CSS selectors are addresses: .class targets all elements with that class name
The box model (content → padding → border → margin) is how all spacing works in CSS
Flexbox is how modern layouts are built — start with display: flex on the parent
You will internalize these patterns — not by memorizing, but by writing them repeatedly until they feel obvious