Skip to main content
Donate
All projects
Web project

Personal profile card

A profile card is a tiny web page: a picture, a name, a few lines about you and some links. It's a good first build because you'll use headings, lists and links, then style a single box until it looks finished.

Skills you'll practise

  • HTML structure
  • Lists and links
  • The box model
  • Flexbox
Open starter in playgroundSee the steps

Steps

  1. Step 1: Write the content

    Inside the <article>, add a heading with your name, a short paragraph about you, and a list of three things you like.

    Show a hint

    Use <h1> for the name, <p> for the bio and <ul> with <li> items for the list.

  2. Step 2: Add an avatar

    Make a round avatar with your initials. A <div> with a background colour and border-radius: 50% is all it takes.

  3. Step 3: Style the card

    Give the card a white background, padding, rounded corners and a soft shadow, and limit its width so it doesn't stretch.

    Show a hint

    max-width: 320px stops the card growing, and margin: auto centres it.

  4. Step 4: Centre it on the page

    Use flexbox on the <body> to place the card in the middle of the screen.

    Show a hint

    display: flex; justify-content: center; align-items: center; min-height: 100vh;

  5. Step 5: Add your links

    Finish with a row of links (a portfolio, a project, a club) styled as small rounded buttons.

Starter code

It already shows something on the page. The TODO comments mark where to start.

Open in playground
index.html
<article class="card">
  <!-- TODO: add an avatar, your name, a short bio and a list of interests -->
  <h1>Your Name</h1>
  <p>A sentence or two about you.</p>
</article>
style.css
body {
  font-family: system-ui, sans-serif;
  background: #fcf4e8;
  color: #15120c;
}

.card {
  /* TODO: background, padding, rounded corners and a shadow */
}

Example solution

One way to finish it. Have a go first; yours doesn't need to match.

Reveal the solution
index.html
<article class="card">
  <div class="avatar" aria-hidden="true">AK</div>
  <h1>Alex Kim</h1>
  <p class="bio">Ninth grader who likes building small websites and drawing comics.</p>

  <h2>Things I like</h2>
  <ul class="likes">
    <li>Sketching characters</li>
    <li>Learning Python</li>
    <li>Long bike rides</li>
  </ul>

  <nav class="links" aria-label="My links">
    <a href="#">Portfolio</a>
    <a href="#">Comics</a>
    <a href="#">Contact</a>
  </nav>
</article>
style.css
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 24px;
  font-family: system-ui, sans-serif;
  background: #fcf4e8;
  color: #15120c;
}

.card {
  width: 100%;
  max-width: 320px;
  padding: 28px 24px;
  text-align: center;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(46, 38, 24, 0.1);
}

.avatar {
  width: 88px;
  height: 88px;
  margin: 0 auto 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background: #dbefdb;
  color: #3e7f5c;
  font-size: 28px;
  font-weight: 700;
}

h1 {
  margin: 0;
  font-size: 24px;
}

.bio {
  color: #4f483d;
  line-height: 1.5;
}

h2 {
  margin: 20px 0 8px;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #3e7f5c;
}

.likes {
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: 1.8;
}

.links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
}

.links a {
  padding: 6px 14px;
  border-radius: 999px;
  background: #dbefdb;
  color: #1e3c2c;
  text-decoration: none;
  font-size: 14px;
}

.links a:hover {
  background: #c6e5c6;
}
Open solution in playground

Stretch goal

Add a second card for a friend and lay the two out side by side with flexbox, wrapping onto separate lines on a narrow screen.

Chapters that help