</>Web cheatsheet

<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><title>My page</title></head>
<body>...</body>

The skeleton of every page. Only what is in body shows up.

<h1>Title</h1> <h2>Section</h2> <p>Text</p>

Headings go from h1 (one per page) down to h6. Paragraphs in p.

<header> <nav> <main> <section> <footer>

Semantic tags say what a part of the page is, which helps screen readers and search.

<ul><li>One</li><li>Two</li></ul>

A bulleted list. Use ol for a numbered one.

<a href="/shop/">Shop</a>
<img src="cat.jpg" alt="A cat on a skateboard">

Links need href; images need src and alt text describing them.

<form id="signup">
  <label for="user">Username</label>
  <input id="user" name="user" required>
</form>

A label's for matches its input's id, so clicking the label focuses the box.

<input type="email"> <input type="number" min="1" max="10">

The type picks the keyboard on phones and adds built-in checks.

<select id="team"><option>Red</option><option>Blue</option></select>

A dropdown. Read the choice with select.value.

<button type="submit">Join</button>

A submit button sends the form, which reloads the page unless you stop it.

p { }  .card { }  #score { }

Element name, class (dot) and id (hash).

nav a { }  .card > h2 { }

A space means anywhere inside; > means direct child only.

button:hover { }  input:focus { }  li:nth-child(2) { }

Pseudo-classes pick elements in a state or position.

.btn.primary { }  h1, h2 { }

No space means both classes on one element; a comma styles several selectors.

padding: 16px;  border: 2px solid #333;  margin: 24px;

Space inside the border, the border itself, then space outside it.

margin: 10px 20px;

Two values: top and bottom first, then left and right.

* { box-sizing: border-box; }

Makes width include padding and border. Put it at the top of every stylesheet.

margin: 0 auto;  max-width: 640px;

Centres a block and stops it getting too wide on big screens.

.row { display: flex; gap: 12px; }

Children sit in a row with space between them.

justify-content: space-between;  align-items: center;

Spread items along the row; line them up across it.

flex-direction: column;  flex-wrap: wrap;

Stack items instead, or let them wrap onto the next line.

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }

Three equal columns; children fill them in order.

@media (max-width: 600px) { .grid { grid-template-columns: 1fr; } }

On narrow screens, switch to one column.

const name = "Zara";
let score = 0;

const for names that never change, let for ones that do.

typeof 42; typeof "42"; typeof true;

Gives "number", "string" and "boolean".

"5" + 3; Number("5") + 3;

The first gives "53" (glued), the second 8.

`Level ${level}: ${score} pts`

A template literal puts values into text.

score === 100;  score !== 0;

Always compare with three equals signs.

const songs = ["Neon Rain", "Late Bus"];
songs[0]; songs.length; songs.push("Paper Planes");

Index from 0, count, add to the end.

for (const s of songs) { console.log(s); }

Loop over every value.

songs.includes("Late Bus"); songs.indexOf("Late Bus");

Is it there? Where is it? (-1 means not found.)

const loud = songs.map((s) => s.toUpperCase());
const short = songs.filter((s) => s.length < 9);

map makes a new array of changed items; filter keeps the ones that pass a test.

const total = scores.reduce((sum, n) => sum + n, 0);

Boil an array down to one value.

players.sort((a, b) => b.points - a.points);

Sort by a number, highest first. sort changes the array.