Hobby Site Instructions (Midterm)
Build a standalone single-page site for a hobby, interest, or passion of yours. No late submissions, no redos — and peer reviews are a third of your score. You may (and should) use AI.
Structure
- Lives at itis3135/hobby/ with its own images folder. One index.html — no includes; header, main, and footer are written directly in the file (there's no repeated code to share, so includes would only add cost).
- The h1 in the header is the name of the hobby.
- Sections act as the pages — Who, What, When, Where, How, Why (in your own words: About, Home, Best Times, Locations, …) plus AI Prompts. If you only used AI for images, a code comment saying "I only used AI for images" replaces that section.
- Nav in the header switches sections: CSS/JS shows only the selected section, like a single-page app. The What/Home section is visible by default.
- Use a unique divider symbol (an emoji or special character, different from your other pages) — and when a section is shown, JS updates the title so everything after the divider matches that section's h2.
- Create a favicon (favicon.io or similar).
- Add the site to your course site's secondary menu (the second nav) as "Hobby" — not the primary menu.
Each Section
- Has an h2 (the section/page name).
- Contains at least 3 items — each paragraph, figure, table, form, or list counts as one; any mix works (2 paragraphs + an image is the classic). Headings don't count.
- Includes at least one figure: image + figcaption + an italicized note that explains the AI prompt used, or states the source (your own photo, open source). AI Prompts section exempt.
- Images are your own, AI-generated, or open source — one consistent style throughout (all photorealistic or all cartoon), resized so the page loads fast.
Styling
- Embedded stylesheet — it's a single page.
- CRAP principles; no Times New Roman, no default blue links, no plain white background, no plain black text.
- Color scheme must be different from your main site.
- Footer links to your design firm. Validator badges are welcome but not required — Accumulus and the Vicunadator on the page cover validation, and everything must pass clean (HTML, CSS, accessibility).
Submitting
Submit your course URL — the Hobby link in your secondary menu gets us there. Then do your peer reviews: apply these instructions to at least two classmates who don't already have two reviews.