# Teacher Diff Guide

This guide explains what changes across the Bare Bones sequence and how to teach each step.

## Files In The Sequence

1. [bareBones1.html](bareBones1.html): HTML structure only, no CSS.
2. [bareBones2.html](bareBones2.html): Same structure, adds foundational CSS for layout and spacing.
3. [bareBones3.html](bareBones3.html): Builds on Level 2 with visual hierarchy and interaction clarity.

Related stylesheets:

1. [styles/bareBones2.css](styles/bareBones2.css)
2. [styles/bareBones3.css](styles/bareBones3.css)

## Big Idea

Teach students to separate responsibilities:

1. HTML = meaning and structure.
2. CSS = presentation and readability.

## Level 1 To Level 2 Diff

Level 1 focus:

1. Semantic HTML structure.
2. Core elements: headings, paragraphs, lists, links, media, tables, forms.

Level 2 adds:

1. External stylesheet link in the head.
2. Centered readable width for header, main, and footer.
3. Consistent spacing system with margin and padding.
4. Basic nav layout via flexbox with wrapping.
5. Table spacing and border readability.
6. Form control sizing and spacing.
7. Responsive adjustments for small screens.
8. Skip-link styling pattern.

Suggested talking points:

1. Why line length matters for readability.
2. Why spacing consistency makes pages feel organized.
3. Why we style one element type at a time and test often.

Student checks:

1. Can they identify where each visual change comes from in [styles/bareBones2.css](styles/bareBones2.css)?
2. Can they modify spacing values intentionally?
3. Is their heading order still logical?

## Level 2 To Level 3 Diff

Level 3 keeps Level 2 layout but improves hierarchy:

1. Clear type scale for h1, h2, h3.
2. Better contrast and rhythm for long reading.
3. Link states (default and hover).
4. Keyboard focus-visible outlines for accessibility.
5. Emphasis patterns using note and callout blocks.
6. Cleaner heading and paragraph spacing.

Suggested talking points:

1. Structure and spacing are not enough; hierarchy guides attention.
2. Focus styles are not optional for keyboard users.
3. Design polish can be incremental and intentional.

Student checks:

1. Can they explain how Level 3 improves scanability?
2. Can they tune heading sizes without breaking hierarchy?
3. Can they demonstrate keyboard focus on interactive controls?

## Mini Lesson Flow (Recommended)

1. Open [bareBones1.html](bareBones1.html) and discuss pure HTML structure.
2. Open [bareBones2.html](bareBones2.html) and identify only layout/spacing changes.
3. Open [bareBones3.html](bareBones3.html) and identify hierarchy and interaction changes.
4. Ask students to change one value at a time, refresh, and explain the result.

## Quick Rubric (10 Points)

1. Semantic structure is correct (2 points).
2. Heading hierarchy is logical (2 points).
3. Layout and spacing are consistent (2 points).
4. Visual hierarchy is clear and readable (2 points).
5. Links/focus behavior supports usability (2 points).

## Common Mistakes To Watch For

1. Skipping heading levels (jumping from h1 to h3).
2. Using many ad hoc spacing values with no rhythm.
3. Making links hard to distinguish from plain text.
4. Removing focus outlines without replacement.
5. Mixing structure changes and style changes in one step.

## Extension Assignments

1. Create bareBones3b by changing only typography values.
2. Add a new section to Level 2, then style it using existing patterns only.
3. Build a Level 4 that introduces color theme variables while preserving readability.