Black Friday 2024: 25+ Ways to Save on Online Learning

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

Scrimba

CSS Challenges

via Scrimba

Go to class Write review

Overview

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!
  • Styling nested elements
  • Centering and alignment
  • Transitions
  • Pseudo elements
  • Hover effects
  • Keyframe animations
  • Word carousel
  • CSS grid
  • Flexbox
  • calc()
  • Position
  • Shapes
  • Aspect ratio
  • CSS variables
  • Simple profile layout
  • Toggles
  • Progress bars
  • Design matching

Syllabus

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

Reviews

Start your review of CSS Challenges

Go to class

Never Stop Learning.

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

Sign up for free
Someone learning on their laptop while sitting on the floor.