NA<>Y BUILDS

Cheat sheet

Help

Everything you need for your hobby page, in one place.

HTML tags

TagWhat it does
<!DOCTYPE html>The very first line. Tells the browser this is a modern web page.
<html> … </html>Wraps the whole page.
<head> … </head>Information about the page. Holds title and style. Nothing here shows on the page.
<title> … </title>The text on the browser tab. Goes inside head.
<body> … </body>Everything you can see on the page.
<h1> … </h1> to <h6>Headings. One h1 per page, then h2 for sections, h3 under those, and so on.
<p> … </p>A paragraph of text.
<ul> <li> … </li> </ul>A bulleted list, for when order doesn’t matter.
<ol> <li> … </li> </ol>A numbered list, for when order matters.
<a href="https://…"> … </a>A link. The words in between say where it goes.
<img src="…" alt="…">A picture. alt describes it for people who can’t see it. No closing tag.
<style> … </style>CSS rules for the page. Goes inside head.

The page skeleton

<!DOCTYPE html>
<html>
  <head>
    <title>Tab text goes here</title>
  </head>
  <body>
    Everything you can see goes here
  </body>
</html>

CSS

A CSS rule picks some elements, then changes how they look:

selector { property: value; }

Put your rules inside <style> in the head. The selector can be any tag name: body, h1, p, li, a.

PropertyChangesExample
colorText colourh1 { color: navy; }
background-colorBackground colourbody { background-color: lightyellow; }
font-familyThe fontp { font-family: Arial, sans-serif; }
font-sizeHow big the text isp { font-size: 18px; }
text-alignLeft, right or centerh1 { text-align: center; }

Colours can be names like navy, tomato or lightyellow, or codes like #F2B533.

Common mistakes

Writing colour or centre
CSS uses American spelling: color, background-color, center.
Mixing up title and h1
The title shows on the tab. The h1 shows on the page.
Putting headings inside head
head holds information about the page. Put visible content in body.
An li on its own
Every li needs to sit inside a ul or ol.
A link without https://
Web addresses need https:// at the start.
Link text that says “click here”
Say where the link goes, e.g. “Visit the FA website”.
alt="image" or no alt
Describe the picture for someone who can’t see it.
More than one h1
A page has one h1, like a book has one title.
Jumping from h2 to h4
Go down one level at a time.
Forgetting ; between CSS lines
Each property: value; pair ends with a semicolon.
Writing </img>
img has no closing tag.

Using the keyboard

  • In the code editor, Tab indents your code.
  • Press Esc to leave the editor and move to Check my page.
  • Ctrl + Z undoes your last change.

Your work is saved in this browser only. Nothing you type is sent anywhere.