Resources · Beginner · cheatsheet

HTML, CSS, JS — enough to ship a UI

A pocket cheatsheet for a page people can actually use. Not a language tour.

Build a stall sign, not a textbook. Copy these, then change the words.

HTML you will actually type

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Sunday rota — St. Mary’s</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <header>
      <h1>Sunday rota</h1>
      <p>Last checked: <time datetime="2026-09-06">6 Sep 2026</time></p>
    </header>
    <main>
      <ul>
        <li>Door — Ama</li>
        <li>Store — Kojo</li>
      </ul>
      <p><a href="https://wa.me/233000000000">WhatsApp the organiser</a></p>
    </main>
  </body>
</html>

One h1. viewport is not optional on a phone.
lang should match the page. lang="en" is fine; do not fake lang="tw" if the words are English.
Prefer lists and headings over a pile of <div>.

CSS that survives daylight

body {
  margin: 0;
  font-family: system-ui, sans-serif;
  line-height: 1.5;
  padding: 1.25rem;
  max-width: 40rem;
  color: #14171a;
  background: #f5f1e8;
}

a { color: #087f8c; }
button, a { padding: 0.6rem 0.2rem; }

System fonts. High contrast. One column. Finger-sized taps. Dark-on-pale or pale-on-near-black — not grey-on-grey.

JavaScript only when the page must change

<button type="button" id="stamp">Mark as checked today</button>
<script>
  document.querySelector("#stamp").addEventListener("click", () => {
    document.querySelector("time").textContent =
      new Date().toLocaleDateString();
  });
</script>

Put the script at the bottom of body. If the text can live in HTML, leave it there.

Want	Use
Title	`h1`
A price or warning	`strong`
A list of people or goods	`ul` / `li`
A date	`time`
A tap that changes the page	`button` + a few lines of JS
A login	Not this week

Full lessons live in Learn to Code. This page is the pocket card.