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!
Overview
Syllabus
- 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
- Want to become a Scrimbassador?
- 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
