Skip to project content
BrounStack
PROJECT 01 · HTML + CSS

Build a developer portfolio.

Create a clean personal website with a hero, skills, project cards and contact section. The goal is to practice semantic HTML, responsive CSS and visual hierarchy in one real build.

Level: Beginner Time: 60–90 min Focus: Layout + Responsive
Open in Playground → Review HTML

What you will build

A one-page portfolio that already looks polished enough to customize with your own name, skills and projects.

  • Semantic header, main sections and footer.
  • Responsive hero with clear call-to-action buttons.
  • Skills and project cards using Grid.
  • Mobile-friendly spacing and typography.

Build it step by step

Do not just paste the final code. Build each part, run it, then move to the next step.

Create the structureAdd the header, hero, skills, projects and contact sections.
Style the pageSet colors, spacing, typography, card surfaces and buttons.
Make it responsiveUse Grid and a mobile breakpoint so cards stack cleanly.
Personalize itReplace the sample content with your own profile, skills and project links.
Starter projectSingle-file HTML · ready for BrounStack Playground
\n