Common Headers/Footers Instructions
Professional sites don't copy the same header and footer into every page — they reuse one copy. Update once, apply everywhere; every page stays identical to the pixel. That's this assignment.
The Setup
- Get Paul Browne's HTMLInclude script (HTMLInclude.min.js from GitHub) and put it in your scripts folder (e.g. scripts/include.min.js). You may build another mechanism instead — AI help is fine — as long as your pages still validate fully with Accumulus and it follows the same shape described here (or a comment explains why it shouldn't).
- Create a components folder containing header.html and footer.html. Cut your header and footer into them — including the header/footer elements themselves.
- In each page, replace the entire header/footer with the include element (the div from the HTMLInclude instructions), and add the script element at the bottom of the page.
What We Check
- components/header.html and components/footer.html exist and contain the header/footer elements.
- Your page source contains only the include — no header or footer tags. (View source: if you can see a header element in the page file, it's in the wrong place.)
- Some retrieval code is present and the includes actually load.
- Before you've done this assignment, pages without includes just get an informational note — once you convert, the checks turn strict. The component files themselves don't carry the Vicunadator (they're fragments, not pages); they're validated through every page that includes them.
- Every page still passes Accumulus and the Vicunadator after the conversion.
Submitting
Submit your course site URL — the includes show there, and we may check your GitHub repo to confirm the components folder. Then peer review at least two classmates who don't already have two reviews.