Project: a responsive profile card

This capstone turns the course's structural and styling ideas into one page component.

What you will learn

Create a semantic card
Style it with Grid and the box model
Verify it at phone width and with a keyboard

Plan before styling

Decide which information belongs in the card and which should be a link. Use a heading for the person's name, a short description, and a real destination for the action. Do not add invented ratings, follower counts, or credentials just to make the design appear populated.

Build the content first

Write the HTML in a logical order and check that it reads sensibly without CSS. Give informative imagery an appropriate text alternative, or use an empty alternative for decorative imagery. Use a real link destination and descriptive link text so the control remains meaningful out of context.

Add a resilient layout

Use a max-width, padding, and Grid to make the card comfortable without fixing its height. Keep the single-column layout as a useful default and add a second column only when there is enough space. Relative units and content-driven sizing help the component survive longer text.

Review with a checklist

Open the page at a narrow width, enlarge text, and tab through all interactive elements. Confirm focus is visible, colors remain readable, and no content overflows horizontally. A finished component should still communicate its purpose even if images or custom fonts fail to load.

Finish with a real content review

Replace the sample name and description with information you have permission to publish. Check that the action leads to a working destination and that the layout still handles a longer name. A polished component is not only a screenshot: it has accurate content, useful alternatives, predictable focus, and no decorative claims that could be mistaken for real endorsements.

<article class="profile-card">
  <div>
    <h1>Samira Rao</h1>
    <p>Learning web development through small projects.</p>
    <a href="/programming-languages/python-for-beginners/">Read the Python course outline</a>
  </div>
</article>

Practice exercise

Add a stylesheet for the profile card, then test its layout with a long heading and at a narrow viewport.

Show a hint

Use a max-width, padding, a gap, and a breakpoint only if the content benefits.

Show one possible solution

Style .profile-card with border-box sizing, a max-width, padding, and a border. Use a single-column default and introduce a grid column only when it fits.

Quick check

Which test best checks whether the card is usable without a mouse? Tab through its links and inspect focus Only resize the browser with the mouse

Frequently asked questions

Why does the project use a fictional learner name?

<p>It is clearly sample content for a coding exercise, not a testimonial or claim about a real CodeSikho user. The project asks you to practise layout, not to imply endorsements.</p>