Study StudioCertificatesDashboardSign inSign in

← All projects

beginner4h

Personal Portfolio Page

Design and build a responsive, semantic, accessible one-page portfolio using only HTML and CSS.

Tracks: HTML & CSS

Open in Project Studio

Objectives

Structure a page with semantic HTML landmarks
Style a layout with the box model and Flexbox
Make the page responsive across mobile, tablet, and desktop widths
Meet basic accessibility requirements (headings, alt text, contrast, focus states)

Before you start

Milestones

0%

1. Semantic structure

Lay out header, nav, main sections, and footer with semantic elements.

Uses <header>, <nav>, <main>, and <footer>
Exactly one <h1>, with <h2> for each section
All images have meaningful alt text

2. Styling and layout

Apply a cohesive visual style using the box model and Flexbox.

A Flexbox-based navigation bar
Consistent spacing using margin/padding
A defined color palette with sufficient contrast

3. Responsive behavior

Ensure the page reads well at 375px, 768px, and 1440px.

No horizontal scrolling at 375px width
Navigation remains usable on mobile
Text remains readable without zooming

References

MDN: Semantic HTML