CSS is not your mate; a common-sense guide to proficiency.
Introduction
It's no doubt that it can be particularly daunting to learn a new skill, especially one as famous as CSS. Anyone with about a 10-percent understanding of how CSS works can quickly point out how hard and frustrating CSS can be. Hence the title of my blog post; the title is predicated on the notion that what you don't know is older than you. CSS is not your 'mate' if you haven't understood it well enough and you're trying to do stuff with it.
It's not enough to complain about the seeming difficulties in CSS. We must rather be strategic in our approach to the tech. So how do we go about it? But before then let me tell you about my journey briefly.
I started learning CSS a few months ago. Learning several properties and trying to wrap my head around the whole concept and how they work together. This blog is not to get into any specific CSS property. However, I have had my fair share of headaches and frustration from the tech.
But I went about it in a more strategic way that helped me pretty much able to attempt any UI(user interface).
Is CSS that hard?...
Oftentimes, developers ignore CSS, and when they want to style a particular UI, they try to do it, but they keep hitting their heads on the wall. The newbies, likewise, are trying to do so much without practicing.
Finally, how do you go about it...?
Learn, Practice
This is particularly for folks just learning CSS. There is so much to learn, and the truth is, you can quickly become overwhelmed and equally engrossed in video after video and tutorial after tutorial. This in itself is not bad, you would only have the feeling that you're learning, but you're not. You only know what can be done.
Your approach should be to learn a simple concept, e.g., box model, position, transform, etc. Then practice it. Watch only videos and tutorials relating to that specific property until you understand it. Having done that you can then add more concepts.
Kevin Powell's example.
I struggled with understanding how to properly set up the layout of a particular website, and it was a challenge for me. I was referred to this free layout course by a friend of mine. This was the approach used by Kevin Powell in his course
He teaches you a particular concept and then sets challenges for you to do based on what he has taught you. Oftentimes, developers want to become pros in a day, YET, the course is not rushed. Kevin stretched the course into days to gain mastery of particular concepts, per time. Note: You are to code this particular challenge from scratch.
What I often find out in my attempts at these challenges is that I haven't understood the concept. I am then forced to go and rewatch and probably check other material. Then I try it out again.
add more concepts...
When you feel comfortable (note: not perfect), you can add another concept or CSS property. Don't be learning so much at the same time without practicing them.
The Danger of follow-along tutorials...
The danger of follow-along tutorials in one word is that students are often carried away by the simple fact that the code is working.
Most of our videos on YouTube and other learning platforms e.g. udemy are based on this model. I must mention that there's nothing bad about this approach. However, as said earlier, if the student ends up being carried away by the fact that everything seems to be working. The truth is he/she might not be able to replicate that code in some days if asked to do the same.
A practical example
I started an advanced CSS course on udemy by Jonas. While building along with him, he made use of a CSS property I had no idea existed, which is a clip-path polygon. He did all the calculations, and I input the code, and it worked. I was happy and I moved on. And truth be told I barely understood what was taught. A few days or weeks later, I was going through one of the frontend mentor projects I worked on, and I realized a place I could apply what I learned, only for me to be at sea. I had to go back and check the code and try to read some more about it.
The practical lesson here is, when you are learning how to code from a udemy course or a particular video try to play around with it before moving on. Don't just copy what was done. You likewise, try it out, change the value, and ask the question, "Why?" How come ?, What if? Be curious, don't just be happy it's working. Play around with the CSS rule or values.
In conclusion,
Learning CSS requires a lot of hands-on, don't be comfortable gathering information. It's not a purely academic endeavor. You have to practice again and again while you learn.
Thank you for reading ♥️. Don't forget to like and comment.
Feel free to reach out on Twitter if you need any guidance further.