Lab 13 · Full Responsive Website Project Lab: Multi-Page Site + Deployment Checklist

🎯 Objective

Deliver a complete website the way a client project is delivered: planned, built, tested on real widths, and checked before launch.

🧩 Skills You Will Practice

• Multi-page architecture
• Responsive design systems
• Form structure and validation UX
• Launch QA checklist

🧰 What You Need

• VS Code
• Browser + DevTools device toolbar
• Your Lab 1 and Lab 7 code as a starting base
• A one-page project brief you write before coding

📋 Step-by-Step Tasks

1. Write the brief first: site purpose, 3 pages (Home, About/Services, Contact), target user, and 5 success criteria. No code until the brief exists — this is the professional order.
2. Build the shared shell once: header/nav, footer, stylesheet with CSS variables for colours, fonts and spacing so all pages stay consistent by design.
3. Build Home with a hero, a feature section and a card grid. Build About/Services with real structured content. Reuse classes across pages instead of page-specific hacks.
4. Build Contact with a proper form: label for every input, correct input types (email, tel), required attributes, and a clearly styled focus state. The form is a front-end deliverable — label where submissions would go in a real deployment.
5. Make it responsive properly: fluid widths, flex/grid layouts, one mobile navigation pattern, and test at 360px, 768px and 1280px in DevTools, fixing every overflow and tap target smaller than about 44px.
6. Accessibility and QA pass: one h1 per page, alt text, colour contrast check, keyboard tab order, no console errors, all links working, title and meta description per page.
7. Run the deployment checklist in your notes: files organised, images compressed, favicon, 404 behaviour understood, and a final read of every page on a real phone if possible.

✅ Expected Result / Deliverable

A finished 3-page responsive website folder + a signed-off launch checklist + before/after phone screenshots — ready to show as your lead portfolio project.

⚠️ Common Mistakes

• Designing desktop first and crushing it into mobile at the end
• Copy-pasting nav/footer with drift between pages instead of one shared pattern
• A form with placeholders instead of labels