Learn CSS Properly

Learn CSS Properly

CSS (Cascading Style Sheets) are used by web developers to style websites.

When I started learning web development I was very confused about CSS. The most difficulty I had was in both remembering properties and maintaining my code. In this article I will help beginners avoid the mistakes I had made while learning.

1. Practice
Programming is something you can't fully memorize. It's all about understanding it by practicing.
While I was learning CSS practicing it was a bit hard because I can't memorize things very well. I tried to avoid the "copy & paste" because I thought it would ruin my skills. At the end I did ended copy and pasting CSS code. Now I am not saying that copy and pasting would make things better. But if you try to understand what's happening when you run your copy and pasted CSS code. It will be way better than memorizing CSS properties.

(For Example) If you wanted to style a button round and black with white text and wanted it swap background and text colors when hover. You could past a block of CSS code that did exactly that like:

.myButton{
   border: 2px solid;
   border-radius: 16px;
   background-color: #000000;
   color: #ffffff;
}
.myButton:hover{
    background-color: #ffffff;
    color: #000000;
}

Without understanding what it does it won't help much.
If you understand that:

• border: 2px solid; added a 2 pixel solid border to the button,
• border-radius: 16px made it 16 pixels rounder,
• background-color: #000000; made the background black,
• color: #ffffff; made the text white, :hover,
• background-color: #ffffff;
• and color: #000000; makes the background white and the text black when hover.

You will be able to code a button next time without needing to copy paste and even better you will have basic understanding of border, border-radius, background-color, color and :hover and will be able to use it on more than just a button. This is why you should understand the code that you copy paste.

Recourses:
Where you are copy and pasting code from also matters. As you will need good explanation of code as a beginner.

There are a lot of sites that do this job well but I'd recommend:

1. Geeks For Geeks:

GeeksforGeeks is a leading online platform that provides computer science and programming resources to millions of developers and technology enthusiasts worldwide with a vast library of courses, offline classroom programs, tutorials, articles, coding challenges, practice problems, & much more.

This platform gives code with good explanations and it is my personal favorite.

Visit GeeksForGeeks

2. W3Schools:

W3Schools is a school for web developers, covering all the aspects of web development: HTML Tutorial. CSS Tutorial. JavaScript Tutorial. PHP Tutorial.

This website is also pretty much same as "Geeks For Geeks". But the explanation technic is different so it depends on if you're comfortable or not.

Visit W3Schools

Code Maintainability:
While learning web development the second most annoying thing was my CSS code getting too big. It was getting hard to maintain CSS code for a complex website project. Well thanks to frameworks like TailwindCSS you always don't have to write raw CSS.

TailwindCSS:

Tailwind CSS is an open-source CSS framework. Unlike other frameworks, like Bootstrap, it does not provide a series of predefined classes for elements such as buttons or tables. Instead, it creates a list of "utility" CSS classes that can be used to style each element by mixing and matching.

TailwindCSS makes CSS codes like our previous button example:

.myButton{
   border: 2px solid;
   border-radius: 16px;
   background-color: #000000;
   color: #ffffff;
}
.myButton :hover{
    background-color: #ffffff;
    color: #000000;
}

Into classes like:

border-2 rounded-md bg-black text-white hover:bg-white hover:text-black

That can be added to your HTML Button Element like:

<button class="border-2 rounded-md bg-black text-white hover:bg-white hover:text-black">Click Me</button>

Upon other frameworks like ReactJS I'd recommend TailwindCSS for beginners. It's much easier to learn and used in production. It makes your CSS code much Maintainable. You can also use it with ReactJS increasing your code efficiency and maintainability. TailwindCSS also have docs with very detailed and easy to understand code explanations.

Visit TailwindCSS

Conclusion:
While learning CSS might be difficult but practicing it frequently while understanding it will help a lot.

Don't just copy paste the code but also understand what it does as it is the correct way to learn CSS.