This post was originally featured on debugacademy.com.
I love beautiful things and I especially love apps and websites with beautiful designs and layouts. Even before I began learning about coding, I really enjoyed seeing clean and colorful animations and interfaces. I eventually learned that CSS is one of the major components of strong designs. That's why I LOVE CSS.
But recently, I’ve noticed that many developers don’t even like CSS and I pretty much feel the same way as Kelly.
We recently covered the basics of CSS in my Debug Academy course and I started thinking about how I felt when I first started learning CSS. That’s when I realized that I didn’t always love it. In fact, it seemed to confuse me at the beginning. So I asked myself, what made the difference for me? What made me fall in love with CSS?
Now I know it was the resources I used to supplement my learning. I’ve used lots of different tools to help me begin truly understanding CSS and I want you to be able to do the same thing. So here are 9 tools that helped me fall in love with CSS. I’ll divide these tools into three categories: Games, Reference Websites, and Inspiration Websites.
Games
I usually think of language learning or memorizing European flags when I hear the term gamified learning. But the 3 CSS games I’m featuring in this post have convinced me that gamified learning is a great way to learn new web development topics.
1. Flexbox Froggy
I. Love. Flexbox Froggy!!! I found out about this really cool game on Twitter. At the time, I was learning CSS Flexbox and I was having a hard time really grasping key concepts. Then someone tweeted about how they had used Flexbox Froggy to learn CSS Flexbox. So I decided to try it out. I went back to this game recently when Flexbox was covered in my Debug Academy course. If you want to learn Flexbox or brush up what you already know, try this one out.
2. Grid Garden
Grid Garden is actually created by the same people who made Flexbox Froggy. I found out about this one on Twitter as well. I used it to supplement what I was learning about CSS Grid on freeCodeCamp at the time. I use Grid and Flexbox all the time when I’m creating website layouts. So shoutout to Codepip for creating these two super awesome games. I wouldn’t be where I am now without you.
3. CSS Diner
CSS Diner is all about CSS selectors and specificity. This is a topic that confuses a lot of people, even some experienced web developers. So I certainly was no exception. I had struggled with understanding selectors for a while. I just ignored it and hoped I would eventually understand it. I can’t remember how I came across CSS Diner but it really helped me understand how specificity and selectors work and how they can affect how your CSS comes out. And as an added bonus, this game is really fun and well designed.
Reference Websites
Reference websites are a great place to go when you’re not exactly sure how a certain property works or when you want to create a new effect with CSS and you don’t know how to. I’ll be discussing some of the websites that absolute beginners usually don’t know about.
1. CSS-Tricks
Just like the name says, CSS-Tricks provides a lot of information about CSS. This website covers some of the more nuanced features of CSS and even has some articles and guides that cover other web development and design topics. I really like the article, A Complete Guide to Flexbox. Check it out to get a taste of some of the great content CSS-Tricks has to offer.
2. Smash Magazine
Smash Magazine is a great resource for Web Development and Web Design in general. But I’ve found their articles on CSS especially useful. I really like Rachel Andrew’s work. She makes a lot of beginner-friendly articles on CSS so I definitely recommend that you read some of her articles.
3. Design Modo
Design Modo is an awesome website. It’s got articles on all things design (obviously). You can learn more about Adobe Photoshop, UX Design, and more. I mostly turn to this website for their CSS Tutorials. This is also a great resource for keeping up with design trends and new industry standards. And they even have a section for design inspiration!
4. Debug Academy
Debug Academy is a web development program that focuses on Drupal 8. They also teach in-demand web development technologies like Git, HTML, SASS, and of course, CSS. I've been taking Debug Academy's course since May and I can honestly say that my CSS skills have gone to the next level. If you're not willing to commit to their paid course just yet, no need to worry. Debug Academy offers beginner-friendly HTML/CSS tutorials in their newsletter. You can subscribe here.
Inspiration Websites
Sometimes you might have a project idea or assignment you have to complete. But when you think of how you want your new site to look, your mind draws a blank. This happens to me all the time. This is where inspiration websites come in handy.
1. Code Pen
What people create on Code Pen with CSS never ceases to amaze me. People create some really cool illustrations and animations using mainly CSS. Code Pen is a great place for getting an idea of what’s really possible with CSS. You can also find some cool layout ideas for landing pages and the like.
2. CSS Winners
This is a website I recently discovered. I was in search of some design inspiration for my portfolio website (that I have yet to finish🙃) and I found CSS Winners through a Google search. What I love about CSS Winners is that a lot of the websites they feature don’t have layouts and designs that seem completely unattainable for a beginner. When I was looking through some of the featured websites, I didn’t feel overwhelmed or out of my league. So I definitely think this is a great place to go to when you’re short on design ideas.
Conclusion
CSS can definitely be frustrating sometimes. But it’s not completely unlovable. I love CSS and I think you can too if you give some of these resources a try. As always, feel free to leave some of your favorite CSS resources in the comments.
I'll be creating some of my own CSS tutorials in the coming weeks. Also, I made a post featuring some of my tips for taking online courses. Check it out and leave some feedback. I'd really appreciate it.
Top comments (2)
I find CSS intimidating at times. Maybe I do not have the knowledge or just enough skill built up after 5 years of web development but I still seem to stutter on the simplest things in CSS.
Anyway thank you for the post, bookmarked!
I’ve been working with CSS for almost 3 years now and I still have to look up simple things. But resources like these have REALLY helped me. I’m so glad you enjoyed!!