Build Your First: HTML & CSS

Loading the player…


Introduction to HTML and CSS validation:

Good day, and welcome to Lesson 9, our final lesson. This lesson’s all about validating and testing. Let’s start with validating first. Validation is a process where documents are checked to make sure that they comply with standards that have been set by the W3C, one of the key organisations that sets the standards. HTML files can be validated using the W3C Markup Validation Service. HTML5 files can also be validated using the Nu Markup Checker, which is an experimental checker. CSS files can be checked using the W3C CSS Validation Service. Now CSS files can also be checked using a range of other online services such as CSS Lint. Now CSS Lint checks for conformance, but it also checks to make sure your CSS has been abstracted as much as possible.

Understanding the importance of validation:

But why validate? Well validation is one of the simplest ways to check whether a page is a built in accordance with Web standards. Validation provides one of the most reliable guarantees that future web platforms will handle your files as designed. Validating your markup and CSS allows you to check for and quickly resolve bugs.

Validating HTML and CSS of index file:

So, let’s go and validate our HTML and CSS files. Okay, I have three tabs open in my browser. The first one is for the W3C Markup Validation Service. The second one is to the W3C CSS Validation Service. And the third one is to the CSS Lint tool. But we’ll start with the HTML validation service first. And all we need to do is to go to our start folder, find the index file, and we need to set to file upload here. And then drag the file on. And click check. Now we’re going to come up with three errors in our page. And they’re all to do with line 10, 11, and 12. Let’s go and open our folder and then open the index.html file. And if we scroll down a bit, you can see here’s line 10, 11, and 12. Now these are all to do with a scheme at our log for making our pages more accessible for Google. So if you feel that these are going to cause more problems then their benefits, you can just delete these four lines. Now let’s go and validate our CSS files. With a CSS Validation tool, we can do something very similar. We can click on by file upload and then go and check our files individually. So we’ll start with base. And, and that’s a pass. The next one we’ll test is layout. And that’s a pass. And then modules. And then finally even though we haven’t touched this one. We can check normalize. And there we go. All of our CSS is valid. Now if there are validation errors in your HTML or in your CSS, these tools are fantastic in that they’ll tell you what the problem is and generally speaking, how to fix it. So they’re a great educational tool as well. Now let’s have a look at our last tool called CSS Lint. Now, to do this one, it’s actually best if all your CSS is uploaded together. So, what I’m going to do is cheat a bit, and I’m going to copy all of the base layout and module styles into one CSS file and then copy and paste that here. So, here’s our dummy CSS file, and now all I need to do is to go and grab base.css, copy everything. Paste it in here. Same again for layout. And then for modules. Now I can just go Cmd+A > Copy, and then go back to the CSS Lint tool and paste. And then Lint. So let’s have a look here. Bit small on screen, but basically saying there are no errors, but there’s one warning. And if we look at the warning it said there are too many font-size declarations. There’s actually 19 of them, and some abstraction is needed. Now, for our layout, we’ve used a lot of different font-size declarations. And on a small site like this, that’s not too much of a problem. But if you’re working on a large site, that can start to be a problem. So in these sort of cases, it’s probably a good idea to abstract your font sizes. So instead of declaring them multiple times, you’d create specific classes like we did for rose, or for pairing, and create a set of fonts that can be used, and then applied as needed, as classes. And that way, your CSS files would become much more tidy and lean.