Bringing Thirty Days Together
This capstone doesn't teach anything new — it asks you to combine everything you've already learned into one real, polished project: a personal portfolio website. It's the same kind of project professional developers build to showcase their own work.
- ✓Semantic HTML structure from Module 01 and 02 — header, nav, main, section, footer.
- ✓Visual styling from Module 03 — typography, color, the box model, borders.
- ✓Layout and responsiveness from Module 04 — flexbox, grid, and media queries.
Five Sections, One Page
A single-page portfolio is the most common format for this kind of site. Before writing any code, sketch out the sections — a wireframe forces you to decide on structure before you're distracted by colors and fonts.
Marking Up Each Section
Use the semantic elements from Day 09 to give each section real meaning — this is what separates a page that "looks right" from markup that's actually well-built.
<body> <header>...</header> <main> <section id="hero">...</section> <section id="about">...</section> <section id="projects">...</section> <section id="contact">...</section> </main> <footer>...</footer> </body>
Grid for Cards, Flexbox for Navigation
Use CSS Grid from Day 25 for the projects section, and flexbox from Day 24 for the nav bar and any row of items that needs to wrap gracefully.
/* Nav: flexbox for a simple horizontal row */ .nav-row { display: flex; justify-content: space-between; align-items: center; } /* Projects: grid, auto-fits as many columns as space allows */ .project-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; }
Testing Every Breakpoint
Use the media queries from Day 26 to adjust the hero's font size, stack the nav on mobile, and confirm the project grid degrades gracefully to a single column on small screens.
@media (max-width: 640px) { .nav-row { flex-direction: column; gap: 12px; } .hero h1 { font-size: 2rem; } }
The Details That Make It Feel Finished
A real type scale — consistent heading sizes and a comfortable line-height on body text.
Subtle hover transitions on nav links, buttons, and project cards.
Alt text on every image and a logical heading order for accessibility.
A final pass through the W3C validator to catch any stray markup errors.
Breaking Down What You Just Learned
Wireframe firstSketching sections before coding keeps structure decisions separate from styling ones.
Semantic sectionsheader, main, section, and footer give the page real, meaningful structure.
Flexbox for rows, grid for cardsEach layout tool fits a different kind of arrangement.
Test every breakpointResponsive mode confirms the site works at mobile, tablet, and desktop widths.
Polish mattersType scale, hover transitions, alt text, and validation turn "working" into "finished."
Build Your Full Portfolio Site
A complete, responsive personal portfolio
Create index.html and style.css and build the full site described in this lesson, section by section.
- Build the semantic HTML skeleton: header, hero, about, projects, contact, footer.
- Style typography with a Google Font and a consistent type scale across all headings and body text.
- Build the nav bar with flexbox, including a mobile layout that stacks below 640px.
- Build the projects section with CSS Grid, showing at least three project cards with a title, description, and link.
- Add a simple contact section with a form or a list of contact links.
- Add hover transitions to buttons, links, and project cards.
- Test at mobile, tablet, and desktop widths using DevTools responsive mode.
- Run the whole page through validator.w3.org and fix any reported errors.
- ✓Uses semantic HTML5 elements throughout, not just divs.
- ✓Includes at least one flexbox layout and one CSS Grid layout.
- ✓Has at least one media query breakpoint that visibly changes the layout.
- ✓Passes the W3C validator with zero errors.
Recap
Semantic HTML sections give the page real, meaningful organization.
Flexbox for rows and navigation, CSS Grid for card-based sections.
Media queries adapt the layout across mobile, tablet, and desktop.
Typography, transitions, accessibility, and validation finish the build.
You've completed HTML & CSS, One Class at a Time
Thirty lessons ago you started with your first <!DOCTYPE html>. Today you shipped a full, responsive, semantic website built entirely with the fundamentals you learned along the way. That's a real skill — keep building with it.