Resource

Tips and tutorials

References and practice games to keep open while you build.

References

W3Schools HTML reference
Every HTML element, with examples you can try.
W3Schools CSS reference
Every CSS property and its values.
MDN: Learn web development
Clear, in-depth tutorials from the makers of Firefox.

Practice

Flexbox Froggy
A game for learning flexbox.
Grid Garden
A game for learning CSS grid.
Web Design Playground
Short HTML and CSS lessons you can edit live.

Check your work

W3C Markup Validator
Upload index.html. Fix errors from the top down.
WebAIM Contrast Checker
Test your text and background colors.
Coolors
Build and test a color palette.

Editing CSS rules

CSS is written as rules. A rule has a selector that chooses what to style, followed by curly braces containing one or more declarations. Each declaration is a property and a value, separated by a colon:

CSS rule pattern

selector {
  property: value;
}

Part	Example	What it means
Selector	`.card`	Choose the element or elements to style. A period before a name selects every HTML element with that class, such as `class="card"`.
Property	`background-color`	Name what you want to change. Property names use a hyphen when the name has multiple words.
Colon	`:`	Separates the property from its value.
Value	`white`	Set the property to a specific choice. A value might be a color, a size with a unit, or a keyword.
Semicolon	`;`	Ends the declaration. Include one after each declaration, including the last one.

For example, background-color: white; is one complete declaration. The word before the colon is the property; the value after it is what you can change. Keep the property name and punctuation in place.

Here is a general example. It is not the card style for this project (you write that in step 2.4), and it uses plain values instead of design tokens to keep it simple.

Example rule

.card {
  background-color: white;
  color: #3b2a1e;
  padding: 1rem;
  margin: 1rem 0;
  border: 2px solid #b4501a;
  border-radius: 16px;
}

Declaration	What it changes	How to adjust it
`background-color`	The fill color behind the content.	Change the color value, such as `white` or a hex code like `#fff8ef`.
`color`	The text color.	Choose a contrasting color so the text stays easy to read.
`font-size`	The size of the text.	Change the number and unit, for example `1rem` or `1.25rem`.
`padding`	Space inside the element, between its content and its border.	Increase it to give text more room inside a card; reduce it to bring the content closer to the edge.
`margin`	Space outside the element, separating it from other elements.	Increase it to move neighboring elements farther away; reduce it to bring them closer.
`border`	A line around the element, outside its padding.	Set its width, style and color, such as `2px solid #b4501a`. Use `border: none` to remove it.
`border-radius`	How rounded the corners are.	Use `0` for square corners; increase the value, such as `16px`, for rounder corners.

How to edit or add a declaration

Choose what to style. Find the matching rule in styles.css. The selector must match the HTML: for example, .card styles an element with class="card". If there is no matching rule, create one with the selector and braces.
Change an existing style. Find the property, then replace only its value after the colon. For example, change border-radius: 16px; to border-radius: 4px; for less-rounded corners.
Add another style. Type a new property: value; on its own line inside the selector’s braces. For example, add box-shadow: 0 4px 12px #0003; to give a card a soft shadow. Do not put the new declaration after the closing brace.
Save and check. Save styles.css and look at the page. If nothing changes, check the selector, spelling, colon, semicolon, braces and value.

Not sure what to type? Use the W3Schools CSS Reference to browse properties or search for a goal such as “rounded corners” or “text size.” Open a property page to see what it controls, the values it accepts, and examples. The W3Schools CSS Syntax page reviews the selector, braces, property, value and punctuation. Copy a valid example, paste it inside the matching rule, then adjust its value and test it. A property only works with valid values—for example, border-radius takes a length such as 16px, while background-color takes a color.

Padding and borders make an element larger from the inside out; margins add space around it. After editing, save styles.css and check the page in your browser.