Read here. Code on desktop. The coding workspace opens on screens 1024px and wider.
User interface challenge
Tweet
easy25 min
Recreate a compact social post card using a fictional author and supplied content. Build the card’s responsive layout, then connect its Like action to state.
Requirements
Use the supplied fictional author, handle, date and post text. Keep an article with avatar, author metadata, body and action footer.
Implement a two-column card: a 48px circular avatar on the left and flexible content on the right. Align their top edges and place metadata, body and actions in order.
Use a grid for the card and flex layouts for the wrapping metadata and evenly spaced action buttons. The content column must shrink safely with min-width:0; wrap unbroken body text with overflow-wrap:anywhere.
Keep the card at width:100% with max-width:560px. Preserve focus indicators and avoid fixed heights that clip content. The starter includes only general page styles; write the card layout in its stylesheet.
Like starts at 12 with aria-pressed=false. Each activation toggles the current user’s like, adding or subtracting one. Reply and Repost are display-only controls.
Keep the supplied IDs so browser checks can find the controls. Use your selected framework to update the view; do not query or mutate rendered DOM manually.
Examples
Example 1
Input: Activate Like once
Output: Like · 13, selected
Example 2
Input: Activate Like again
Output: Like · 12, unselected
Render the supplied post with a resilient card layout and a reversible Like action.
