📤 Submission

Submit to Canvas:

• Live site URL (deployed via GitHub Pages)
• GitHub repository link
• Screenshot of desktop view
• Screenshot of mobile view

📚 Context

This is the build phase for your Interactive Field Guide.
You've already designed the desktop and mobile layouts in Figma (Project 3.1).
Now you'll translate that design into functional HTML and CSS.

Foundation Tutorial:
Work through this Flexbox tutorial first: https://sicxz.github.io/flexbox-tutorial/
It covers the exact layout patterns you'll need. Reference it whenever you're stuck.

💡 Objective

Build a responsive, single-page documentation site that matches your Figma design.
This project emphasizes semantic HTML structure and Flexbox-based layouts.

🧱 Code Requirements

1️⃣ HTML Structure

Use semantic HTML throughout. Every design element from your mockup should map to proper tags:

Required sections:

• <nav> — Sidebar navigation (desktop) / Top navigation (mobile)
• <header> — Hero section with title, subtitle, and visual treatment
• <main> — Container for all content sections
• <section> (5+) — Each major content block with:
  • Section heading (<h2>)
  • Paragraphs (<p>)
  • Code snippet or callout (<code> or <pre>)
    THIS IS JUST FOR LOOKS, ANYTHING CAN BE YOUR CODE SNIPPET.
    <pre><code>content goes here</code></pre>
  • List (<ul> or <ol>)
  • Image or icon (<img>)
• <footer> — Copyright + two CTA buttons

Accessibility requirements:

• Alt text for all images
• Proper heading hierarchy (don't skip levels)
• Links must have descriptive text

2️⃣ CSS Layout & Responsive Design

Desktop Layout (1440px)

• Fixed sidebar navigation (~300px wide)
• Main content uses remaining space
• Use Flexbox for:
  • Overall page structure (sidebar + main)
  • Section layouts
  • Footer button arrangement
• Position at least 5 decorative elements (1 in each section) using position: absolute

Mobile Layout (400px and below)

• Navigation moves to top (horizontal or stacked)
• All content stacks in single column
• Footer buttons stack vertically
• Decorative elements hidden or repositioned

Media query required at 640px breakpoint

3️⃣ Visual Design Implementation

Typography

• Implement your 2 Google Fonts as designed
• Match your type scale from Figma
• Set appropriate line-heights for readability

Spacing & Alignment

• Consistent padding/margins throughout
• Visual hierarchy matches your design
• Content never touches viewport edges

4️⃣ Case Study Page

Create a second HTML file: case-study.html

Include:

• "Back to Guide" link (returns to index.html)
• 5 reflection sections with these prompts:
  1. Design Decisions: What design choices did you make and why?
  2. Technical Challenges: What was difficult to code? How did you solve it?
  3. Responsive Strategy: How did you adapt your design for mobile?
  4. Learning Moments: What did you learn about Flexbox or CSS positioning?
  5. Future Improvements: What would you add or change with more time?

Each section should have:

• Question as heading
• 2-3 paragraphs of reflection
• Same header/footer as main page

🛠️ Step-by-Step Process

Phase 1: Foundation (Use the tutorial)

1. Set up HTML structure with semantic tags
2. Build a desktop sidebar layout with Flexbox
3. Style one content section completely
4. Test: Does it match your Figma design?

Phase 2: Content

1. Add all 5+ sections with real content
2. Style code snippets and lists
3. Add images with proper sizing
4. Place decorative elements

Phase 3: Responsive

1. Add mobile-first media query
2. Convert sidebar to top nav
3. Stack footer buttons
4. Hide/adjust decorative elements
5. Test at multiple viewport sizes

Phase 4: Polish

1. Check all links work
2. Validate HTML (W3C Validator)
3. Test in different browsers
4. Deploy to Netlify
5. Build case study page

🎯 Getting Unstuck

Layout issues? → Review the Flexbox tutorial sections on:

• Sidebar layouts
• Content centering
• Space distribution

Responsive problems? → Check your media query syntax and test at exact breakpoint

Design not matching? → Use browser DevTools to inspect spacing and compare to Figma measurements

Deployment help? → See Netlify setup guide in Canvas modules

✅ Deliverable Checklist

Code Quality

• ☐ Semantic HTML throughout
• ☐ No layout tables or unnecessary divs
• ☐ CSS organized with comments
• ☐ Color palette uses CSS variables
• ☐ Google Fonts loaded correctly

Desktop Layout (1440px)

• ☐ Fixed sidebar navigation
• ☐ Hero section with visual treatment
• ☐ 5+ styled content sections
• ☐ 2+ positioned decorative elements
• ☐ Footer with 2 side-by-side CTA buttons

Mobile Layout (375px)

• ☐ Top navigation (responsive)
• ☐ Single-column content
• ☐ Stacked footer buttons
• ☐ Decorative elements hidden/adjusted
• ☐ All content readable

Functionality

• ☐ All navigation links work
• ☐ External links open in new tab
• ☐ Case study page complete with 5 reflections
• ☐ "Back to Guide" link functional
• ☐ Site deployed and accessible

Deployment

• ☐ Live site on GitHub
• ☐ URL submitted to Canvas
• ☐ GitHub repo public and linked

📚 Resources

Flexbox

• Foundation Tutorial ← Start here
• CSS Tricks: Flexbox Guide
• Flexbox Froggy - Practice game

Positioning

• Learn CSS Positioning in 9 Minutes
• CSS Tricks: Absolute Positioning

Responsive Design

• MDN: Using Media Queries
• Kevin Powell: CSS Units

General

• Kevin Powell YouTube - CSS expert
• Web Dev Simplified - Clear tutorials

🎯 Learning Objectives

By the end of this project, you should be able to:

• Translate visual designs into semantic HTML structure
• Build flexible layouts using Flexbox
• Implement responsive design with media queries
• Use CSS positioning for decorative elements
• Deploy a static site to a live server
• Reflect on technical decisions and problem-solving approaches

🧩 Evaluation Rubric (100 pts)

💡 Design-to-Code Mindset

You're not just "making it look right"—you're building a system.
Notice how Flexbox properties change layouts.
Pay attention to what breaks at different screen sizes.
Document what you learn in your case study.

Good code is readable code. Future you (and your portfolio reviewers) will thank you for clean HTML and organized CSS.