html_cheatsheet.txt

Cheat Sheet

The tags and properties we use most in class. For anything else, check MDN.

Page structure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Page Title</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- Visible content goes here -->
</body>
</html>

Common tags

Tag	What it does
`<h1>` to `<h6>`	Headings. Use one `<h1>` per page, then go down in order.
`<p>`	A paragraph of text
`<a href="page.html">`	A link. Add `target="_blank"` to open in a new tab.
`<img src="pic.png" alt="...">`	An image. No closing tag. Always add `alt`.
`<ul>` / `<ol>` + `<li>`	Bulleted / numbered list, with a list item inside
`<strong>` / `<em>`	Important (bold) / emphasised (italic) text
`<div>`	A generic box for grouping things to style
`<span>`	A generic inline wrapper for styling part of a line
`<br>`	A line break inside text (not for spacing!)
`<!-- comment -->`	A note in your code that doesn't show on the page

Semantic layout tags

Tag	Use it for
`<header>`	The top of the page: logo, site name, nav
`<nav>`	Your main menu links
`<main>`	The main content. Only one per page.
`<section>`	A themed group of content with its own heading
`<article>`	A self-contained item, like a blog post or project
`<aside>`	Side content, like a sidebar
`<footer>`	The bottom of the page: copyright, contact links

Links to other files

<a href="about.html">          <!-- same folder -->
<a href="projects/game.html">  <!-- inside a folder -->
<a href="../index.html">       <!-- up one folder -->
<a href="https://example.com"> <!-- another website -->

css_cheatsheet.txt

How a CSS rule works

selector {
    property: value;
}

h1 {
    color: purple;
    font-size: 32px;
}

Selectors

Selector	Selects	HTML it matches
`p`	Every `<p>`	`<p>`
`.card`	Everything with that class	`<div class="card">`
`#logo`	The one element with that ID	`<img id="logo">`
`nav a`	Links inside a `<nav>`	`<nav><a>`
`h1, h2`	Both `<h1>` and `<h2>`
`a:hover`	A link while the mouse is over it

Common properties

Property	Example	What it does
`color`	`color: #860c5d;`	Text colour
`background-color`	`background-color: pink;`	Background colour
`font-family`	`font-family: Verdana, sans-serif;`	Font, with backups
`font-size`	`font-size: 1.2rem;`	Text size
`text-align`	`text-align: center;`	Left / centre / right align text
`margin`	`margin: 20px;`	Space outside the border
`padding`	`padding: 10px;`	Space inside the border
`border`	`border: 2px solid black;`	Width, style, colour
`border-radius`	`border-radius: 8px;`	Rounded corners
`width` / `max-width`	`max-width: 900px;`	How wide something can be
`display`	`display: flex;`	How an element is laid out

The box model

┌─────────── margin ───────────┐
│  ┌──────── border ────────┐  │
│  │  ┌───── padding ────┐  │  │
│  │  │     content      │  │  │
│  │  └──────────────────┘  │  │
│  └────────────────────────┘  │
└──────────────────────────────┘

Flexbox: items in a row

.container {
    display: flex;
    gap: 16px;                /* space between items */
    justify-content: center;  /* along the row */
    align-items: center;      /* up and down */
    flex-wrap: wrap;          /* wrap onto new lines */
}

Media query: styles for phones

@media (max-width: 600px) {
    .container {
        flex-direction: column;  /* stack instead of row */
    }
}

Colour formats

color: red;                  /* name */
color: #ff0000;              /* hex */
color: rgb(255, 0, 0);       /* red, green, blue */
color: rgba(255, 0, 0, 0.5); /* with transparency */