Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

freeCodeCamp

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

via freeCodeCamp

Overview

Google, IBM & Meta Certificates – 40% Off
One Coursera Plus subscription covers most Professional Certificates on Coursera.
Unlock All Certificates
This course presents 24 CSS challenges followed by their solutions, covering visual components such as loading animations, progress bars, flashcards, flags, cards, menus, and profile layouts.

Syllabus

⌨️ 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!

Taught by

freeCodeCamp.org

Reviews

Start your review of 24 CSS Projects: Loading Animations, Progress Bars, Flashcards and More

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.