Module 1 · Semantic Layout & Landmarks

Module 1 upgrades the baseline document into a portfolio that feels curated and navigable. You will refine header composition, landmark usage, and sectional rhythms so designers, screen readers, and search engines all perceive the same story.

What You Will Deliver

• A header with branding, navigation, and skip links that meet accessibility standards.
• A hero, highlights, services, testimonials, and contact sections using semantic HTML5 landmarks.
• Supporting asides that enrich the narrative without overwhelming the main flow.

Lesson Map

1. Semantic Layout Overview — clarify module goals and review landmark patterns.
2. Landmark Planning — map each section to structural primitives (header, nav, main, aside, footer).
3. Header Strategy — design a versatile site header with logo, nav, and call-to-action.
4. Navigation Accessibility — refine keyboard support, skip links, and ARIA labelling.
5. Main Content Architecture — craft hero, highlights, services, and testimonials with sectioning elements.
6. Supporting Asides — use <aside> for credentials, stats, and quick facts.
7. Footer Calls to Action — close with contact options, secondary navigation, and legal info.
8. Implementation — assemble the full semantic layout.
9. Validation — audit structure, headings, and interactive elements.

Keep your project brief and validation logs nearby; you will reference them frequently to ensure markup mirrors the story you promised in Module 0.