Skip to main content

Create 24 CSS Projects

About 2 minHTMLCSSYoutubeArticle(s)blogfreecodecamp.orghtmlcssyoutubecrashcourse

Create 24 CSS Projects 관련

CSS > Article(s)
Article(s)
Create 24 CSS Projects
As the web evolves, new tools and ideas are released with the goal of making our lives as web developers easier. This means we have to choose whether to stick with the old ways or discard them entirely for the shiny new stuff. But does this always demand an either-or...

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).