Learn to Work with CSS

CSS

Back to table of contents

Learning to use CSS is not about memorizing all properties or techniques. But it is about knowing how to combine different properties to work together.

In this lesson, you are going to learn to understand CSS, so you can use it as a tool to enhance your HTML website, not destroy it.

Learn web accessibility

By learning web accessibility, you will know how to style your website correctly. Without the knowledge, you have complete freedom to style your website however you want. But when you want to do something good, you will get confused. How do you know that your styling is usable for people? Learning web accessibility helps you know the good and the bad styling.

Imperfectly copy a website you love

Copy like an artist.

You may have heard, "Steal like an artist." But I prefer saying, "Copy like an artist." This means you copy existing works and add something new.

One of the best ways to learn how to write good CSS is to copy an existing website that you love. This means you write your own CSS to get a similar result (or even a better result) from the real website.

In the past, I copied Netflix's homepage. I successfully did that, although I needed to watch some video tutorials from YouTube. But that was okay because I was learning, and the result was never published publicly.

I recommend learning to write CSS from buildexcellentwebsit.es. It is a great website, and the stylesheet is fairly easy to understand. Try rewriting the CSS to get a feel for how the experts write and structure their CSS. After that, copy the stylesheet like an artist.

Through this method, you learn that you can get the same result with a different stylesheet, and you learn to write CSS at the same time.

Make a personal website

Having a personal website is not a mandate. You can choose to have it. But I recommend making a personal website on your local machine. You have a personal website, but you do not publish it.

Having a website that you take seriously, but without any negative consequences if you mess up, is a great way to learn any web technology, including CSS. You want to have some level of seriousness because you may decide to share it with people in the future. But you do not want to feel anxiety because of the fear of judgment. Simply, you want to have a safe playground to learn and get better, and making a personal website on your local machine is a nice place to start.

Accept your ugly designs at first

You will make ugly designs. You will write messy stylesheets. You will make mistakes.

Keep in mind that every professional person still makes mistakes. You can gather the evidence by looking at things around you. Have you ever seen a typo in a novel? Those novelists are professional writers, but they still make mistakes and, even worse, publish their books and make money from them. But with all the mistakes, people will not immediately throw away the novel. In web development, take a look at The WebAIM Million. You can bet that those websites are developed by professional people. But the websites still even have silly accessibility issues—empty links and empty buttons. If a pro still makes mistakes, what can you expect from a beginner?

Remember, developing a good-looking website is about iteration, and in each iteration, your website becomes better and better.

Write CSS freely

Write messy CSS code with lots of redundancies, lots of commented code, inconsistency, try and error, and probably going crazy. But do not publish such code.

Accept awkwardness

When learning new things, expect yourself to feel awkward because you are doing something new.

Through repetitions, the feeling will fade away, and another feeling will come. What do you feel when you finally figure something out? You feel happy and excited.

Next lesson Learn Programming through JavaScript