DEV Community

Cover image for Journey Through CSS: Mastering Colors and Moving Forward
Anu Charley K
Anu Charley K

Posted on

Journey Through CSS: Mastering Colors and Moving Forward

Hey Community,

I'm excited to share my latest accomplishment with you all. I recently completed the "Learn CSS Colors by Building a Set of Colored Markers" course through freeCodeCamp. This course was a fantastic dive into the world of CSS colors, teaching me various ways to set color values and pair colors effectively. Understanding color theory and how to apply it to web design can significantly enhance the aesthetic appeal of a webpage, making it more engaging for users.

Key Learnings:

  • Different methods to set color values (hex, RGB, HSL, etc.)
  • Techniques to pair colors harmoniously
  • Practical application by building a set of colored markers Here are a few code snippets I found particularly useful:

Setting Colors with Hex Values:

.marker-red {
  background-color: #FF0000;
}

.marker-blue {
  background-color: #0000FF;
}
Enter fullscreen mode Exit fullscreen mode

Setting Colors with RGB Values:

.marker-green {
  background-color: rgb(0, 255, 0);
}

.marker-yellow {
  background-color: rgb(255, 255, 0);
}
Enter fullscreen mode Exit fullscreen mode

Setting Colors with HSL Values:

.marker-purple {
  background-color: hsl(300, 100%, 50%);
}

.marker-orange {
  background-color: hsl(30, 100%, 50%);
}
Enter fullscreen mode Exit fullscreen mode

Completing this course has not only expanded my CSS skills but also given me a deeper appreciation for the importance of color in web design.

What's Next?
I’m thrilled to continue my learning journey with the next chapter, which focuses on forms. Forms are a crucial element of user interaction on websites, and mastering their design and functionality is essential for any web developer. In this chapter, I’ll be diving into:

  • Creating and styling forms
  • Understanding form elements and their attributes
  • Enhancing user experience with well-designed forms

I look forward to sharing more insights and learnings as I progress through this next chapter.

If you’re new to coding or looking for great resources, I highly recommend checking out freeCodeCamp. It’s a fantastic platform with structured courses that guide you through learning web development step by step.

Stay tuned for more updates, and feel free to share any tips or resources you think might be helpful. Let’s continue to learn and grow together!

Happy coding!

Top comments (0)