3 things that made my CSS Better
Hey there, fellow web developer! If you're anything like me, you know that mastering CSS can be a bit of a challenge. In this article, I'm going to share three tips that have helped me improve my CSS skills and create better stylesheets.
Whether you're a beginner or an experienced developer, these tips are sure to come in handy and take your web development projects to the next level. So, let's get started!
I struggled with CSS and one thing I remember, I could not even code a simple div for an element with some specified margin :p, that's how bad I was!
But there are certain steps you can take to improve your CSS code and solve the website design problem more efficiently, here is a 3 step framework to up your CSS game!
Using Flexbox and Grid
Building with VanillaCSS
Moving to frameworks
1. Using Flexbox and Grid
Back in my newbie days, I started using CSS and building landing pages without any knowledge of Flexbox and Grid, and it was a disaster!
Shortly, I came to know about Flex, CSSGrid and properties that help us position elements on the webpage with easy concepts instead of mastering positioning or tables :p.
I have a few resources for you to not only learn but practice to get a good grasp of what it does exactly:
These are all the important resources, and the ones that I used to learn Flexbox and grid. You can also refer to youtube tutorials but don't forget to practice on your own.
2. Building with VanillaCSS
What is VanillaCSS? Nothing, but just pure CSS, without any frameworks like Bootstrap or Tailwind.
I see many people doing the mistake of hopping on frameworks before even mastering pure CSS.
Sure, frameworks are amazing if you want speed and to decrease the complexity of your application/page, but not building enough landing pages with HTML & CSS will do more harm than good in the long term.
What I suggest is that you build some landing pages with HTML and CSS, and once you get pretty comfortable with the basics and know what property is working when, and how? You are good to go on to the next step!
3. Moving to frameworks
The exact opposite of the point I made earlier.
Once you have got a good hand on building with pure CSS and practised all the important concepts you need to, it's time to work with frameworks now.
You can choose many of the available frameworks and work with the one that suits you the best, I personally like TailwindCSS because of its super useful docs and customization.
I have worked and used Bootstrap too, but it doesn't have much space for customization but is very good for fast development and saving time on components that you don't want to code by yourself.
Conclusion
To sum up, learning and mastering CSS can be challenging, but by following these three steps, you can take your web development projects to the next level! Firstly, it's important to get familiar with Flexbox and Grid, which are powerful tools for positioning elements on a webpage.
To help you with this, there are plenty of resources available online, including tutorials and practice exercises. Secondly, it's a good idea to build some landing pages using VanillaCSS, which is just pure CSS without any frameworks.
This will help you gain a solid understanding of the basics and get comfortable with different CSS properties. Finally, once you've gained enough experience with CSS, you can move on to using frameworks like TailwindCSS or Bootstrap to speed up development and save time on repetitive tasks.
With these tips, you can improve your CSS skills and create better stylesheets with ease!
Let's connect on Twitter if we haven't already: