I have been mentoring developers since 2013, and I can never stop putting emphasis on how important mastering HTML and CSS is if you want to make your career in the World Wide Web. It's been 6 years now and CSS is more powerful than ever. Thanks to Javascript, now you can make desktop and mobile apps as well using HTML and CSS, and that makes learning CSS even more important. Despite that, so many devs I know are either afraid of it or just not interested in learning it. It's no surprise then that memes like this one are a staple in the Dev community 😃
I recently conducted a poll on a Telegram Group Dev.to I created, where I share important dev resources (do check it out btw). The results were as follows:
More than 60 people out of 100 actually want to improve their CSS. That's a huge number. That's why I decided to write this article. I'm also going to share some helpful tricks that I share with my juniors. So let's get started.
Be Sure About it 🤔
Well yes, the first step of taking one step forward is actually taking one step back. You have to be very clear in your head that you want to master it. Learning the basic concepts is not that hard, but things get hard quickly when you want to bring in perfection. To be a run-of-the-mill fullstack developer, you just need to know the basics. But if you want to be a BADASS FULLSTACK NINJA, you gotta be a perfectionist. 😎🐱👤
If you have decided to a badass fullstack ninja, remember that Rome wasn't built in a day. You will have to practice daily on it. But I assure you that if you do this, you will be one; and I know this because I have seen people transforming and evolving with every single day of practice.
Be a hunter-gatherer 🗄
Curiosity helps you discover wonders and the same is true for learning CSS. Every day, we visit dozens of websites, made by top achievers in their fields. It's like free master classes. The CSS code is very easy to peek into and learn from. In my initial days of learning, that's how I used to learn about new CSS properties. So every time you see something cool on a website, just inspect it using your Inspect Element tool.
Once you've hunted some Properties and Tricks, the next step is to start gathering it by making snippets. No matter what code editor you use, they all either have a built-in feature to save snippets or you can achieve it using a plugin. If you use VS Code, check out this article.
Take the Dribbble Challenge 🏅💪🏼
I love Dribbble, it's a great source of inspiration when you are stuck. But in my team, it's popular for one reason "The Dribbble Challenge". The Dribbble challenge is very simple: find someone who's good with CSS or Design (if you don't know one, tweet me anytime @sarthology ). They will randomly choose a design from Dribble and give it to you for practice. Your task is to try and replicate it, and go as close to it as you can using just HTML and CSS. Then take a screenshot of it and send it back to that friend. Then your friend will give you a score of anywhere between 1-5 on the basis of how close you got to the original design. Do this daily for the next 30 days. I gave this challenge to one of my colleagues and it helped her greatly. This was her submission for the 7th day of the challenge.
Crazy. right? But I gave her 3.5/5 as I noticed a few things were still not like the original design. The one thing that you will learn from this challenge is the most important part of being a good CSS Developer, and that's Respecting the Designer's Work. Your job as a developer is to do justice to the design given to you by the UX/UI designer. It should be exactly the same.
That will technically help you with two things:
- This will promote the development of a good design sense in you.
- This will start your journey to explore more CSS properties in order to get the job done.
Don't leave Devtools 🏃🏻♂️
This the first mistake I see devs usually making. They keep shifting between their editor and browser. Not only is this counterproductive, it is also frustrating as hell. Here is a fun fact: I write 90% of my CSS code in Devtools and it's freakishly fast. Devtools are so powerful that you just need to go to editors to write your HTML skeleton. So the next tip to up your CSS game is mastering Devtools. Here are a few great resources to get started:
- DevTools for Designers - CSS Tricks
- Firefox DevTools for CSS authors - Log Rocket
- Better CSS Coding & CSS Debugging with Developer Tools - LearnCode.academy
- 14 Firefox Developer Tools You Might Not Know About - Envato Tuts+
Don't miss out on the new stuff 🧐
CSS is improving day by day. There is always something new coming up. It's better to keep your eyes open in case you stumble upon a gem. Remember what we talked about? Be a hunter-gatherer! People can make insanely amazing things with just great CSS, and no matter how many times you see one of these, it always blows your mind. You just wanna go, "How the hell did they do that in CSS?" We should aspire to reach that level, and there are few great websites to follow if you wanna do that:
Contribute to Open Source
As odd as it may sound, it's important. Once you are confident enough that your CSS skills have greatly improved and you have gained your super badass ninja status, you need to rush to Open Source projects, because With Great Powers Comes Great Responsibility. Those projects need you!
Not only will this help you elevate your skills even more but it will also help the OS community at large. Many good Open Source teams are constantly in need of a developer who can handle CSS well. This will also help you in polishing your design sense and develop your own artistic style, as you know, any great product requires a dash of creativity of your own. Many great Open source tools lack good design. Go and hunt a few such good products on Github, Fork them, add your CSS, and submit your Pull Request.
May the Source Be with You.
In the end
If you follow all the tips mentioned in this article, your CSS will improve drastically in 60 days or less. I know this for a fact as I have seen it work for countless devs I have mentored over the years. It will be a slow process but totally worth it, and it will be infinitely better than simply complaining how bad you are with CSS for the rest of your career. I also recommend you guys to check out CSS Battle and challenge other devs because why not? 😃 That's it from my side, guys. If you know some cool tools or resources you want to share, the comment section is all yours to glorify. See you next time, folks. Happy coding!
