Time to put it all together. You will build a personal portfolio landing page using every Level 1 skill — colours, type, the box model, spacing, buttons, cards, Flexbox and responsive basics. This is a real page you can keep and grow.
What you are building
A single-page portfolio with five sections: a hero with your name and tagline, an about section, a skills list, a row of project cards, and a contact area. It uses a consistent colour palette, good typography and a responsive layout.
Build a clean, responsive one-page portfolio that showcases who you are and what you do, using only the CSS from Level 1.
- A hero section with your name, a tagline and a button
- An about section with a short paragraph (max-width for readability)
- A skills section as a row of inline-block chips or a flex row
- A projects section with at least 3 cards (image, title, text)
- A contact section with a styled button or link
- A consistent colour palette and font choices
- box-sizing: border-box and a spacing scale
- Responsive: sections stack nicely on mobile via a media query
- Set up the HTML structure with five sections and the viewport meta tag
- Add a global reset: * { box-sizing: border-box; margin: 0; }
- Style the hero: background or gradient, centered text, a button
- Style typography: font-family, sizes, line-height
- Build the skills row with Flexbox and gap
- Build the project cards with shadow, radius and object-fit images
- Add a media query so multi-column areas stack under 600px
- Polish spacing using a consistent scale (8/16/24/32px)
- Add hover effects to cards (lift with transform + transition)
- Add a sticky header navbar with Flexbox
- Add a simple dark colour scheme
You combined selectors, colours, typography, the box model, spacing, buttons, cards, Flexbox and responsive media queries into one complete, real page.
Build mobile-first and test by narrowing your browser as you go. Keep your palette to two or three colours plus neutrals for a professional feel.
- The project combines every Level 1 skill into one real page.
- Structure first, then palette, type, components, responsiveness.
- Use box-sizing, a spacing scale and mobile-first media queries.
- Next: the Intermediate level — Flexbox, Grid and responsive design.