1.3 Modern Normalize

Welcome back to the course, in this lesson, you'll learn about modern normalize. This is a reset file that will make sure you always start a web project with a clean slate in terms of styling. So let's see how we can download it, what it's doing and how we can benefit from it. We can find modern normalize at this address on GitHub, you'll also find a link in the lesson notes, and basically this is an updated version of Normalize CSS, which is this reset file. So I recommend you get this version, it's more up to date than the default normalized file, and it continues to be maintained. So a couple of different ways to get this library, you can grab it via NPM, just like I showed you in the previous lesson, or you can manually download it. Or you can get it from a CDN, which is the version that I prefer, so just click this link, Copy it and then let's go back to our page. I have a simple demo page opened up here, it's just a page with some random elements. And I tried to be as diverse as possible so you can see the immediate effects of this reset file. So, we're gonna go ahead in the head portion of our page, and I'm gonna say link, I'm gonna paste that in and that's it. Now if we go back you'll immediately see, the styling of the elements has changed. We no longer have that serif typeface being used instead we're using a Sans, the form elements look different, the headers, the text everything. So let me quickly comment this, so you can see the before, so this is the before, And this is the after. Big difference right? And it's gonna look the same on pretty much every single browser. Now let's take a look at what exactly is happening in this reset file, I just opened this in a code editor, and let's quickly go through it. First of all, it's setting box-sizing to border box, this is something I always do in my projects. It makes it so much easier to work with padding and borders and widths, if you set it like so, then it's setting line height to a predefined value on the HTML element, it resets some margin. It sets the system UI type face, on the body element, and then you'll see that because it's a reset file, it basically just resets the styling on certain elements like setting a height zero on the horizontal rule. Setting some type faces on code elements, and so on and so forth. It's not a very big file, but all of these changes are researched and are proven to work very well. So, you should definitely use this, every time you're starting a new web project. All right and that is modern normalize a very useful library for when you wanna start a new project with a clean slate. Now in the next lesson you'll learn about Animate.CSS, which is a fantastic animation library created by Dan Heaton, so I'll see you there.