A zero-experience curriculum. By Week 6, students hold a live, deployed portfolio website showcasing 5 real projects — a styled profile page, a product landing page, a JavaScript app, an API-powered discovery app, and a capstone portfolio site they own.
Highlights
Students hand-code a structured "About Me" page using HTML only — no CSS. Forces pure structural thinking before visual thinking. Includes a bio, skills list, education table, contact form, and social links.
Validated with zero errors in the W3C HTML validator and carried forward into Week 2 for styling.
Students take their Week 1 HTML profile and design it fully: a custom color scheme using CSS variables, a Google Font pairing, a Flexbox layout for the nav and skills section, and two responsive breakpoints (phone and desktop).
Must look professional on both mobile and desktop screens.
Students design and build a complete landing page for a fictional product. CSS Grid magazine-style hero, animated CTA button, sticky navigation, a features section using auto-fit cards, and a dark mode toggle powered by CSS variables.
Layout is CSS-only — no JavaScript needed.
Students build a fully functional to-do list application: add tasks, mark complete, delete, filter by status (All / Active / Done), and persist all data in localStorage so tasks survive a page refresh.
The classic benchmark project — built properly, with clean UI and CSS transitions.
Students build a search-driven discovery app using a public API of their choice: OMDB for movies, RAWG for games, or Open Library for books.
Features a live search, a responsive results grid, a detail view per item, and a "Save to Favorites" feature backed by localStorage.
Students build a complete, deployed portfolio site showcasing all four previous portfolio projects. Animated hero, filterable projects grid, a working contact form, and a Lighthouse accessibility score of 90 or above.
A live URL is required to complete the course.
| Week | Project | Output |
|---|---|---|
| Week 2 | Responsive Personal Profile Page | Live GitHub Pages site |
| Week 3 | Product Landing Page | Live GitHub Pages site |
| Week 4 | To-Do List App | Live JavaScript App |
| Week 5 | Movie / Game Discovery App | Live API-Powered App |
| Week 6 | Personal Portfolio Website | Live Capstone Site |
Students finish the course with a fully deployed portfolio and a real URL to share with employers.
Every project is deployed to a real URL. No zip files, no screenshots — employers and clients can click and see working code.
The course begins with zero coding and ends with students building an API-powered app from scratch. Each week unlocks the next.
Students use VS Code, Git, GitHub, and Chrome DevTools — the same tools professional developers use daily.
GitHub workflows, Lighthouse audits, and accessible design are built into the curriculum from the start, not added as afterthoughts.