Skip to content

Beginner project · Small

Personal profile page

You write a single page that introduces you: a heading, a short about section, a list of things you are learning, and a way to get in touch. It is styled by hand with no framework, and it rearranges itself from one column on a phone to two columns on a wide screen. The point is to learn how structure and styling stay separate, and how a layout can adapt without a library doing it for you.

Languages
HTML & CSS
Size
Small: one sitting for most learners
Where to build it
Built entirely in the HTML and CSS playground, which renders your page as you type inside a frame with no network access, so keep every font and graphic inline. Open the HTML & CSS playground →

What you will practise

  • semantic HTML elements instead of a pile of divs
  • CSS Grid or Flexbox for a real layout
  • a media query that changes the layout at one breakpoint
  • readable type scale, spacing and colour contrast
  • keyboard focus styles and sensible heading order
  • drawing simple graphics with inline SVG rather than image files

Requirements

The project is done when every one of these is true.

  • The page uses header, main, section and footer elements, and there is exactly one h1 on the page.
  • Heading levels go in order with no gaps: an h3 only ever appears inside a section whose heading is an h2.
  • All styling lives in the CSS, not in inline style attributes, and no CSS framework is used.
  • The layout is a single column below 640 pixels wide and at least two columns above it, changed by one media query.
  • At 360 pixels wide the page has no horizontal scrollbar and no text is cut off.
  • The page loads nothing from the network: no external fonts, stylesheets, scripts or image files. Any graphic is inline SVG, a CSS gradient or a data URL.
  • Every link and every focusable element has a visible focus style that is not just the browser default removed.
  • Body text and its background meet a contrast ratio of at least 4.5 to 1, checked with a contrast tool rather than by eye.
  • With CSS disabled entirely, the page still reads top to bottom in a sensible order.

Milestones

A sensible order to build it in, so something works at every step.

  1. Write the content first, with no CSS at all

    Put every word on the page in correctly nested semantic elements and read it top to bottom unstyled. If it does not make sense here, styling will only hide the problem.

  2. Set the page basics

    Add a sensible default font stack, a comfortable line height, a maximum line length for paragraphs and consistent spacing between sections.

  3. Build the single-column layout

    Style the header, sections and footer for a narrow screen first, so the phone case is the one you got right rather than the one you squeezed in later.

  4. Add the wide-screen layout

    Introduce one media query above your breakpoint that turns the main content into a two-column grid, and decide deliberately which block goes where.

  5. Do the accessibility pass

    Tab through the whole page, add a visible focus style, check heading order, and run the text and background colours through a contrast checker.

  6. Strip out anything that needs the network

    Replace external fonts and images with system fonts, inline SVG or gradients, then confirm the page looks identical with the network unavailable.

Hints

Open one only when you are stuck. Each gives a little more away.

Show hint 1

Narrow first is easier than wide first. A one-column page is nearly the browser's default, so you add rules to make it wide rather than fighting rules to make it narrow.

Show hint 2

If you find yourself styling a div by class to look like a heading, the element is wrong, not the CSS. Change the element.

Show hint 3

A long line of text is tiring to read. Capping the paragraph width in characters rather than pixels keeps that cap right at any font size.

Show hint 4

The preview here is a locked-down frame with no network at all, so an external font or a linked image simply will not appear. Inline SVG and a system font stack cost nothing and always load.

Show hint 5

Removing the default focus ring without putting something visible back makes the page unusable by keyboard. Style it, do not delete it.

Show hint 6

Nothing you type in the playground is saved when you leave the page, so copy the three panes into files on your own computer once the layout is where you want it.

How to test it

Run these checks yourself, or turn them into automated tests once you know how.

  • Narrow the preview to about 360 pixels wide: the content should be one column with no sideways scrolling and no clipped words.
  • Widen it past your breakpoint: the layout should become two columns, and nothing should overlap at the moment it switches.
  • Press Tab repeatedly from the top of the page: focus should move through every link in a sensible order and always be clearly visible.
  • Comment out your entire stylesheet and reload: the page should still read in the right order, with headings still looking like headings because they are real heading elements.
  • Run your body text colour and background colour through a contrast checker and confirm the ratio is 4.5 to 1 or better.
  • Zoom the browser to 200 per cent: the text should reflow rather than needing horizontal scrolling.
  • Search your HTML for http:// and https:// and confirm the only matches are links you meant to include, not fonts or images the page needs to render.
  • List your headings in order and confirm there is exactly one h1 and no jump from h1 straight to h3.

Stretch goals

  • Add a dark colour scheme with a prefers-color-scheme media query, and check contrast in both.
  • Add a skip link that jumps past the header straight to main, visible only when it has focus.
  • Draw a small inline SVG avatar or logo from basic shapes, with an appropriate role and label.
  • Add a print stylesheet that hides navigation and prints the contact details as plain text.
  • Replace your breakpoint with a fluid layout that needs no media query at all, using a grid with a minimum column width.

Learn what you need

All projects · Roadmaps · Practice problems