CSS Challenges

Find out how well you really know CSS with our bumper-pack of challenges. Recreate components and layouts from popular applications like Github, Codepen, and Instagram, and build loading animations, progress bars, flashcards and more using pure CSS!

• Styling nested elements
• Centering and alignment
• Transitions
• Pseudo elements
• Hover effects
• Keyframe animations
• Word carousel
• CSS grid
• Flexbox
• calc()
• Position
• Shapes
• Aspect ratio
• CSS variables
• Simple profile layout
• Toggles
• Progress bars
• Design matching

• CSS Challenges
• 1. Welcome to CSS Challenges!
• 2. Challenge: Colorful Button
• 3. Solution: Colorful Button
• 4. Challenge: Expanding Search Bar
• 5. Solution: Expanding Search Bar
• 6. Challenge: Codepen Tile
• 7. Solution: Codepen Tile
• 8. Challenge: Loading Animation 1
• 9. Solution: Loading Animation 1
• 10. Challenge: Loading Animation 2
• 11. Solution: Loading Animation 2
• 12. Challenge: Archery Target
• 13. Solution: Archery Target
• 14. Challenge: Word Carousel
• 15. Solution: Word Carousel
• 16. Challenge: Flag of France
• 17. Solution: Flag of France
• 18. Challenge: Flag of Germany
• 19. Solution: Flag of Germany
• 20. Challenge: Flag of Madagascar
• 21. Solution: Flag of Madagascar
• 22. Challenge: Flags of Switzerland
• 23. Solution: Flag of Switzerland
• 24. Challenge: Flag of Japan
• 25. Solution: Flag of Japan
• 26. Challenge: Flag of Sweden
• 27. Solution: Flag of Sweden
• 28. Challenge: Flag of Niger
• 29. Solution: Flag of Niger
• 30. Challenge - Github Profile Layout
• 31. Solution - Github Profile Layout
• 32. Challenge - Toggle Switch
• 33. Solution: Toggle Switch
• 34. Challenge: Playing Card - Ace of Spades
• 35. Solution: Playing Card - Ace of Spades
• 36. Challenge: Playing Card - 4 of Hearts
• 37. Solution: Playing Card - 4 of Hearts
• 38. Challenge: Adjustable Progress Bar
• 39. Solution: Adjustable Progress Bar
• 40. Challenge: Jeopardy Flashcard
• 41. Solution: Jeopardy Flashcard
• 42. Challenge: Loading Animation 3
• 43. Solution: Loading Animation 3
• 44. Challenge - Instagram Stories Menu
• 45. Solution - Instagram Stories Menu
• 46. Challenge - Animated Progress Bar
• 47. Solution - Animated Progress Bar
• 48. Challenge - Github Contributions Graph
• 49. Solution - Github Contributions Graph
• 50. Congrats, you've completed CSS Challenges!