HTML and CSS
Every screen you've ever designed ends up as HTML and CSS. Your page is already live. Now you make it yours by hand, then make it work on a phone. About 4 hours.
Do this first: Ship your first build (03)
In design terms
HTML is the structure: a heading, a paragraph, a button. CSS is how it looks: size, color, space. Your Figma frame is the picture. These two files are the materials. You already know the layout. The new part is the spelling.
Where I see designers get stuck
They try to memorize every property. You need type, color, spacing, and one media query for the phone. A class in the stylesheet does nothing when the markup spells it differently. A typo like this is enough:
The class and the CSS have to match
<div class="her0">Words you'll hear
- element
- One piece of the page: a heading, a paragraph, a link. It is written as a tag, like <h1>.
- class
- A name you give an element so the CSS can find it. Like a style name in Figma.
- padding and margin
- Padding is space inside the box. Margin is space outside it. Same idea as auto-layout gap, split in two.
- flexbox
- A way to line things up in a row or a column. You already do this with auto layout.
- media query
- A rule that applies only when the window is a certain width. This is the phone layout.
Shortcuts
Cmd + S | Save. On Windows, Ctrl + S. The browser will not show unsaved work. |
|---|---|
Cmd + R | Reload the browser. On Windows, Ctrl + R. |
Cmd + Option + I | Open DevTools and inspect a box. On Windows, Ctrl + Shift + I. |
Cmd + Z | Undo in the editor. On Windows, Ctrl + Z. |
Steps
Open the page two ways
Double-click index.html so it opens in the browser. Also open the folder in your editor. You want the file and the result on screen together.
Change the words
In the editor, find the heading and replace the text. Save, then reload the browser. If you are starting from an empty file, type an exclamation mark and press Tab in VS Code to get a starter page, then add a heading inside the body.
<h1>Hello</h1>Point at a stylesheet
Make a file named styles.css next to index.html. In the head of the HTML, link it. The starter page from the exclamation mark already includes the viewport line that makes the phone width honest.
<link rel="stylesheet" href="styles.css">Keep this in the head
<meta name="viewport" content="width=device-width, initial-scale=1">Style the heading
In styles.css, change one thing you can see. Save and reload.
h1 { font-size: 48px; color: #111; }Look under the hood
Right-click the heading and choose Inspect. The box diagram is the same idea as spacing in Figma: content, padding, border, margin. Change a number in the panel to test it, then write the number you like into the CSS file. The panel forgets a change when you reload. The file does not.
Make it work on a phone
Add a media query. Drag the browser narrow, past 600 pixels, and the heading should shrink. Then push.
@media (max-width: 600px) { h1 { font-size: 32px; } }Put the change on the live link
git add . git commit -m "type and phone styles" git push
Where Claude Code fits
Ask it to explain a line before you accept it. What does this margin do? Then change one value yourself, so you know you can edit the page without the tool. The live link updates after the push, on the same delay as the last page.
Watch and read
- Your first websiteMDN's short path through HTML, CSS, and a file in the browser.
- The viewport meta tagWhy the phone width has to be set, not assumed.
- Using media queriesThe phone rule, with more examples when you want them.