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!
Top comments (48)
Ah, I couldn't disagree more, for a number of reasons. For one, I've never in almost a decade met a designer who thought through all the possible use cases. Since we're developers, it's on us to think what happens if text is too long, number is too small, picture not perfect, and so on.
Then there's also the fact that web is inherently a completely different medium. A designer can provide, best case scenario, 3 different screens, but it's up to us to handle everything in between.
Pixel-perfect design is in the past, when we had to cater maybe 5 possible resolutions in 2 browsers. I'm not saying we shouldn't respect design - that's our job indeed. But it's also our job to first and foremost convey the idea behind it, not pixels.
I do all my own design and developing. That said, even I make changes between my initial design to my final bit of development.
Don't be a slave to the designers original design; instead create what makes sense in the design and talk to the designer about the rest of it. If the designer does not know or only knows a little HTML and CSS, they might simply be unaware of the possibilities available and the limitations inherent to the project.
am i angie is right, so remember to collaborate. There is no greater way to respect the design than to understand it.
FYI, if I ever post a design challenge, not contacting me is likely an automatic failure, unless, of course, the design is reinvented by the developer to improve functionality (aka, taking initiative). 100% will never be the result of pixel perfect anything.
Yeah I agree.
But in terms of "practice", I think it will be a good challenge for the developer to create the frontend as similar as the design.
But in real life, yeah, pixel-perfect design should only be enforced on components level. Even then, the designers should discuss first with the frontend dev, because in the end, HTML and CSS should run in browsers, not just in Sketch/Photoshop, and frontend devs are the one who know/deal with the browsers' antics
In these scenarios, Before making any kind of decisions, one should consult Designers. But I understand the situation if a UX/UI Designer is not in-house. But as Hendra stated for practice purposes I still advise that. As it's a good habit to follow the designer's lead while writing CSS and making changes in design. But again if your designer is not in-house follow your instincts.
Then they aren't good designers. I can code all of my designs to look exactly how I prototyped it. If a UX Designer hasn't thought through everything, read my first statement again.
That's great! Do you think it might be because you are designing and coding yourself (at least that's the way I understood from your comment), so there's less of broken telephone situation going on? Or do you cover all the possibilities for all the elements on all the possible screens in designs? If so, how many prototype screens does it take to convey everything?
I'm genuinely curious about this.
Since, you code your prototype yourself, you already know what is possible code-wise and what isn't. That being said, your prototypes must already adhere to the possibilities and limitations of what one can do in the web.
My thoughts exactly.
How am I supposed to work with the designer's pixel-perfect templates? They made the design on a 1080p screen, how do I replicate on other resolutions?
Obviously letterbox it :p
I did something like that like 10 years ago just to be snarky.
Nice article!C: I would also recommend learning the basics of design, UI and UX. Because this will make it easier on solo projects to have a clear mind and goal with the website/app that is being developed should look and feel like, and it shortens a lot the time of creation and levels up the overall design of the website/app
Yeah that’s right. If you have any resources for that. Go head.
I think hackdesign.org would be a great resource to follow in this regard
Thanks for sharing 😊
I'd argue that whether this is a good idea or not really depends on your workflow. Whenever I'm actually updating CSS for any of my projects, I've got multiple browsers open (usually at least Chrome and Firefox on the desktop, and often Chrome on my phone too) with all of them getting reloaded after each change so that I can see right from the beginning if everything looks right, and DevTools isn't exactly good for that type of workflow. Also, it kind of falls apart if you aren't writing vanilla CSS (say, you're using SASS or LESS).
I agree, but I think it helps beginners a lot while working only in Vanilla CSS. I think there are few tools though, using which you can edit SASS in DevTools. 🤔
If you use grunt to compile, you can have it generate source maps which webkit/blink inspectors will show in the style pane.
CSS is a vast and complicated subject, and part of the difficulty (I think) for developers/coders is that it isn't really programming, on the contrary, it's declarative. It works fundamentally different than a programming language. You write declarations and then "stuff happens". Sometimes it's what you intend to happen, often it's something else.
Another 'problem' with CSS is that it has a long history and as a result it has a multitude of ways to achieve (more or less) the same result. That can make it really confusing.
If I want to make a layout, do I use float, flexbox, CSS grid? Some features are now more or less deprecated or outdated (and not encouraged anymore), other things are so new that they're not properly supported in all browsers. Old features are never removed but new ones continuously added, which makes CSS grow bigger and bigger.
All in all this means it's a vast and complex subject.
Some things are simple and easy to learn (setting foreground and background colors, but even there you run into complexities and subtleties), other things are hard.
THE most difficult aspect of CSS, by far, in my opinion, is layout.
Somewhat embarrassingly, after all these years I still have trouble remembering how to get my 2 DIVs stacked on top of each other, or next to each other! Other example: you want to position an element "absolutely" relative to another element, you then have to make the parent "postion: relative" and the child "position: absolute". How intuitive is that? Not really intuitive, unless you have a firm grasp of what's going on "under the hood".
The way to make it simpler and more straightforward (I think) is to emphasize the more modern parts of CSS like flexbox, and to learn those first, and leave the more arcane 'legacy' features for later (maybe don't learn them at all if you don't need them). The more modern parts of CSS are generally better designed and more easily comprehensible. This makes learning CSS much less confusing.
Thx for the tips. I'm a junior front dev and I knew most of the links you shared but I really like the 30 day of CSS challenge based on Dribbble. That's a nice and fun idea to improve css skills. I'll try to do it with friends =). Thanks for sharing !!!
All the best for the challenge. Go nail it. 😊😊
Also, feel free to ask anything @sarthology
Cool, thanks!
I am definitely grabbing some links to look through :)
By the way, I am making a series on how to solve CSS Battle.
CSS Battle #1 - Simply Square
Olzhas Askar ・ Jun 4 ・ 3 min read
That’s so dope man. Will check it out for sure. 😊
VisBug is cool as it let's you copy and paste text from sites when they try to prevent copy and pasting!
Oh nice, Can you share the link too?
I would really like to know why it’s so hard for developers to understand. Today, I was debugging a resizable master detail view where after shrinking the master to zero, some elements from the master were still partly visible. I was fiddling around with overflow properties at different levels but fixing one issue created another. I mean, when I program I start with a test then implementation and so on until the feature is ready. But with CSS, it’s just messing around. It just doesn’t appear logical to me. Is there some resource like “CSS for developers”? I think I need to change the way I think about a problem, but how?
Well, with CSS you start with the structure. You need to pretty clear in your head about where you will use what, Where there will be a div and where there will a section. After that, if you are making a responsive design, go for creating the layout of the grid. Once that's done, then you write HTML for that structure.
Then finally you should jump to the CSS. In the beginning, CSS is all about messing around but once you are familiar with most of the properties, it will be a piece of cake. So, buddy, Keep Practicing. it's all logical.
really nice post, thank's a lot.
i'm a beginner at all things web dev right now. you suggest that i edit my css through the dev tools, but how would i transfer all that to my main code??
Do i just repeat all the steps again on the actual code css file or is there some tool to get the code from the dev tools?
A good tool for leveling up your css skills, is Desech Studio which is a nocode app for html/css.
It's great because you can see all the options the css can do when it comes to effects, backgrounds, border images, svg, etc. And the most important thing is that you know that everything you see there works on all modern browsers.