How this term works
The project
You will build a personal portfolio website about yourself — home page, about page, projects/interests, and contact. It will be live on the internet, on a URL you can share in job applications for the rest of your life.
The tools
Just two: Visual Studio Code (free editor) and Chrome (browser). Towards the end we add GitHub for publishing. No Adobe, no Figma (except briefly for planning), no subscriptions.
Assessments (Option Y)
Task 1 (Week 5, 10%): Recipe Card — a 75-min practical check.
Task 2 (Week 10, 15%): Personal Portfolio — your published site + 1-page evaluation.
Total: 25% of the Term.
What you get from it
Real HTML and CSS skills. A live personal website. An accessibility-aware mindset. A portfolio URL to share. Confidence that you can build things on the web.
22 lessons
Every lesson has its own page with the full teaching sequence, code examples, differentiation tiers, an exit ticket, and resources.
Phase 1 · Read the Web (Weeks 1–2)
Phase 2 · Design and Style (Weeks 3–5)
Phase 3 · Build the Portfolio (Weeks 6–9)
Phase 4 · Audit, Publish, Present (Weeks 10–11)
Working exemplars
These are real HTML and CSS files you can open, inspect, and learn from. View source in your browser (right-click → View Source) to see exactly how each one is built.
Anatomy of a webpage
Your first HTML page
Semantic HTML
CSS selectors demo
Box model visual
Recipe card starter
Flexbox patterns
Responsive layout
Complete portfolio
Teacher self-study pathway
Not for students — this is for me (the teacher) to stay one week ahead.
- Coursera · Web Design for Everybody (University of Michigan) — primary pathway
- LinkedIn Learning · Become a Web Designer — supplement
- MDN Web Docs — Learn web development — gold-standard reference
- freeCodeCamp · Responsive Web Design — for extension students