CSS User Interface — Code Challenge
Put use cursor and resizing cues honestly into practice. Rebuild the example from its HTML, then compare your result with the CSS solution. Change the content and the viewport before calling it finished.
How it works
- User-interface properties can expose resizing or cursor feedback. They should communicate actual capabilities rather than implying an action that does not exist.
- Use actual links for navigation and buttons for actions. CSS should reinforce the behaviour the HTML already promises.
- Try a long label and keyboard focus before using the pattern in a production page.
Your task
Use the HTML below to explore this rule: User-interface properties can expose resizing or cursor feedback. They should communicate actual capabilities rather than implying an action that does not exist. Write your own CSS before opening the solution. Then replace the heading with a longer one and verify that the content is still readable.
Review the CSS solution
.card { resize: horizontal; overflow: auto; min-width: 180px; max-width: 100%; box-sizing: border-box; }
a { cursor: pointer; }
A solution to compare
The HTML supplies the content; the CSS below styles it. Open both together in the playground, then change the lesson rules at the end of the stylesheet.
<article class="card"><span class="badge">This Saturday</span><h2>Neighbourhood repair club</h2><p>Bring a small project. Share a useful skill.</p><a href="#booking">View the workshop</a></article>
body { margin: 0; padding: 24px; font-family: system-ui, sans-serif; color: #25332d; background: #f4f7f2; }
.card { padding: 20px; background: white; border: 1px solid #d4dfd6; }
h2 { margin-top: 0; }
p { line-height: 1.6; }
a { color: #17634c; }
.badge { display: inline-block; margin-bottom: 12px; font-size: .8rem; }
.layout { display: grid; gap: 16px; }
.photo { width: 100%; height: 160px; background: linear-gradient(135deg, #e4af6b, #668cba); }
button, input, select { font: inherit; padding: 8px; }
label { display: block; margin-block: 12px 4px; }
/* This lesson */
.card { resize: horizontal; overflow: auto; min-width: 180px; max-width: 100%; box-sizing: border-box; }
a { cursor: pointer; }
User-interface properties can expose resizing or cursor feedback. They should communicate actual capabilities rather than implying an action that does not exist.