Enough HTML and CSS to audit the screen

You are reading, not authoring

You do not need to write CSS. You need to look at a generated screen and answer three questions: what is this element, why is it there, and why is it in the wrong place. That is an afternoon’s worth of vocabulary.

HTML is a tree of labelled boxes

<form action="/api/bookings" method="post">
  <label for="name">Your name</label>
  <input id="name" name="customerName" required />
  <button type="submit">Book appointment</button>
</form>

Five things to notice, all of which matter more than they look.

name="customerName" is what the server receives. If the server reads customer_name, the value arrives as nothing and the booking is saved with a blank name. This mismatch is a real and frequent AI bug, and it is invisible until you look at both sides.

required is a browser convenience. It is not validation. Anybody can remove it, or send the request without using your form at all. Server-side validation is a separate thing that must also exist.

<label for="name"> tied to id="name" is what lets a screen reader announce the field, and what makes tapping the label focus the input. Generated forms often use a styled <div> instead, which looks identical and is unusable with assistive technology.

<button type="submit"> rather than a clickable <div>. A real button works with the keyboard, is announced correctly, and submits on Enter. A div does none of that until somebody adds three lines of JavaScript to fake it.

The semantic elements (<form>, <nav>, <main>, <h1>) carry meaning. A page built entirely from <div> renders identically and is much harder for anybody not using a mouse and eyes.

CSS: the four things that explain most layout

The box model. Every element is content, then padding inside its border, then margin outside it. “Why is there a gap I did not ask for” is nearly always margin.

Flex and grid. display: flex arranges children in a row or column; display: grid in two dimensions. Almost every modern layout is one of these, and when something is stacked that should be side by side, this is the property to look at.

Position. static is the default flow. relative nudges from that spot. absolute positions against the nearest positioned ancestor. fixed sticks to the viewport. When something floats over the wrong thing, or a modal appears behind the page, position and z-index are the cause.

Responsive breakpoints. @media (min-width: 768px), or in Tailwind the md: prefix. class="flex-col md:flex-row" means stacked on a phone, side by side on a laptop. Reading that one pattern lets you check a layout for phones without opening one.

Tailwind, since you will meet it

Generated interfaces are usually Tailwind, which puts the styling in the class attribute:

<div class="flex flex-col gap-4 p-6 md:flex-row md:items-center">

Flex container, stacked vertically, 1rem between children, 1.5rem of padding, becoming a centred row at 768 pixels and above. It looks noisy and it has one real advantage for this course: the styling is next to the element, so you can read a component’s appearance without opening a second file and without wondering which rule wins.

The five-minute screen audit

For any screen a model just built:

1. Narrow the browser window to 360 pixels. Does anything scroll sideways, overlap, or fall off?
2. Press Tab repeatedly. Does focus move through every control in a sensible order, and can you see where it is?
3. Submit the form with the keyboard only. Enter should work.
4. Check that every input has a visible label, not just placeholder text. Placeholders vanish when typing starts and are invisible to some assistive technology.
5. Zoom the browser to 200 percent. Text should reflow, not get cut off.

Five minutes, no tools installed, and it catches the majority of what makes a generated interface unusable for somebody who is not you on your own laptop.

Free ways to go further

MDN Web Docs is the reference professionals actually use and it is free. The browser’s own element inspector, covered two lessons from now, shows you which CSS rule is producing any given pixel. Between those two you can answer nearly every layout question without asking anybody.