HTML Tutorial
HTML Project: Profile Card
A personal profile card with a heading, links, a short bio, and a skills list.
What you will build
A single profile card. The visitor sees a name, a role, three links, a short bio, and a list of skills. CSS turns that markup into a centered card instead of a loose stack of tags.
This is a complete page, not a fragment. You will keep a doctype, language, charset, title, and a<style> block in the head so the live preview looks like a finished card.
Open an example with Try it in HTML. That loads /html/try — a live page preview.
Tags you will use
| Tag | Job on this page |
|---|---|
article | Wraps the whole card so it can stand alone |
header | Holds the name and the role |
h1 and p | Name and one-line role |
nav and a | Three profile links |
ul and li | Skills as a list, not a comma sentence |
Use article because a profile card is a self-contained piece. A barediv would draw the same box. It would not tell a screen reader what the box is.
Build in slices
Start with the identity block. Name, role, and three links are enough to preview. Do not style yet. Check that the links have real text, not only a URL.
Example
<article class="card">
<header>
<h1>Mira Chen</h1>
<p class="role">Research librarian</p>
</header>
<nav aria-label="Mira Chen on the web">
<a href="mailto:mira@example.com">Email</a>
<a href="#writing">Writing</a>
<a href="#hours">Office hours</a>
</nav>
</article>Next add the bio and the skills list. Keep the bio to one paragraph. Skills belong inul, even when there are only three items.
Example
<p class="bio">
I help students find primary sources and keep the quiet floor actually quiet.
Ask me about local history, citation styles, and late-night study rooms.
</p>
<h2>Skills</h2>
<ul class="skills">
<li>Cataloguing</li>
<li>Research interviews</li>
<li>Workshop design</li>
</ul>Paste each slice into /html/try as you go. The preview updates as a real page. Fix the structure before you fuss with colors.
Complete document
This file is the card you would keep. The stylesheet is short and local: a page background, a max-width card, spaced links, and a skills list that reads as tags without extra markup.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mira Chen — profile</title>
<style>
body {
margin: 0;
min-height: 100vh;
display: grid;
place-items: center;
background: #dce6ef;
font-family: Georgia, "Times New Roman", serif;
color: #1b2838;
}
.card {
width: min(22rem, 92vw);
background: #fffaf4;
border: 1px solid #c3b7a6;
padding: 1.5rem 1.6rem 1.7rem;
}
h1 {
margin: 0;
font-size: 1.7rem;
}
.role {
margin: 0.25rem 0 1rem;
color: #5c4f3d;
font-style: italic;
}
nav {
display: flex;
gap: 0.9rem;
margin-bottom: 1rem;
}
nav a {
color: #0b5f63;
}
.bio {
line-height: 1.5;
margin: 0 0 1rem;
}
h2 {
margin: 0 0 0.4rem;
font-size: 0.95rem;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.skills {
margin: 0;
padding: 0;
list-style: none;
}
.skills li {
display: inline-block;
margin: 0 0.35rem 0.35rem 0;
padding: 0.2rem 0.55rem;
background: #e7f3f3;
border: 1px solid #9cc4c4;
}
</style>
</head>
<body>
<article class="card">
<header>
<h1>Mira Chen</h1>
<p class="role">Research librarian</p>
</header>
<nav aria-label="Mira Chen on the web">
<a href="mailto:mira@example.com">Email</a>
<a href="#writing">Writing</a>
<a href="#hours">Office hours</a>
</nav>
<p class="bio">
I help students find primary sources and keep the quiet floor actually quiet.
Ask me about local history, citation styles, and late-night study rooms.
</p>
<h2>Skills</h2>
<ul class="skills">
<li>Cataloguing</li>
<li>Research interviews</li>
<li>Workshop design</li>
</ul>
</article>
</body>
</html>A second complete card
Same structure, different person. Change the copy and the palette. Leave the landmarks in place so the page still reads as a profile.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Jonas Reed — profile</title>
<style>
body {
margin: 0;
background: #111827;
color: #e5e7eb;
font-family: "Segoe UI", sans-serif;
display: grid;
place-items: center;
min-height: 100vh;
}
.card {
width: min(24rem, 92vw);
background: #1f2937;
border-top: 6px solid #38bdf8;
padding: 1.4rem 1.5rem;
}
h1, h2, p { margin-top: 0; }
.role { color: #7dd3fc; }
nav a { color: #fbbf24; margin-right: 0.8rem; }
.skills { padding-left: 1.1rem; }
</style>
</head>
<body>
<article class="card">
<header>
<h1>Jonas Reed</h1>
<p class="role">Woodshop tutor</p>
</header>
<nav aria-label="Jonas Reed on the web">
<a href="mailto:jonas@example.com">Email</a>
<a href="#classes">Classes</a>
<a href="#booking">Booking</a>
</nav>
<p class="bio">
I teach first-year joinery and tool care. If a joint is loose, we talk about patience, not glue.
</p>
<h2>Skills</h2>
<ul class="skills">
<li>Hand planes</li>
<li>Dovetails</li>
<li>Shop safety</li>
</ul>
</article>
</body>
</html>Common mistakes
- Putting the name in a
divinstead of anh1. The card has one main heading. - Using three bare URLs as link text. Write Email, Writing, Office hours — words a person can read.
- Cramming skills into the bio paragraph. Lists can be scanned. Sentences cannot.
- Forgetting
langonhtml. The preview still works. The document is still incomplete. - Linking to a photo file on another site. That image will 404. This card does not need a photo.
Practice tasks
- Replace Mira Chen with your own name, role, bio, and three skills. Keep the same tags.
- Add a fourth link in the nav. Give it visible text and a hash target such as
#cv. - Change the card background and the skill chip color. Preview the result at /html/try.