DEV Community

Cover image for CSS: From Zero to Hero

CSS: From Zero to Hero

Ali Spittel on January 29, 2019

CSS defines the way things look on your websites. HTML is your content, JavaScript adds interaction, but the appearance comes down to CSS. CSS is s...
Collapse
 
arximughal profile image
Muhammad Arslan Aslam

This article describes everything I spent almost one month to teach a junior developer at work. The best of Ali 👏👏👏.

Collapse
 
deathspell5 profile image
Deathspell5

Hey, Im a bit late, but also confused. CSS is not something you should know before getting the junior developer job? Im asking because I myself want to become a front end developer and get a job as a junior developer, but I thought one needs to know html,css and javascript before applying for a job.

Collapse
 
perpetual_education profile image
perpetual . education • Edited

There are a lot of Senior developers - who can barely write basic CSS.

Collapse
 
alephnaught2tog profile image
Max Cerrina

👏

One thing I always like to mention with CSS too is pick your HTML elements for semantics, then style them with the CSS how you want. A super common example of this is using different the different header tags -- use an h2 for where you are in the document/outline of content, for example, not because you want something about that size, etc, use tables for displaying data, etc etc; you can do so much with CSS that there's no reason not to use it to its full potential to style those semantic elements however you want.

Collapse
 
squidbe profile image
squidbe • Edited

that way CSS knows we are looking for a class named center instead of an element!

Ha, you just took me back nearly 20 years -- I had forgotten there was a <center> element. Interestingly,

it still works!
😀
Collapse
 
rhymes profile image
rhymes

Great tutorial Ali! I didn't know about the fr unit at all, thanks!

I read this tutorial to make up for it.

They make developer lives so much easier :D

Collapse
 
dirkncl profile image
Dirk Levinus Nicolaas

Liquid syntax error: 'raw' tag was never closed

Collapse
 
aspittel profile image
Ali Spittel

Hey, I wouldn't suggest this method for a couple reasons:

  1. it's going to be less performant than writing CSS in the first place, and it will likely either block page loading or create a jump in styling once the styles are applied.
  2. the separation of concerns. It's usually best practice to separate out your code into different files for HTML/CSS/JS so that you don't have one really long file to look through, plus then you know where to go to debug an issue with one of the pieces!

CSS in JS is a valid thing, but I would use a library built for that so that your code is more performant and follows best practices!

Collapse
 
pvw_nl profile image
Peter 👨🏻‍💻

Hi Ali, Dirk,

I think you've missed a very important argument why you shouldn't do this at all. What about a client ho has disabled javascript (because reasons)? He/she is able to see your page, but with the wrong styling.

JS is good for doing the extra mile, please use CSS for the things it was intended. We can even make animations and transitions with CSS today!

Good luck :)

Collapse
 
joeberetta profile image
Joe Beretta

Very useful post. Thank you. By the way, I found that link "140 colors with names" is broken. Hope you will fix it) Good luck

Collapse
 
aspittel profile image
Ali Spittel

Great catch, thanks! Should be good now!

Collapse
 
joeberetta profile image
Joe Beretta

Ali, do you plan to do cycle of posts like "from zero to hero"??? I love it and think it would be helpful for me and others, who is new one for webdev

Thread Thread
 
aspittel profile image
Ali Spittel

Thanks!! Maybe -- I have done one other like this -- my react guide. They take 20+ hours to make, so definitely not an every week type thing, but I have fun making them!

Collapse
 
stojakovic99 profile image
Nikola Stojaković • Edited

As someone who works as a back-end developer I always rolled my eyes whenever I had to do something on the front-end (especially if it had something to do with CSS). After discovering Flexbox it's definitely no longer the case. Your article reminded me that I haven't tried CSS Grid yet, now I'm even more interested to check it out! 😁

Collapse
 
drylabrebel profile image
Geoff English

{pre-read comment} - This looks like exactly the kind of thing I've been looking for. A simple intro to CSS syntax and what it's used for! Thanks so much, can't wait to read it!

Collapse
 
rolandixor profile image
Roland Taylor

Not sure if this would meet your criteria for inclusion, but a useful (relatively recent) feature of CSS that everyone should be using more:

developer.mozilla.org/en-US/docs/W...

It will save the children of the next generation from preprocessors! :)

Collapse
 
lauragift21 profile image
Gift Egwuenu

As always great post Ali! 👏👏

Collapse
 
dkassen profile image
Daniel Kassen

This is a great post. I learned a lot really quickly. Almost can't even.

Collapse
 
jdmedlock profile image
Jim Medlock

Well done!

Collapse
 
rupeshiya profile image
Rupesh Krishna Jha

Great one @Ali, Thanks for sharing .

Collapse
 
bananabrann profile image
Lee • Edited

Beautifully done guide on CSS! Very thorough, yet super Barney. I’ll definitely be linking this blog to any CSS newbies I meet!

Collapse
 
monfernape profile image
Usman Khalil

Thank you Ali for wonderful explanation

Collapse
 
godwin_france profile image
Saharan-sub

Between HTML and CSS, which these two is responsible for segmenting the webpage?
For example, I want the page to have a left and right side bar.

Collapse
 
mihir9376 profile image
mihir9376

Thanks For The Amazing Tips :)

Collapse
 
sloan profile image
Sloan the DEV Moderator

Unwelcomed advances is considered harassment and absolutely not aligned with our code of conduct.

Collapse
 
keomamallett profile image
Keoma Mallett

This was very helpful! Thanks a lot.