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

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

freeCodeCamp.org via freeCodeCamp Direct link

⌨️ Solution: Word Carousel

15 of 50

15 of 50

⌨️ Solution: Word Carousel

Class Central Classrooms beta

YouTube playlists curated by Class Central.

Classroom Contents

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

Automatically move to the next video in the Classroom when playback concludes

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

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.