Project: Responsive Profile Card
What Is It?
Combine selectors, spacing, typography, Grid, responsive rules, and accessible focus styles into a small reusable component.
Properties, Tags and Attributes Explained
article: A self-contained piece of HTML content.class: Connects each component part to its CSS rules.grid-template-columns: Switches the component from stacked to side-by-side at a wider viewport.href: An HTML link destination; this example links to a section in the same page.
Each example is a complete HTML page. The CSS is inside the head's style element. Use Try in new tab to edit the CSS or HTML, run your changes, and reset the example.
Example 1: Build the card
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Project: Responsive Profile Card</title>
<style>
.card { max-width: 34rem; padding: 24px; border: 1px solid #cbd5e1; border-radius: 16px; font-family: system-ui, sans-serif; }
.avatar { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: #dbeafe; font-weight: 700; }
p { line-height: 1.6; }
a { color: #1d4ed8; }
</style>
</head>
<body>
<article class="card"><div class="avatar" aria-hidden="true">AL</div><h2>Alex Lee</h2><p>Frontend learner building one small project every week.</p><a href="#work">View projects</a></article><section id="work"><h2>Projects</h2><p>A profile card and a responsive gallery.</p></section>
</body>
</html>What you see: A readable, rounded profile card uses spacing and a decorative initials avatar.
Example 2: Add responsive layout and focus
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Project: Responsive Profile Card</title>
<style>
:root { --accent: #1d4ed8; }
.card { display: grid; gap: 16px; max-width: 36rem; padding: 24px; border: 1px solid #cbd5e1; border-radius: 16px; font-family: system-ui, sans-serif; }
.avatar { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: #dbeafe; }
h2 { margin-top: 0; }
p { line-height: 1.6; }
a { color: var(--accent); }
a:focus-visible { outline: 3px solid #ea580c; outline-offset: 4px; }
@media (min-width: 500px) { .card { grid-template-columns: auto 1fr; align-items: start; } }
</style>
</head>
<body>
<article class="card"><div class="avatar" aria-hidden="true">AL</div><div><h2>Alex Lee</h2><p>Frontend learner building one small project every week.</p><a href="#work">View projects</a></div></article><section id="work"><h2>Projects</h2><p>A profile card and a responsive gallery.</p></section>
</body>
</html>What you see: At 500px and wider the avatar sits beside the content. Tab to the link to see its focus outline.
When and Where to Use It
Use this pattern for an author bio, team member card, or portfolio introduction. Review it at narrow widths and with keyboard navigation.
Common Mistake or Useful Tip
Review checklist: no horizontal overflow, readable text, meaningful HTML, visible focus, and shared values stored in variables.
Try It Yourself
Add a skills list, change the accent variable, and create a second card. Explain why Grid suits this layout.