# Student Progress Guide

Use this guide as you move from HTML basics to better-looking, more readable pages.

## Your 3 Levels

1. [bareBones1.html](bareBones1.html)
2. [bareBones2.html](bareBones2.html)
3. [bareBones3.html](bareBones3.html)

## Level 1: Structure First

File:

1. [bareBones1.html](bareBones1.html)

Goal:

1. Learn core HTML structure before styling.

What to practice:

1. Header, nav, main, section, footer.
2. Headings in correct order.
3. Paragraphs, lists, links, images, tables, and forms.
4. Clear and useful text content.

## Level 2: Layout and Spacing

Files:

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

Goal:

1. Make the page easier to read using simple CSS.

What changed from Level 1:

1. Content width is centered.
2. Sections have consistent padding and spacing.
3. Navigation is arranged in a row and wraps on small screens.
4. Tables and forms get basic readable spacing.

What to try:

1. Change section padding.
2. Change space between nav items.
3. Adjust table cell padding.

## Level 3: Visual Hierarchy

Files:

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

Goal:

1. Help readers know what matters most at a glance.

What changed from Level 2:

1. Heading sizes create a stronger hierarchy.
2. Better contrast improves readability.
3. Link and hover states are clearer.
4. Focus-visible outlines help keyboard users.
5. Note and callout styles highlight important info.

What to try:

1. Adjust h1, h2, h3 sizes.
2. Change paragraph spacing.
3. Tab through the page to check focus outlines.

## Student Self-Check

1. My heading order makes sense.
2. My page has meaningful section titles.
3. My spacing is consistent across sections.
4. My links are easy to identify.
5. I can navigate with keyboard and see focus clearly.
6. My page passes HTML and CSS validation.

## Validation Links

1. HTML: <https://validator.w3.org/nu/>
2. CSS: <https://jigsaw.w3.org/css-validator/>

## Challenge Tasks

1. Create a new section in Level 2 and style it using existing rules.
2. Clone Level 3 into a new file and tune only typography values.
3. Explain three differences between Levels 1, 2, and 3 in your own words.