5 Things I Wish I Knew When I Started to Learn CSS.

Whether you aim for a front end or a back end development, you will have to learn CSS sometimes during your lifetime. Styling with CSS is one of the most overwhelming things to learn when starting your career as a web developer.

here are the most 5 (Don't do) Things newbies do when they start learning CSS:

1. Using outdated code editors.

Using a modern updated code editor that supports Emit is crucial because not only will save you time when coding but it will also prevent you from having typos that can lead you to endless and frustrating debugging of your code. VS Code has gained its popularity over Sublime Text over the past few years not because of its beautiful and customized themes, but it's for the large community and being very friendly for newbies, it includes enriched built-in support for Node.js development with JavaScript and TypeScript, powered by the same underlying technologies that drive Visual Studio. VS Code also includes great tooling for web technologies such as JSX/React, HTML, CSS, SCSS, Less, and JSON.

Long story short get used to it now better than trying to get used to it later.

2. Using position absolute and margins for centering.

 If you know the height and width of both the element to be centered and its parent element (and those measurements won't change, i.e. not fluid width environment) one foolproof way to center the element is just to absolute position it with pixel values so it looks perfectly centered. But if the parent element is fluid, then never use Position Absolute for centering elements inside its container.

3. Not using containers and wrappers.

Sometimes the first bit of HTML we write in a new document is an element that contains everything else inside the container. The term container is common for that. We give it a class, and that class is responsible for encapsulating all visual elements on the page.

When I was reviewing Microverse bootcamp's students I have noticed a lot of newbies using the class name wrapper on project and container on another project as if they were the same (TBH I'm guilty of that too). To break the Meta, here's an example of both:

wrapper {
  margin-right: auto; /* 1 */
  margin-left:  auto; /* 1 */

  max-width: 960px; /* 2 */
}

container {
  display: flex;
  flex-wrap: wrap;
}

4. Not using the developer tools.

DevTools has a lot of different uses, but when you’re first learning it’s particularly useful for inspecting exactly how any page is built and styled. It’s also great for debugging.

Another bonus of DevTools is that they’re constantly updated with new debuggers and powerful exploratory features that can help you stay efficient and ahead of the curve with your skills.

The tools themselves are easy to get to. Here are three ways to open them:

1. In your Chrome browser – select the Chrome menu (the three horizontal bars in the top right corner), select More Tools, and then select Developer Tools.
2. Right click on an element on any page and select Inspect Element.
3. On your keyboard in Windows select ctrl + shift + i. On Mac select cmnd + opt + i.

Any of these will open up the DevTools window at the bottom of your browser.

5. Styling elements only after finishing HTML.

Most people say "You should build a house first, then paint it" or in another words, you should finish your HTML first after that, do the styling with CSS. I agree but not if you are just starting, simply because as a newbie in positioning elements and you're not familiar with the layout of Flex-box and CSS-grid. Instead, you should go step by step, Header then Hero then another section and so forth.

Once you'll learn what kind of layout works best for Flex-box or CSS-grid you will then build the house first, then paint it.