Phase 3 — Allowed

This file is the gauge for everything in phase3/. Do not use anything outside this list.

HTML tags allowed

Document structure

Content / controls

Only these property names may appear in styles.css:

JavaScript
Any HTML tag not listed above
Any CSS property not listed above (including align-items, gap, flex-direction, flex-wrap, text-align helpers beyond the property itself is fine — but not align-items / gap)
Inline style attributes

Still no max-width, overflow, or box-sizing. Keep children fitting parents:

child width + horizontal padding + horizontal border ≤ parent content width

On html: lang
On link: rel, href
On a: href
On elements: class, id when used for labelling or fragment links
On landmarks and sections: aria-label, aria-labelledby
On img: src, alt, width, height
On input: type, name, id, placeholder, value, min, checked, readonly
On button: type

#	Rule	How we use it in Phase 3
1	Vertical margins can collapse	Prefer padding or single-side margins when stacking
2	Text contrast	≥ 4.5:1 normal, ≥ 3:1 large
3	Center a block with auto margins	Flex containers are block-level — center `.page` (or any flex box) with `width` + `margin: 0 auto`; use `justify-content` for its children
4	`text-align: center`	Center inline/inline-block content inside a parent
5	Know block vs inline	Still matters alongside flex items
6	`display` can change default behavior	Now includes `display: flex`
7	Use Flexbox for flexible layouts	`display: flex` on nav, card rows, button rows
8	`justify-content` controls the main axis	e.g. `center`, `space-between`
11	Lean on inheritance	Set shared text styles on a parent when possible
12	Keep CSS DRY	Prefer shared classes/selectors over duplicated declarations
13	Relative paths	`href="./styles.css"` and in-folder page links
15–19	`alt` text rules	Same as earlier phases
32	Always set `lang` on `<html>`	Every page uses `<html lang="en">`
72–80	Semantic HTML	Preserve meaningful landmarks, content relationships, and heading hierarchy

07-cards.html is a card-pattern lab: media, split, stat, pricing, list/form, banner, and justify-content demos — all within this allow list.