Module 1 Implementation

Assemble the full semantic layout with landmarks, sections, asides, and footer.

Module 1 Implementation

Learning Objectives

By the end of this lesson, you will:

Combine header, navigation, main sections, asides, and footer into a cohesive layout.
Confirm semantic integrity using validation tooling.
Record outstanding content or tooling requirements.
Publish a clean commit representing Module 1 state.

Module 1 delivers a layout that mirrors how production teams ship HTML. You now have a collection of sections ready for styling, interaction, and richer content. Treat this as the semantic baseline before layering CSS and JS.

Assembly Checklist

<!DOCTYPE html>
<html lang="en">
   <head>
      ...
   </head>
   <body>
      <a class="skip-link" href="#main-content">Skip to main content</a>
      <header class="site-header" role="banner">
         <!-- Header from Lesson 3 -->
         ...
      </header>
      <main id="main-content" tabindex="-1">
         <!-- Hero, Highlights, Services from Lesson 5 -->
         ...
         <!-- Aside from Lesson 6 -->
         <aside aria-labelledby="sidebar-credentials">...</aside>
         <!-- Testimonials + Contact -->
         ...
      </main>
      <footer class="site-footer" role="contentinfo">
         <!-- Footer CTA + legal from Lesson 7 -->
         ...
      </footer>
      <script type="module" src="/scripts/menu.js"></script>
   </body>
</html>

Combine all snippets from lessons 3-7 into index.html.

# Module 1 Validation

## Automated

-  npx html-validate index.html → Pass (0 errors, 0 warnings)
-  Firefox Accessibility → Headings: h1 → h2 (5) → h3 (4)

## Manual

-  Keyboard traversal retains expected order (skip link → nav → hero CTA)
-  Mobile menu aria-expanded toggles correctly

## Follow-ups

-  Replace hero metric copy with latest data (Owner: Avery, Due: Module 2)
-  Style skip link and details summary focus rings (Owner: Avery, Due: Module 2)

notes/dom-snapshots/module-1.md

❌ Common Mistakes

1. Leaving TODO Comments Untracked

Problem: Comments with TODO but no tracking leads to forgotten work.

<!-- TODO: add new testimonial -->

Solution:

notes/retro-log.md → Add backlog item referencing the section.

2. Forgetting to Update Accessibility Docs

Problem: Structural changes without documentation break alignment.

// Bad: accessibility manifesto still mentions old nav structure.

Solution:

Update docs/accessibility.md with the latest structural context.

🔨 Implement in Portfolio Pulse

Task: Finalize Module 1 Layout

Ensure index.html includes the header, navigation, hero, highlights, services, testimonials, aside, contact, and footer from previous lessons.
Run npx html-validate index.html or the W3C validator to confirm zero errors.
Capture a DOM snapshot (or copy outline results) in notes/validation/module-1.md.
Commit with git commit -am "feat: deliver module 1 semantic layout".