Build a Personal Profile Card with HTML & CSS

You'll build the kind of profile card you see on team pages and social sites: a round photo, a name, a short bio, a row of skill tags and a couple of buttons.

It's an ideal first project because it uses the HTML you already know (headings, paragraphs, images, lists and links) and teaches the CSS that makes things look designed: spacing, borders, rounded corners, shadows and flexbox.

Every good layout starts with a quick plan. Look at a profile card on any team page and you'll see the same pieces stacked from top to bottom: a photo, a name, a job title, a short paragraph about the person, a few skills and a couple of links. Write those pieces down in order and you already have your HTML.

The trick is to write all the HTML first and style it afterwards. With no CSS at all, your card should still make sense: the heading should read as a heading, the skills should read as a list and the links should work. If the content is solid without styling, the CSS has only one job, which is making it look good. This habit also makes your page easier for screen readers and search engines to understand.

Here's how each part maps to an HTML element:

If any of these feel unfamiliar, the HTML images, HTML lists and HTML links lessons cover them in a few minutes each.

Four CSS ideas do almost all the work in this project:

• The box model. Every element is a box with content, padding, a border and margin. Padding adds space inside the card, margin pushes things apart. The box model lesson explains it with diagrams.
• border-radius. One property turns square corners into soft ones, and border-radius: 50% turns a square photo into a perfect circle.
• box-shadow. A soft shadow lifts the card off the page so it looks like something you could pick up.
• Flexbox. display: flex on the body centres the card, and on the skills list it lines the tags up in a row that wraps on small screens. See the flexbox lesson for every option.

A profile card has to look right on a 6-inch phone and a 27-inch monitor. The card in this project already uses min(320px, 90vw), so it never grows wider than 320 pixels and never overflows a small screen. That one function replaces a media query and is the simplest way to make a responsive card in CSS.

A subtle hover effect makes the card feel interactive. Lift it a few pixels and deepen the shadow, and use a transition so the movement is smooth:

.card { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.card:hover { transform: translateY(-4px); box-shadow: 10px 10px 0 #15161b; }

@media (prefers-reduced-motion: reduce) {
  .card { transition: none; }
}

The prefers-reduced-motion query switches the animation off for visitors who have asked their operating system for less motion. It's a small detail that separates a careful build from a rushed one. The CSS transitions lesson explains timing and easing, and the responsive design lesson shows more ways to adapt a layout to any screen.

• Add a hover effect that lifts the card slightly using transform: translateY(-4px) and a CSS transition.
• Add a dark version of the card using CSS variables.
• Make three cards for a "Meet the team" section and lay them out with CSS Grid.

The photo looks squashed or stretched. This happens when the image isn't square but you give it the same width and height. Add object-fit: cover to the img rule. The browser then crops the photo to fill the circle instead of distorting it.

The card touches the edges on a phone. You probably set width: 400px. Use max-width: 360px and width: 100% instead, plus some padding on the body. The card can then shrink on small screens but never grows too wide.

The skill tags still have bullets and indentation. Lists come with default styles. Remove them with list-style: none; padding: 0; margin: 0; on the ul.

The buttons are different sizes. Links are inline elements, so padding behaves oddly until you change their display. Give them display: inline-block (or put them in a flex container) and the same padding.

Before you call the project finished, test it the way a real visitor would:

1. Resize the window from wide to narrow. The card should stay centred and readable at every width.
2. Press Tab to move through the page. Each link should show a visible focus outline so keyboard users know where they are.
3. Break the image path for a moment by misspelling the file name. The alt text should still describe the person.
4. Zoom to 200%. Nothing should overlap or get cut off.

If all four pass, you've built something many professional pages get wrong.

The pattern you just built appears all over the web, so it's worth knowing well. Team pages show a grid of profile cards, one per person. Author boxes sit at the end of blog posts with a photo, a short bio and links. Portfolio sites often open with a large version of the card as a personal introduction, and link-in-bio pages are essentially a profile card with a longer list of buttons.

Each of these is the same HTML with small CSS changes. Put three or four cards inside a container with display: grid and grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)), and you have a responsive team section that goes from one column on phones to four on desktops with no media queries. Building one card properly first, then reusing it, is exactly how professional developers work with components.

Can I use my own photo? Yes. Put the image file next to your HTML file and change the src to its name, for example src="me.jpg". The file paths lesson explains how to point at images in other folders.

Should the name be an h1 or an h2? If the card is the only thing on the page, use <h1>. If it sits on a page with other cards, the page title is the <h1> and each card's name is an <h2>.

How do I put this online? Push the folder to a GitHub repository and switch on GitHub Pages. Your card gets its own web address that you can share or add to a CV.