Project: A Responsive Portfolio

This project combines layout, typography and responsive design into a portfolio page you can adapt for your own work.

Page Sections

Build four sections: a header with navigation, a hero introducing you, a projects grid and a contact section with a form. Each section needs an id so the navigation can link to it.

Layout with Grid

Use a max-width container and centre it. Build the project cards with Grid and let them collapse to one column on small screens.

:root {
  --brand: #5e256d;
  --surface: #ffffff;
  --text: #1f2937;
  --muted: #6b7280;
  --radius: 14px;
}

.container {
  width: min(1100px, 92%);
  margin-inline: auto;
}

.projects {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}

.section {
  padding-block: 72px;
}

Type and Spacing

Choose one font family and two or three sizes. Use consistent spacing: 8, 16, 24, 32, 48 and 72 pixels. Consistency makes a simple page look designed.

Final Checks

• The page works at 375px, 768px and 1440px.
• Navigation links scroll to the right section.
• Images have alt text.
• Contrast passes a checker.
• No horizontal scrolling.

Practice

1. Build the hero section with a heading and a short introduction.
2. Create three project cards with an image, title and description.
3. Add a contact form and style its focus states.

Hands-on exercise

Build a responsive portfolio page with:
1. A header with three navigation links.
2. A hero section with an h1.
3. A projects grid with three cards.
4. A footer.
The grid must show one column on small screens and three on wide screens.

Recap

A strong portfolio uses a clear structure, a responsive grid and consistent spacing. Test on real screen sizes before publishing.