Hello and welcome to a brand new series that I'm going to be starting. The point of this series is to reimplement fundamentals in different development tools. I will be outlining the journey I took to learn web development up to this day with the hopes of inspiring more developers or assisting anybody struggling with certain aspects of the web. I'm also using it to strengthen my programming/web development fundamentals. This specific series will be a guide to learning CSS, with this particular article being the roadmap that I took.
Completely new to CSS
If you are entirely new to CSS, I recommend going over to freecodecamp and at the very least taking their Basic CSS series within the Responsive Web Design cohort. If feeling inspired, it would help finish the whole cohort, but Basic CSS would do. This was literally my very first introduction to web development. Being able to directly see what I was doing all in one screen alongside directions provided me the much-needed feedback and encouragement to want to do better and create better things.
After Basic CSS
This is the step where you should definitely apply some of the knowledge you gained from basic CSS. To do that, you should create some simple projects. Nothing fancy, but more so just to work on the muscle memory and get an idea of how CSS works outside of a controlled environment like a online tutorial with a built-in code ide.
Here I have a list of images to replicate using HTML and CSS, mostly from basic CSS. If ever you get stuck, do not hesitate to google the same question that is haunting your progress in the mini-project.
Building on Muscle Memory
So after you have got your feet with implementing styles to web pages. It is now time to take a deep dive and fundamental approach into CSS. The next step I took was going over the tutorial from internetingishard.com.
I highly recommend internetingishard because of its clean interface, excellent easy-to-read explanations, practical approach to CSS and HTML if needed, and best practices for styling. I will admit that although freecodecamp is a great resource to get started with, it does not show best practices to take, and a lot of it is hand-holding.
More Practice
After internetingishard or when you go through this tutorial, I recommend building a few more projects to further build that muscle memory and solidify your general knowledge of CSS. The road I took was completing the Responsive Web Design Projects from freecodecamp. All five of them. Cloning your favorite websites can be great as well. Or you can take a look at some of the examples in the list below.
Google Home Page
PluralSight Sign in form
PluralSight Order Summary
100dayscss
The fourth item is similar to 100daysofcode. In this case, the focus is on CSS and styling rather than any form of coding.
References
The best reference I have come across are:
Css-tricks is excellent because of its in-depth blog-style articles. At the same time, w3schools is great for referring to any specific problem you have with CSS and want to implement the feature into your project. To this day, I come across w3schools and still pick up on something new. It's great to have on your side.
Consistency
This is the guide I took for general CSS knowledge. After this, you can take many paths to specialize in something specific like CSS artwork or animations. Those require much more in-depth learning of those categories along with creative imagination. I wish you all luck; If you are starting to learn CSS, it might seem complex and challenging at first, but it can become second nature to you and your coding skills with time and daily practice. Until next time.