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

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

 

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

👏

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.

 

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

 

I am in the stage of still learning and more inclined to want to unite the styles in the javascript program packaging:
example:

var div1 = document.createElement ('div');
div1.style ['background-color'] = 'orchid';

or

div1.style.backgroundColor = 'orchid';

or made like this and placed on the head:

    window.onload = function () {
      var StyleContent = {% raw %}`
        div {
          height: 200px;
          width: 200px;
          border-radius: 50%;
          display: inline-block;
        }
        .keyframe {
          background-color: orchid;
          animation: infinite 2s bounce;
          position: relative;
        }
        .transform {
          background-color: lime;
        }
        @keyframes bounces {
          0% {top: 0px; }
          60% {top: 100px; }
          100% {top: 0px; }
        }
        .transform: hover {
          transform: skew (7deg, 15deg);
        } `{% endraw %};
      
      var styles = document.createElement ("style");
      styles.textContent = StyleContent;
      document.head.appendChild (styles);
      / ********************************** /
      var div1 = document.createElement ('div');
      div1.setAttribute ('class', 'transform');
      div1.innerHTML = 'hover over me!';
      document.body.appendChild (div1);
      / ********************************** /
      var div = document.createElement ('div');
      div.setAttribute ('class', 'keyframe');
      document.body.appendChild (div);
    }

  

I am a traditional and natural adherent to making javascript programs. This means that I only use native javascript language and try not to use libraries or frameworks.
The tools I have are Notepad ++ and the chrome browser.
The current program is very confusing for me who is still in the stage of self-learning as a hobby.
But I survived to learn the original javascript because it was very exciting until the development of Bowser refused the original javascript to be the driving machine for the html page.

 

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!

 

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 :)

 

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

 

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

 
 

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

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!

 

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

 

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

 
 

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

 
 

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

 
 
 
[deleted]
 

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

code of conduct - report abuse