Essential storage keeps sign-in and learning features working. Google Analytics measures visits; Microsoft Clarity records interactions to help us improve usability. Both are optional and stay off until you choose. Read our privacy policy.
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.
Write down the input contract and the failure cases before coding.
Ready to run the file open above.
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.
your-solution.css.solution.css only after a real attempt.This beginner CSS exercise focuses on Box model, Typography, Keyboard focus. Its requirements define the exact behavior to implement before you write code.
Open your-solution.css and select Run code. The CSS is applied to a sandboxed preview, the same way course CSS blocks run.
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.