WEBSITE BUILDER TOOLBOX

HTML + CSS quick reference - find the tool you need, then keep building.

SIDE 1 · HTML + CSS 1 + CSS 2

Best rule: do not memorize the page. Remember roughly what tools exist, then look up the exact spelling when you need one.

HTML what goes on the page

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
  <style> /* CSS goes here */ </style>
</head>
<body>
  <h1>Hello!</h1>
</body>
</html>

<h1>...<h6>Headings.

<p>Normal paragraph text.

<div>General-purpose box/group.

<img src="...">Show an image.

<a href="...">Link to another page/place.

<button>Clickable button.

<input>Box the visitor can type in.

<br>Start a new line.

Useful named boxes: header, nav, main, section, footer. Think of them as div-like boxes whose names explain their job.

Targets: class="card" can be reused on many elements. id="menu" gives one element a unique name.

CSS 2 spacing + comfortable page layout

paddingSpace inside the box.

marginSpace outside the box.

margin: autoCenter a box that has a width.

width: 80%Use part of available width.

line-heightSpace between lines of text.

text-decorationnone removes link underline.

padding: 12px 20px;   /* top/bottom | left/right */
margin: 20px auto;    /* space + center the box */

Memory: padding = inside. margin = outside. text-align: center centers content inside; margin: auto centers the box itself.

CSS 1 make it look good

colorText colour

background-colorBackground

font-sizeText size

font-familyFont

font-weightnormal, bold

text-alignleft, center, right

widthHow wide

heightHow tall

border2px solid navy

border-radiusRounded corners

backgroundColour/image/gradient

cursorpointer for clickable things

CSS pattern: selector → braces → property: value;

h1 { color: navy; }
.card { background-color: white; }
#menu { border: 2px solid black; }

h1 { }Every h1

.card { }Every class="card"

#menu { }The one id="menu"

nav a { }Links inside nav

Common HTML patterns copy, then change

Link

<a href="about.html">About</a>

Image

<img src="images/logo.png" alt="Logo">

Class

<div class="card">...</div>

ID + button

<button onclick="showMenu()">Menu</button>

Website sizing quick choices

Value	Use it when...
300px	You want a fixed, exact size.
80%	You want size based on the parent.
100%	You want it to fill available width.
100vh	You want the full browser height.

HTML attributes extra information written inside the opening tag

href="..."Where a link goes.

src="..."Where an image/file comes from.

alt="..."Short description of an image.

class="..."Reusable name for CSS/JS.

id="..."Unique name for one element.

placeholder="..."Hint text inside an input.

WEBSITE POWER TOOLS

Flexbox, useful CSS layout/polish, and simple JavaScript interaction.

SIDE 2 · CSS 3 + CSS 4 + JS

CSS 3 · FLEXBOX your main tool for rows, navbars, cards and centering

.cards {
  display: flex;          gap: 16px;
  flex-direction: row;    justify-content: center;
  align-items: center;    flex-wrap: wrap;
}

Main direction = the direction items travel. justify-content works along this direction.

Other direction = across the main direction. align-items works across it.

display: flex

display: flex;

Turn the parent into a flex container. Its direct children become flex items.

flex-direction

row
column
row-reverse
column-reverse

Choose side-by-side or top-to-bottom.

justify-content

flex-start · center · flex-end
space-between · space-around · space-evenly

Move/spread items along the main direction.

align-items

stretch · flex-start
center · flex-end

Line items up across the other direction.

flex-wrap

nowrap
wrap

wrap moves items onto another row/column when needed.

gap

gap: 16px;
gap: 10px 20px;

Clean space between flex items.

Useful child tools

flex: 1;
align-self: center;

flex: 1 lets siblings share available space.

Fast recipes: navbar → display:flex; justify-content:space-between; align-items:center; · card row → display:flex; gap:20px; flex-wrap:wrap; · perfect centering → display:flex; justify-content:center; align-items:center;

CSS 4 useful layout + polish for real websites

display: noneHide something completely.

overflow: hiddenClip anything sticking outside a box.

object-fit: coverFill an image window without stretching.

box-shadowAdd depth behind cards/buttons.

opacity0 invisible → 1 solid.

transitionSmooth a hover/style change.

:hoverStyle an element while mouse is over it.

linear-gradient(...)Smooth colour background.

Images: same window every time

.card img {
  width: 100%;
  height: 150px;
  object-fit: cover;
}

Simple hover

.button { transition: .2s; }
.button:hover {
  transform: translateY(-2px);
}

Position use sparingly on normal websites

static	Normal/default page flow.
relative	Stays in normal flow. `top/left` can shift it from its normal spot. It also anchors absolute children.
absolute	Leaves normal flow. Place with `top/right/bottom/left`. Great for a badge or icon inside a card.
fixed	Stays attached to the browser window while scrolling.
sticky	Scrolls normally, then sticks at a chosen edge.

.card { position: relative; }
.badge { position: absolute; top: 8px; right: 8px; }

Website rule: normal flow + Flexbox first. Use absolute for overlays, badges and special placement, not for building the whole page.

JavaScript make the website react

onclick	Run code when something is clicked.
function	Name a set of instructions.
getElementById	Find an HTML element by its `id`.
.innerText	Read/change text.
.style	Change CSS from JavaScript.
.value	Read what someone typed into an input.
classList.toggle	Add/remove a CSS class, useful for menus and show/hide.

<h2 id="title">Hello</h2>
<button onclick="changeTitle()">Change</button>

<script>
let title = document.getElementById("title");

function changeTitle() {
  title.innerText = "Welcome!";
  title.style.color = "royalblue";
}
</script>

Think: HTML = the thing. CSS = how it looks. JavaScript = what happens.

2 website JS patterns worth remembering

Read an input

let name = document.getElementById("name").value;

Show / hide with a class

.hidden { display: none; }

menu.classList.toggle("hidden");

WEBSITE BUILDER TOOLBOX

HTML what goes on the page

CSS 2 spacing + comfortable page layout

CSS 1 make it look good

Common HTML patterns copy, then change

Website sizing quick choices

HTML attributes extra information written inside the opening tag

WEBSITE POWER TOOLS

CSS 3 · FLEXBOX your main tool for rows, navbars, cards and centering

CSS 4 useful layout + polish for real websites

Position use sparingly on normal websites

JavaScript make the website react

2 website JS patterns worth remembering

Try Flexbox