24 CSS Projects: Loading Animations, Progress Bars, Flashcards and More

Dive into a comprehensive video tutorial spanning 2 hours and 34 minutes that offers 24 hands-on CSS challenges to test and enhance your skills. Tackle projects ranging from creating colorful buttons and expanding search bars to designing loading animations, progress bars, and flashcards using pure CSS. Recreate components and layouts inspired by popular platforms like GitHub, CodePen, and Instagram. Work through challenges involving flag designs for various countries, playing card layouts, and interactive elements such as toggle switches and word carousels. Each challenge is followed by a detailed solution, providing valuable insights into CSS techniques and best practices. Access the course interactively on Scrimba for a more immersive learning experience, with code available for each lesson. Perfect for both beginners looking to solidify their CSS knowledge and experienced developers aiming to sharpen their skills with real-world applications.

⌨️ Welcome to CSS Challenges!
⌨️ 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: Flags of Switzerland
⌨️ 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 Flashcard
⌨️ 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!