Quest 4 of 10 · 🎵 · Free · No setup
Music Player
Lay out album art and controls, flex the UI, then wire play/pause. Practice real UI patterns without leaving the tab.
- In-browser live preview
- Saved on this device
- Unlocks: Flexbox & controls — layout and button groups
Part of Web Dev Quests · Prefer prompts? Vibe Code Studio →
Step: HTML
Player layout
Structure a music player with controls.
Group related controls in a <div> so CSS can align them in a row.
Your quest
Add a track list with 3 song titles below the player.
Edit HTML
HTML
Live preview