TOOLS

THE HARDWARE STORE

Every tag, every property, all paint chips, one shelf

web.selah-hcs.orgweb design for kids // html5 + css3one day academy

THE HARDWARE STORE // Every tag and property this course uses, on one shelf, no clicking through anything. Print it, keep it in your binder, live your life.

HTML AISLE

Element	What it builds
`<h1>...<h6>`	Headings, biggest to smallest; use in order like an outline
`<p>`	A paragraph
`<strong>`	Important text (usually bold)
`<em>`	Emphasized text (usually italic)
`<a href="...">`	A link; href says where the door goes
`<img src="..." alt="...">`	A picture; alt is what screen readers say
`<ul> <li>`	Bullet list and its items
`<ol> <li>`	Numbered list and its items
`<table> <tr> <th> <td>`	A data table: rows, header cells, data cells
`<nav>`	Wraps your navigation links
`<br>`	A line break (use rarely; paragraphs are usually right)
`<hr>`	A horizontal rule line
`<div>`	A plain box for grouping things you will style
`<!-- ... -->`	A comment; the browser ignores it, humans read it

CSS AISLE

Property	What it paints
`color`	Text color: names, #hex, or rgb()
`background-color`	Paints the element's box
`font-family`	Typeface list with fallbacks, generic family last
`font-size`	How big; 16px is a good body size
`text-align`	left, center, right, justify
`line-height`	Air between lines; about 1.5 reads well
`letter-spacing / word-spacing`	Tiny dials for space between letters and words
`text-decoration`	Underlines and their removal
`list-style-type`	Bullet or number style; none removes them
`border / border-collapse`	Lines around boxes; collapse merges table lines
`padding`	Space inside the border
`margin`	Space outside the border
`background-image / repeat / size`	Wallpaper for a box, tamed

PAINT CHIPS

Tap a chip to copy its hex code

The street palette, plus black and white. Hex is two digits each of red, green, blue.

BACK ROOM // BONUS SHELVES

CSS starter templates (Mrs. Gaiser's bonus lesson)

Free, honest starter stylesheets exist all over the web, and her bonus lesson walks through adapting one. Rule of the shop: never use a template you could not have written yourself by the end of this course; adapt, understand, and credit.

Adding video (bonus lesson)

Linking a video is week 16 skills: an a element pointing at the video's address. Embedding one drops the site's own player onto your page with a copied embed code; paste it, then style around it like any other box. Autoplay is banned on Main Street; visitors press play.