Turn the provided profile markup into a readable card with predictable spacing, a visible keyboard focus state, and a layout that stays usable at narrow widths.
Requirements
Use a readable line-height
Keep the card within the viewport
Give the link a visible :focus-visible outline
Show a hint
Write down the input contract and the failure cases before coding.
local runtime
RUNTIME OUTPUT
Use your CSS runtime locally, then compare with solution.css.
Use your local runtime, then review the reference solution
LEARN FROM THE SOLUTION
Why the solution works.
The max-width controls line length rather than forcing a fixed card width. Padding and line-height establish comfortable reading space, while focus-visible keeps keyboard feedback visible without adding noise for mouse users.
What this exercise teaches
Box model
Typography
Keyboard focus
A PRACTICAL PLAN
Work through Style a readable profile card with intent.
Translate the contract.Turn the requirements into a short checklist before editing your-solution.css.
Use the example as evidence.Predict the result for the supplied input, then add one boundary case such as an empty value, a limit, or unexpected input.
Review the implementation.Compare your choices against solution.css only after a real attempt.
EXERCISE FAQ
Before you move on.
What does “Style a readable profile card” teach?
This beginner CSS exercise focuses on Box model, Typography, Keyboard focus. Its requirements define the exact behavior to implement before you write code.
How should I validate this CSS solution?
Apply the CSS to a small HTML fixture in your browser, check narrow and keyboard states, then compare the design decisions in solution.css.
When should I open the reference solution?
Attempt Style a readable profile card first. Then open the read-only solution file to compare the contract, edge-case handling, and implementation choices—not simply to copy the final code.
