Build an accessible profile card

Start with the document

A profile card needs a name, a description of the work and understandable skills. Use a heading for the name and a list for skills. A heading gives screen-reader users a navigation anchor; decorative spans do not. Write content first, then style it.

Make the smallest screen work

Use max-width with fluid padding rather than a fixed desktop width. Text should wrap instead of forcing horizontal scrolling. The preview renders real HTML/CSS. Scripts, network resources, forms and popups are disabled; this is deliberately a static web project.

Milestones and review

Add a heading, paragraph and skills list, then responsive styling. Inspect the result at a narrow browser width. The checks inspect markup only and do not certify accessibility. Review contrast, meaningful headings and wrapping before marking the project complete.

Try it yourself

<style>
body { font: 18px system-ui; background: #eef2ff; padding: 24px; color: #172554; }
.card { max-width: 36rem; margin: auto; padding: 24px; background: white; border-radius: 16px; }
</style>
<article class="card">
  <h1>Your name</h1>
  <p>Describe one thing you enjoy building.</p>
  <!-- Add a skills list here -->
</article>

Enable JavaScript for this interactive activity. You can read all lesson explanations above without it.