CSS is an essential skill for web developers, and mastering it can greatly enhance the look and feel of your web projects. Whether you're a beginner looking to sharpen your skills or an experienced developer aiming to stay up-to-date with the latest techniques, our comprehensive challenge pack has something for you.

We just published a course on the freeCodeCamp.org YouTube channel that will teach you all about CSS through a series of 24 engaging challenges. In this course, you'll recreate components and layouts from popular applications like GitHub, CodePen, and Instagram. Additionally, you'll learn to build loading animations, progress bars, flashcards, and more using pure CSS.

Throughout these challenges, you will refresh and refine your understanding of key CSS features, such as transitions, pseudo-elements, hover effects, and keyframe animations. Each challenge is designed to push your skills further, helping you master a wide range of CSS techniques. After completing each challenge, you’ll get to see a solution provided by CSS expert Treasure Porth, allowing you to learn from her expertise and gain valuable insights.

By the end of this course, you won't just have a comprehensive understanding of CSS—you'll also have practical experience in recreating components from well-known apps. This hands-on knowledge will equip you to tackle any CSS challenge with confidence.

Here are some of the key topics covered in the course:

  • Styling nested elements

  • Centering and alignment

  • Transitions

  • Pseudo-elements

  • Hover effects

  • Keyframe animations

  • Word carousel

  • CSS grid

  • Flexbox

  • calc()

  • Positioning

  • Shapes

  • Aspect ratio

  • CSS variables

  • Simple profile layout

  • Toggles

  • Progress bars

  • Design matching

This course is perfect for anyone looking to deepen their CSS knowledge and build practical, real-world skills. Watch the full course on the freeCodeCamp.org YouTube channel (3-hour watch).