I just want to share with you guys what I learned about CSS. I have been struggling to master CSS especially to design a responsive layout. Here are some of the tips I found to be useful and some resources.
- Have a complete design
- I used to think about designing as a waste of time. I designed whilst writing my code and it was chaotic. It took me more time than it really does when you design. Please save yourself time by drafting a design. There are many design prototypes tools out there and my favorite is Adobe XD
2. Write your HTML and name your classes and ids
I found this step to make your life easier before writing any CSS. You will have a clear picture of how your elements integrate with each other. Pay attention to class naming, you should have some sort of format. Don't just name meaningless names especially if it is a big project and you are working as a term
3. Declare variable
Declaring variables will save you a lot of time if by any chance you decided to change your variables. For instance, you want to change your primary color, instead of changing it throughout the project, you will only change where you declared your variable. I think SCSS is way better to use than just CSS when it comes to declaring variables. Variables can be colors, sizes, fonts
4. Style repeating elements
Since you have your design you can style the elements which are repeated throughout the design . for example buttons, inputs, forms, text
5. style the layout
I think having to style the layout positioning of elements first is very key. Some people say styling mobile-first layout is a better option but I prefer the desktop approach
6. Positioning, Grid system, and Flexbox
These are the backbone of the CSS and if you would master them you will be a pro. Take your time to learn them. Practice as much as you can. There are many learning resources out there. I advise to code along with youtube videos
7. Lastly, I found this very helpful to me, I use the border style to see the width and height of the element I am styling
Happy Coding !!!