Combine everything into a single-page profile you could extend for a portfolio or course submission. Treat this as a capstone: edit structure and styles until you are proud to show it.
Requirements checklist
- Valid HTML5 skeleton with
lang, charset, viewport, title. - Landmarks:
header,nav,main,footer. - At least one
sectionwith heading hierarchy (h1thenh2). - Flex or grid layout that works on phone and desktop.
- Styled button + real links; visible
:focus-visiblestyles. - CSS variables for brand color and surface background.
Extension ideas
- Add a projects grid with three cards.
- Add a contact form section (reuse the styled forms lesson).
- Add a dark theme toggle using
data-themeonhtml.
Important interview questions and answers
- Q: How would you explain this project in an interview?
A: Semantic HTML for structure, CSS variables for theming, flex/grid for layout, mobile-first media queries, accessible focus and labels. - Q: What would you improve before production?
A: Real assets, performance (image sizes), contrast audit, and extract CSS to external files. - Q: How do you prove accessibility?
A: Keyboard walkthrough, heading order check, label/input pairs, and automated axe/lighthouse scans.
Self-check
- Can you navigate the page with keyboard only?
- Does the layout still work at 320px width?
Challenge
Personalize the capstone
- Replace name, skills, and contact link.
- Add one more
sectionwith a project list.
Done when: page still validates as semantic HTML with one h1.