Skip to content
← Back to HTML & CSS track
Reference

HTML & CSS Cheat Sheet

Semantic HTML, the box model, Flexbox, Grid, responsive design and modern CSS — the patterns you reach for on every page, on one sheet.

Document & structure
Page skeleton
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport"
        content="width=device-width, initial-scale=1">
  <title>Page</title>
</head>
<body></body>
</html>
Landmarks
<header> <nav> <main> <article>
<section> <aside> <footer>
Headings & text
<h1>..<h6>   one <h1> per page
<p> <strong> <em> <br> <hr>
Links, images, lists
Links
<a href="/learn">internal</a>
<a href="https://x.com"
   target="_blank" rel="noopener noreferrer">ext</a>
<a href="#section">in-page</a>
Image
<img src="chart.png" width="800" height="450"
     loading="lazy"
     alt="Revenue rising Jan to Mar">
Lists
<ul><li>item</li></ul>   unordered
<ol><li>step</li></ol>   ordered
Forms
Input + label
<label for="email">Email</label>
<input id="email" name="email"
       type="email" required>
Input types
type="text" email tel number date
       password search url checkbox radio
Select & textarea
<select name="state">
  <option value="WA">Washington</option>
</select>
<textarea name="note"></textarea>
CSS basics
Apply styles
<link rel="stylesheet" href="styles.css">

selector { property: value; }
Selectors
.class   #id   element   *
a:hover   li:nth-child(odd)
nav > a   (direct child)
::before { content: ""; }
Specificity
inline > #id > .class > element
/* avoid !important */
Box model & units
Box model
/* content → padding → border → margin */
* { box-sizing: border-box; }
margin: 8px 16px;   padding: 1rem;
Units
px   absolute
rem  root font size (safe default)
em   element font size
%  vw  vh   relative to parent / viewport
Colours
color: #1a1a1a;
background: rgb(0 0 0 / 0.1);
color: hsl(220 15% 20%);
Flexbox
Container
display: flex;
flex-direction: row | column;
justify-content: space-between;
align-items: center;
gap: 12px;
flex-wrap: wrap;
Items
flex: 1;          /* grow to fill */
flex-shrink: 0;
align-self: flex-end;
Centre a box
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
Grid
Columns
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 16px;
Responsive grid
grid-template-columns:
  repeat(auto-fill, minmax(220px, 1fr));
Named areas
grid-template-areas:
  "header header"
  "nav    main";
.nav { grid-area: nav; }
Responsive
Media query
@media (min-width: 768px) {
  .cols { grid-template-columns: 1fr 1fr; }
}
Mobile-first
/* base = phone */
.nav { display: none; }
@media (min-width: 768px) {
  .nav { display: flex; }
}
Modern CSS
Custom properties
:root { --accent: #0a8c3e; --space: 16px; }
.btn { color: var(--accent); }
Transition
.card { transition: transform 200ms ease; }
.card:hover { transform: translateY(-4px); }
New selectors
.field:has(input:invalid) label { color: red; }
:is(h1, h2, h3) { line-height: 1.2; }
:where(ul, ol) { margin: 0; }
Position & display
Position
position: relative | absolute | fixed | sticky;
top: 0; left: 0; z-index: 10;
Display
display: block | inline | inline-block
        | flex | grid | none;
Centre with transform
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);

Projects to build

The fastest way to make this stick. Build one, then put it in your portfolio.

Beginner

Personal landing page

A single semantic page about you: header, about, projects, contact form. No frameworks, mobile-first, one accent colour.

semantic HTMLbox modelresponsiveforms
Beginner

Pricing page

Three pricing cards of equal height that stack on phones and sit in a row on desktop, with a highlighted "popular" plan.

Flexboxmedia queriescustom properties
Intermediate

Dashboard layout

A holy-grail layout — header, sidebar, main, footer — built with CSS Grid named areas that reflows to one column on phones.

CSS Gridgrid-template-areasresponsive
Intermediate

Image gallery

A responsive gallery with auto-fitting columns, a hover zoom, a lightbox using :target or a checkbox, and lazy-loaded images.

Gridtransitionsresponsive images
Advanced

Component library page

A styled set of reusable components (buttons, cards, forms, alerts) with design tokens, dark mode via custom properties, and accessible focus states.

custom propertiesdark modeaccessibilityarchitecture