Interactive Learning Platform (Beta)
Flexbox Froggy
Learn CSS Flexbox by helping frogs reach their lily pads!
Challenge 1
Level 1 of 40
Welcome to Flexbox Froggy! Your goal is to help the frogs reach their lily pads by writing CSS flexbox code. For this first level, use the justify-content property to center all the frogs.
CSS Playground
#pond {
display: flex;
}
Learning Progress1 / 40
3% Complete
🌊
Magical Pond
Your task is to provide correct answer to stop the frog bouncing.📚
How to Master Flexbox
✨
Write CSS Magic
Use flexbox properties in the editor
🎯
Real-time Preview
Watch frogs move as you type
🎨
Perfect Alignment
Match frogs to their lily pads
🚀
Level Up
Get hints when you‘re stuck