The only way to improve your CSS game👩🏾‍🎨

Sarthak Sharma on June 24, 2019

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 y... [Read Full]
markdown guide
 

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.

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.

 

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.

 

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

 

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.

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.

 

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.

 

That’s so dope man. Will check it out for sure. 😊

 

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 !!!

 
 

VisBug is cool as it let's you copy and paste text from sites when they try to prevent copy and pasting!

 
 

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.

 

Thanks for this post! At the new project, I was assigned I've been needing a lot of upskilling in terms of design & layouts. Will be bookmarking this resources.

 

I’m glad this could help. Hope to see you grow. 😊

 

Love this! I always struggle with CSS :D
Thank you!

 

I always deliver this lil piece of advice, read the damned documentation (be it MDN or W3Schools), no other way around it if you really want to know what you are doing...

 
 

For me it really does not matter as long as you read them 😛

 

Not gonna lie, expected a lot more from this article...

 

Well, CSS isn’t that hard man. Just take the challenge and you can crack it or if you have some more suggestions to add, go head as

“ Half of the articles is in Article and half is in the comments section” 😉

 
 
 

That's interesting advice. I'll surely try this. Anyway, how to get the pictures/icons from the dribble design?

 

I would avoid being the "perfectionist." Too often people use that term positively, when in reality it's called "waste time/money chasing the perfect code."

There is no perfect code.

code of conduct - report abuse