Personal Profile Page

Project: build a personal profile page that introduces a person, their interests and a clear contact destination.

Start with a semantic <main>, <header> and content sections. Design a readable narrow layout first, then use a responsive grid for a portrait area and biography.

Use a small color and spacing system rather than styling every element randomly. This CSS-only project demonstrates layout and visuals; a real contact flow requires a working destination.

A bounded page container and auto-fit Grid distribute portrait, biography and interests while preserving document order.

Introduce the person with a clear heading and description.

HTML

<main class="profile"><header><h2>Asha Rao</h2><p>Frontend learner · UI explorer</p></header><section><h3>About</h3><p>I create practical, readable web pages and enjoy learning by building.</p></section></main>

CSS

.profile { max-width: 520px; padding: 18px; background: #eff6ff; border-radius: 12px; } .profile h2 { margin: 0 0 4px; color: #1e40af; } .profile header p { margin: 0; color: #475569; } .profile section { margin-top: 20px; }

Rendered output

Observe: The content is readable and meaningful without complicated layout.

Add an avatar placeholder, skills and a contact link.

HTML

<main class="profile"><div class="profile-top"><div class="avatar" aria-hidden="true">AR</div><div><h2>Asha Rao</h2><p>Frontend learner · UI explorer</p></div></div><section><h3>About</h3><p>I build accessible, responsive interfaces and learn by creating real examples.</p><h3>Skills</h3><div class="skills"><span>HTML</span><span>CSS</span><span>Design</span></div><p><a href="mailto:asha@example.com">Email Asha</a></p></section></main>

CSS

.profile { --accent:#0f766e; max-width: 560px; padding: clamp(16px,3vw,28px); border: 1px solid #99f6e4; border-radius: 15px; background: #f0fdfa; font-family: Arial,sans-serif; } .profile-top { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; } .avatar { display: grid; place-items: center; width: 78px; height: 78px; border-radius: 50%; background: #0f766e; color: white; font-size: 26px; font-weight: 700; } .profile h2 { margin: 0 0 6px; color: #115e59; } .profile p { color: #334155; line-height: 1.55; } .profile-top p { margin: 0; } .profile h3 { margin-bottom: 8px; } .skills { display: flex; flex-wrap: wrap; gap: 7px; } .skills span { padding: 6px 10px; border-radius: 999px; background: #ccfbf1; color: #115e59; } .profile a { color: #115e59; font-weight: 700; }

Rendered output

Observe: The finished profile has a recognizable hierarchy, contact link and wrapping skill badges.

A bounded page container and auto-fit Grid distribute portrait, biography and interests while preserving document order.

Compare the two examples: identify the selector, each changed property, and which visible part of the output proves that the CSS took effect.

• Do not treat placeholder contact addresses as real delivered messages.

• Avoid setting a fixed page height when text can wrap or zoom.

Use this checklist to assess the completed CSS project:

• Your page includes a name, role, about section, skills and contact link.
• Test at 320px without horizontal page scrolling.
• Every link has a visible focus state.

Add a Projects section with two items, and test the page at 320px and 768px widths.

Before changing the code, predict what will change. Then verify by checking the rendered result.

A strong profile begins with meaningful content and adds progressive visual hierarchy.

Revisit the rendered examples if the rule still feels abstract. Change one declaration at a time so you can connect cause and effect.