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!
2.6 hrs
Content
About
Welcome to CSS Challenges!
Challenge: Spoiler Revealer
Solution: Spoiler Revealer
Challenge: Colorful Button
Solution: Colorful Button
Challenge: Expanding Search Bar
Solution: Expanding Search Bar
Challenge: Codepen Tile
Solution: Codepen Tile
Challenge: Loading Animation 1
Solution: Loading Animation 1
Challenge: Loading Animation 2
Solution: Loading Animation 2
Challenge: Archery Target
Solution: Archery Target
Challenge: Word Carousel
Solution: Word Carousel
Challenge: Flag of France
Solution: Flag of France
Challenge: Flag of Germany
Solution: Flag of Germany
Challenge: Flag of Madagascar
Solution: Flag of Madagascar
Challenge: Flag Challenge
Solution: Flag of Switzerland
Challenge: Flag of Japan
Solution: Flag of Japan
Challenge: Flag of Sweden
Solution: Flag of Sweden
Challenge: Flag of Niger
Solution: Flag of Niger
Challenge - Github Profile Layout
Solution - Github Profile Layout
Challenge - Toggle Switch
Solution: Toggle Switch
Challenge: Playing Card - Ace of Spades
Solution: Playing Card - Ace of Spades
Challenge: Playing Card - 4 of Hearts
Solution: Playing Card - 4 of Hearts
Challenge: Adjustable Progress Bar
Solution: Adjustable Progress Bar
Challenge: Jeopardy Card Flip
Solution: Jeopardy Flashcard
Challenge: Loading Animation 3
Solution: Loading Animation 3
Challenge - Instagram Stories Menu
Solution - Instagram Stories Menu
Challenge: Animated Progress Bar
Solution - Animated Progress Bar
Challenge - Github Contributions Graph
Solution - Github Contributions Graph
Congrats, you've completed CSS Challenges!
How to Utilize Your Certificate
Certificate of Completion