Photo by Niels Kehl on Unsplash
Roadmap to learn CSS the best way!
Learn CSS and get better at frontend.
Why do we exactly use CSS?
As we all know, a typical website consists of HTML,CSS, and Javascript. HTML decides the overall structure of the webpage, CSS decides the design and Javascript is used for the behavioral part of the website. CSS(Cascading Style Sheets) is very helpful in pleasing the eye of the user and grabbing his/her attention towards what we want.
CSS can get you frustrated like this many times-
There are so many things to learn in CSS, that even if you give it a year, still you can't call yourself the master of it. New properties, new stylings, new attributes etc. are a common thing in CSS. In this article, I will try to provide you a short but effective roadmap, in a way that will let you learn modern CSS the easy way. In the end what matters is execution, but you need to get hold of the basics in order to go towards the more complicated parts.
A short roadmap to CSS
While there are n number of roadmaps already present on the internet, no one gives it through a beginner perspective, what difficulties a beginner can face, what to do when stuck, and what not to do while learning. I will give you a practical roadmap that can not only teach you how to proceed, but when stuck, it will also give you a direction.
I will include some basic resources too with which you can go ahead in your learning journey. Let's get started.
The Roadmap/Guide:
1. Day by day division
If you are very new to web development and don't even know some basics of CSS, building websites, I will suggest you to start with getting a good knowledge/ building a foundation of how websites work, what is exactly front-end development, back-end etc, and go ahead with the roadmap below:
(Note: you cannot master CSS or any other technology in the world under X number of days and get a job)
Day 1 - 3 -> Get some basic idea about how styling really works, research about styling in the HTML itself, the src attribute, what things can CSS do, does CSS provide us with advanced functionalities or not? Get a hold of the concepts and then move forward.
Day 4-7 -> Till now you have a basic idea about what CSS can do, where to use it rightly, and how it affects the user experience, let's go ahead and learn about some important concepts like selectors, borders, margin, padding, and Box-Model. Take some references from different documentation. Want to learn Box-Model like a complete beginner? I made this for you -
Day 7-10 -> Now you have enough knowledge of how to select and style individual HTML elements, give margins and padding, etc. Go and learn about positioning and flexbox, grid layouts as soon as you can! The flexbox is an amazing tool to position different elements on your website and without any complicated margins and positioning! Want to learn flexbox the easy way? Check this out -
Learn flexbox as a complete beginner!
Day 10+ -> This is it! I believe you have followed through the path I told you and have got a rough idea about how website styling works and how it affects the user experience. You are now free to build websites and get to implement your skills now. I will suggest you start designing readily built templates from good websites and try to replicate the design yourself. I have added a list below where you can start your practice in CSS now!
List of coding challenge websites
Conclusion
This was an introductory guide to all those who are very new to CSS and are searching for a good beginners guide and not get into unusual dilemma. You can surely follow what I told and get a good understanding about how CSS should be approached. That was all for today's blog, will see you in the next one, until then bye bye 👋.