My experience with CSS first started when I was trying to style my very first non-functional ugly-looking login page. Since then, I learned a lot about writing functional well-organized CSS code. All web-developers need to be good at HTML/CSS, but they don't have to be experts.
Here are some of my ideas that will get you and going with writing good CSS.
Before we get started, shout out to Microverse For giving me the chance to go deep on things that I took my knowledge on for granted, like how to write good CSS.
A well-structured HTML document is your doorway to write good CSS.
The most common problem that programmers face when writing CSS is that they don't have a well-structured HTML document and therefore have issues with positioning and styling elements.
Reset CSS is a short set of CSS rules that resets the styling of HTML elements to a baseline, removing the browser's default ' User-Agent ' CSS stylesheet. This way you won't have to worry about the default stored attributes when starting to style your website.
There are a lot of Reset CSS stylesheets out there like the one from CssReset.com or the one from meyerweb.com. But, I would recommend that you create your own by making a template stylesheet that groups all the HTML tags that you use.
You can also copy one of the stylesheets that I mentioned and delete all the HTML tags that you don't use.
While CSS is a language that we sometimes take for granted, it is Powerful and has many nuances that can help (or hurt) our designs. Here are 30 CSS Best Practices for Beginners that will keep you writing solid CSS and avoiding some costly mistakes.
Developer tools or Devtools for short are A set of tools that exist in every browser that You can use to edit your code on the fly and see the changes immediately without needing to change the code on your local files. To open dev tools, Press CTRL+SHIFT+C (for Windows) and OPTION+SHIFT+C (for iOS) on your keyboard if you are using Google Chrome or Mozilla firefox. If you are using Safari CTRL+SHIFT+C (for Windows) or CTRL+OPTION+C (for iOS),
You will open DevTools in the Elements panel. Then hover over the element to highlight it.
If you are new to design (just like me) you might have heard about Sass but you might not be up to speed with exactly what Sass is, in short Sass is a CSS preprocessor, which adds special features such as variables, nested rules, and mixins to regular CSS.
Last but not least, if you use VScode you should be familiar with vscode extensions, here are the most useful extensions that I use in my projects:
With these awesome tips and tools, you are going to write clean CSS code, and when combining them, you are going to find that you end up writing less CSS code.
Let me know if you have any comments or anything to add you are welcome to tell me in the comments.
Create your free account to unlock your custom reading experience.