Projects›Pro· 210 min read
Capstone: Styled Multi-Page Website
Style your entire multi-page website into a cohesive, professional, responsive product — your portfolio centrepiece.
What you will learn
- Apply a consistent design system across pages
- Combine every CSS technique in one project
- Produce a deployable, portfolio-quality website
The brief
Take the multi-page website from your HTML capstone and give the whole site a single, consistent, responsive design with one shared external stylesheet.
A shared design system
- One
styles.csslinked on every page, with CSS variables for colours, spacing and radius. - A consistent header/navbar and footer across all pages (with a clear “current page” style).
- Reusable card, button and form styles used site-wide.
- Responsive layout with Flexbox + Grid and media queries.
- Polished details: shadows, transitions, hover effects, good typography.
Stretch goals
- A keyframe animation (e.g. a hero fade-in).
- A simple dark mode by swapping CSS variables.
- Responsive images with
object-fit.
Tip: Consistency is what separates amateur from professional. The same colours, spacing and components on every page make a site feel trustworthy and finished.
Note: When this is done you have a complete, hand-built, styled, responsive website. Next, JavaScript will make it interactive — but you now have the skills to make any page beautiful.
✍️ Practice
- Style every page of your site from one shared stylesheet with a consistent design.
- Implement at least one stretch goal.
🏠 Homework
- Write a one-paragraph case study of your website (what it is, the design choices, the CSS features) for your portfolio.