HTML and CSS for designers: the basics worth knowing

Step 1

HTML is content and meaning, not appearance

HTML describes a page's structure: what's a heading, a paragraph, a list, a button, a link. This determines how search engines and screen readers, used by blind people, read the page. So in a layout it matters not only how an element looks but also what it is.

• •headings have levels: one main h1 per page, then h2 for sections and h3 for subsections; font size has nothing to do with it;
• •a button performs an action on the page, a link (a) goes to another address; it's worth telling them apart in the layout;
• •images that carry meaning need a text description (alt); prepare it along with the layout.

💡 Look at your layout and label every block: "header", "nav", "main", "section", "footer". If you can't decide what a block is, the developer will be guessing too.

Step 2

The box model: everything on the page is a box

As web.dev puts it, everything CSS displays is a box. Each one has four layers: content, padding, border and margin. When you put a button's text 16 px from its edge in a layout, for a developer that's padding. When there's 24 px between two cards, that's margin or gap.

• •keep spacing in the layout to a short set of values (for example 4, 8, 16, 24, 32, 48), so it's easy to carry over to CSS;
• •boxes on the web grow with their content: a two-line heading makes a card taller, and the layout should handle that;
• •if text sticks to an edge, the layout most likely has no padding, only a position set by eye.

Step 3

Flexbox and grid: how rows and columns are built

CSS has two main layout tools. Flexbox lines elements up in a single row or column: a menu, a row of buttons, a card with an icon and text. Grid builds a two-dimensional grid of rows and columns: a gallery, a grid of cards, a page layout. Auto layout in Figma or Flex Layout in Penpot follow a similar logic: direction, the gap between elements, alignment, padding. Penpot's Flex Layout is built directly on the CSS Flexbox standard.

• •direction (row or column): side by side or stacked;
• •gap: an even space between elements, with no separate margins on each;
• •justify-content and align-items: how elements align along and across the direction;
• •flex-wrap: move elements to a new line when there's not enough room.

💡 If your layout uses auto layout with no free-floating elements, it's almost always easy to build. If everything is placed by hand, the developer has to guess the rules.

Step 4

Units and responsive design

Screens vary, so a web page isn't a fixed sheet. Sizes in CSS use different units: px for fixed pixels, % for a share of the parent box, rem relative to the base font size. MDN notes that the browser's default font size is usually 16 px, and that font sizes in px are bad for accessibility: in some browsers the user then can't enlarge the text. For different screen widths CSS uses media queries, which is where "breakpoints" come from.

• •show at least two versions in the layout: phone and desktop;
• •decide what happens to blocks in between: columns become rows, images shrink, the menu collapses;
• •check text contrast: for normal text, WCAG requires at least 4.5:1.

Step 5

Exercise: code one card

Theory sticks only after practice. Take one card from your layout (a photo, a heading, short text, a button) and code it. All you need is a text editor and a browser: create an index.html file, write the structure and add styles in a style tag. Then open the file in the browser, right-click an element and choose Inspect: DevTools shows each element's box model, and you can change styles live.

• •HTML first, without styles: check that the order and meaning are clear even without design;
• •then CSS: font, colors, padding, radius, flexbox for a button with an icon;
• •narrow the browser window: does the card break at phone width;
• •check the markup with the W3C validator: it shows errors in the HTML.

💡 Compare the result with your layout and write down everything that came out differently. That list is the best feedback to yourself: it shows which layout decisions had no rule behind them.