Web development tutorial: build a responsive profile page with HTML and CSS

Create a simple profile page that remains readable on a phone and a larger screen. This exercise uses one HTML file, no framework and no external fonts. The goal is to understand semantic structure, flexible sizing and keyboard-friendly links before adding a build tool.

1. Create the document

Make a folder named `profile-page` and save this complete example as `index.html`. Replace the fictional name and contact address before publishing your own version. Open the file in a browser to see the result.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Ada — Frontend Developer</title>
  <meta name="description" content="Ada's sample developer profile and projects.">
  <style>
    * { box-sizing: border-box; }
    body { margin: 0; font: 18px/1.6 system-ui; background: #f3f6f4; color: #153c32; }
    main { max-width: 960px; margin: auto; padding: clamp(20px, 5vw, 64px); }
    h1 { font-size: clamp(2rem, 6vw, 4rem); line-height: 1.1; }
    .projects { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 20px; }
    article { background: white; padding: 24px; border: 1px solid #aac4b9; border-radius: 16px; }
    a { color: #135f48; text-underline-offset: 4px; }
    a:focus-visible { outline: 3px solid #135f48; outline-offset: 5px; }
  </style>
</head>
<body>
  <main>
    <header>
      <p>PORTFOLIO / SAMPLE PROJECT</p>
      <h1>Hello, I'm Ada.</h1>
      <p>I build clear, accessible interfaces for everyday tasks.</p>
      <a href="mailto:hello@example.test">Contact Ada</a>
    </header>
    <section aria-labelledby="projects-heading">
      <h2 id="projects-heading">Selected projects</h2>
      <div class="projects">
        <article><h3>Reading list</h3><p>A small tool for keeping track of articles to read.</p></article>
        <article><h3>Campaign report</h3><p>A dashboard that explains counts alongside percentages.</p></article>
      </div>
    </section>
  </main>
</body>
</html>

2. Test the small-screen layout

Reduce the browser width to approximately 320 pixels. The project cards should become a single column without creating a horizontal page scrollbar. Increase the width and observe how the grid creates more columns when space permits.

The viewport declaration makes the layout respond to device width. The grid uses flexible tracks rather than a fixed desktop layout squeezed onto a phone. The `clamp` values limit how small and how large spacing and headings can become.

3. Test interaction without a mouse

Press Tab until the contact link receives focus. A visible outline should appear. The link opens the user's configured mail application; it is not a contact form and does not submit a message to a server. The example address is deliberately fictional.

Headings describe the page hierarchy: one main heading, a projects section and an individual heading for each card. Do not choose heading levels only because you like their default size. Change their appearance with CSS while keeping the structure meaningful.

4. Extend the page

Add a third project and test the layout again. Replace descriptions with your own work and explain the problem each project solved. If you later add a photograph, include an appropriate alternative description and test that the page still makes sense when the image does not load.

References

MDN responsive design · CSS Grid