How to check your code for errors in HTML using VS Code

This lesson is exclusive to members

Course contents
SECTION: 4
Project 2: Bike Repair Website 6:12:48
SECTION: 6
Project 4: Bootstrap Yogurt Website 3:35:39

Questions

You need to be a member to view comments.

Join today. Cancel any time.

Sign Up

Course info

128 lessons / 17 hours 5 projects Certificate of achievement

Overview

Hi there, my name is Daniel Scott and together we’re going to learn how to build professional responsive websites. which look good on mobiles, tablets and desktop screens.

We will build 4 sites together...
  • a simple but elegant restaurant website.
  • a bike repair website. 
  • a responsive portfolio website.
  • a Bootstrap website.  

We cover everything you need to build your first website. From creating your first page through to uploading your website to the internet. We’ll use the world’s most popular (and free) web design tool called Visual Studio Code.

There are exercise files you can download and then work along with me. At the end of each video I have a downloadable version of where we are in the process so that you can compare your project with mine. This will enable you to see easily where you might have a problem.

We will delve into all the good stuff such as how to create your very own mobile burger menu from scratch learning some basic JavaScript and jQuery. 

 You will...
  • Learn how to work with responsive images and icons. and stunning full screen background images and probably one too many gradients. 
  • Learn how to create forms and to choose great fonts for your website. 
  • Learn how to work with Bootstrap 4 to easily add carousels, cards and complex looking menus. 
  • Setup a domain name with hosting so that your website is live on the internet for others to see.  

There are fun class projects for you to work on which will enable you to practice what you learn. By the end of this course you’ll have a great understanding of important web design topics like HTML5, CSS3, Flex box, Responsive design and Bootstrap.   

If that all sounds a little too fancy - don’t worry, this course is aimed at people new to web design and who have never coded before. We’ll start right at the beginning and work our way through step by step. 

Who am I? 

I’m Dan, and I’ve been building websites for about 15 years now. I am award winning instructor, and have won a MAX Master award for the last 2 years in a row at the prestigious Adobe Max conference.

Time to upgrade yourself?
Sign up for the course and let’s learn how to build responsive websites.

Course duration 16 hours 42 mins
Daniel Scott

Daniel Scott

Founder of Bring Your Own Laptop & Chief Instructor

instructor

I discovered the world of design as an art student when I stumbled upon a lab full of green & blue iMac G3’s. My initial curiosity around using the computer to create ‘art’ developed into a full-blown passion, eventually leading me to become a digital designer and founder of Bring Your Own Laptop.

Sharing and teaching are a huge part of who I am. As a certified Adobe instructor, I've had the honor of winning multiple Adobe teaching awards at their annual MAX conference. I see Bring Your Own Laptop as the supportive community I wished for when I was first starting out and intimidated by design. Through teaching, I hope to bring others along for the ride and empower my students to bring their stories, labors of love, and art into the world.
True to my Kiwi roots, I've lived in many places, and currently, I reside in Ireland with my wife and kids.

Certificates

We’re awarding certificates for this course!

Check out the How to earn your certificate video for instructions on how to earn yours and click the available certificate levels below for more information.

Downloads & Exercise files

Download Exercise Files Download Completed Files

Transcript

Hey there, wouldn't it be nice if you made a typo, or you forgot to do something, or left the brackets off. That there was actually errors that appeared, and told you which line they were on, and how to fix them. There is such a thing, it's not installed by default; it's an Extension. I'm going to show you how to work with that, plus other ways of checking your code and asking for help. Let's get going. 

By default, you've got error checking in CSS. For some reason, but not in HTML, you might have noticed that already. So when I do something wrong in here, and I forget to put a colon in, or-- yeah, put a colon in. Kind of like, some weird things come up, and it says it doesn't know-- it's not expecting things, and, how to quick fix. These never seem to work, none of the quick fixes work. It's going to be down to you to fix. You just have to go through and say, where does the problem start? 

The problem starts here, so something just before that is wrong. But that's helpful just to know kind of where it starts. Actually this cleared it as well, I'll show you where else it starts. Down here, can you see, there's like little errors right down the bottom left here. I click on this, and it says 'colon expected'. That's actually helpful, expecting a colon, didn't get one. So on line 3, and it's affecting down line 15 as well, that's what I was saying. But line on character 15, so line 3, there it is there. 

Now when you have a really big CSS sheet, it becomes more useful when there's like, on line 1000. So on line 3, there's a problem, and all the rest of these, don't worry about, until you fix the first one, because if you fix the first one, they will all go away. There's a cascade of errors that is fixed by the first one. Now this doesn't work in HTML by default. So if I put something in here that's not meant to be in there, and the thing doesn't know what to do. It doesn't tell me there's nothing to do, if I miss the beginning tag, and I do parts of that. It's gone red but there's no kind of like problem error. I'm not even sure if it goes red by default. I'm pretty sure that's because of the plugin I installed earlier on. 

So let's turn on this error checking. We're going to do the exact same thing as before. It's the same as installing an extension; click on this icon here. I'm going to make it bigger so you can see. And this, top here, I'm going to delete what's there, and I'm going to say, I'd like HTML error. So this is where it gets a little bit hard, because you're like, "What do I call it?" There is no like good rule, you just got to start typing and seeing, what results appear, you might do some Google searches. 

In terms of error checking, sometimes it's called Hinting, or Linting, with an L; L-I-N-T. You can lint things. I searched around trying to find one, and the one that I use is called HTML hint, but even then it's really hard to find in this list. Did some Google searches, and I found the one I want. It's actually just one word, HTML hint. See, you got like no chance of finding it. So know that this extension search bar, is okay to get started and try and find things, but just jump out to Google and figure out, just ask the question, what is a good plugin for this thing that I'm trying to do. 

You can see here, a really popular one, 4-stars, works for me. And it's got half a million downloads. I'm going to click on it, have a look. You read through what it does and how it works, and I'm going to click 'Install'. I'm going to wait. That works. This one doesn't say Restart, does it? No. Some of them say Restart, a lot of them don't anymore, they used to, but if it's not working you can turn it off and restart it. So let's make it work. Let's close down this little tab. That was just showing me, like a little preview to the product. Let's get all three set, let's go back to our Explorer, and let's make this a bit smaller. 

Now if I do some errors, put in some random codes where it shouldn't be, look. A little thing, and it tells me, there's a special character in the wrong place. Doesn't really tell me much again, but at least I know where the error is. It's on line 13, I can go find it. So in terms of error checking that's a good place to get started. Turn on the extension; I'm going to close it down for the moment. Just keep an eye on this. If you're like, "Hmm, it's not working", and before you email me and say, "Hey, it's not working", check your errors down here, you might be able to self diagnose. 

Now another thing to do before you reach to say if there's a problem, because sometimes it's not actually a problem. You might do something in here and change the code, and check it in your browser, and the browser's not showing it. You're like, "Ah, something's wrong." Sometimes, probably one out of every 50 times for me, it's not actually broken; your code's perfect in here, the browser, where you've been previewing is just holding on to old data. You can do something called caching, and it caches your previous version of your website, so when you're saying Update, it's going, "I'll use this other cached version of your website to be fast and smart." And you're like, "No, don't be fast and smart, I want you to reload it every time," 

The way to make it do that, Refresh can work, but there's like a real, like a definite way of making it reload, because sometimes Refresh still-- like if you've downloaded images here often the browser goes, "Well, if it's the same name of the same image I will not update it," because it's the same image with the same name, but you know you've physically changed the image. So sometimes things don't update even though they should. Talking too long. Show them how to do it, Dan. It's under 'View', and turn on this scary set of tools. So 'View', 'Developer', and click on 'Developer Tools'. Click on that. And this opens up a panel down the bottom. 

Yours won't look like mine. Can't remember what it looks like by default. I'm going to turn that off. I can't remember, but let's talk about the main things. So don't worry about what appears here, what you want to do is the 'Option', So now when you hit 'Reload' you can right click it, and it gives you these two new options that weren't there before, because now you are like, looking under the hood using the Chrome Developer Tools. You have this option, 'Empty Cache and Hard Reload'. That's the, you forget everything you know about my website and reload it exactly, the way I'm displaying it here in VS code. And that can sometimes, you know, if I'm doing problems I'm like, "Sure, it should be right, why is it not working? Everything's perfect." I go in there, check that, do it, and sometimes it fixes, and you're like, "Phew." Instead of spending time trying to reach out and figure out how it's broken, it's not actually broken, just the browser didn't update. 

What else can you do? Now you can totally ask questions of this course, like there's Comments, I use the Comment section, use social media, like you'll see all the social media in the Class Exercise Files, reach out that way, but often it's just me for this course, it's a new course, I try my best to answer questions. Sometimes I get a bit backlogged, or it's the weekend, on holiday. So definitely use that as an option, but you will also find Google searches, I know it's a lame thing to say, go and search on Google, but what you'll find is there's a couple of main places. Actually one main place, it's called Stack Overflow. Stack Overflow will appear in lots your search results, but searching in this site, it's just amazing. 

I listened to a podcast, that guy started this, like it's, it's for Designers and Developers, anything Web, ask a question in here, you will find lots and lots of really useful answers, and they're curated answers from other users. What you'll probably find is you don't actually have to ask a question, you can log in, sign up, and ask a question, but you'll find it's probably already been asked. Especially at kind of our level here where we're just getting started. 

So Stack Overflow is an amazing site to get, and you get a response straight away, is I guess, what I'm saying. If you're still having problems, drop me a line. All the different ways that this site gets viewed, this video course gets viewed, yeah, use the Comments or the Ask a Question button. Often, to kind of fix your problem I need to see the code. So zip it up, so compress it into like a little folder, and send that along, like a link, maybe using Dropbox. 

So I need the files, you'll have to work out a way that works for you. Sometimes you send it. As a system to sending things, Dropbox is a really good one, because obviously screenshots are really hard to kind of-- I can kind of see what's going on but it's a little bit hard to edit your code. Otherwise I got to start retyping the whole thing, and try work out what went wrong. Now my only thing is, if you're asking questions, say you post a question, have a look through the other comments and see all questions, and see if there's one that you can answer. Say you are just, you know you're finding this, not easy but you're like, you got that concept, you're like, "Man, Div tags, got it locked in." And you see a question, somebody asking about Div tags. 

I'd love to try and start that sort of momentum where, if you're asking a question you have to answer somebody else's as well, or at least give your best opinion, or try and do it. So that we can, I guess, get answers quickly. And for you, you'll find it super valuable. If you are able to answer somebody else's questions, it's pretty amazing, like being able to articulate that to someone else. Really drives it home in your own mind about that topic, plus, if I'm on holidays in Pina coladas somebody needs to help, but don't worry, I've got a baby, and a five-year-old, there's no Pina coladas in my near future. 

So to recap, do your own error checking using the HTML hint, that we just installed in Visual Studio Code. Check that it's not actually a problem, by refreshing your browser, but remember, you've got to do that, by going into 'View', and going into 'Developer', and 'Inspect Tools', in our 'Developer Tools', and then right clicking the 'Refresh' button. Stack Skills is an amazing place, try it with me as well, using the Comments, or hit me up on social media. 

One last thing before we go is, there might be a, say-- it happens a bit, like, I'll go into my Extensions, and I'll be like, "Ah great, this one works." It looks like it works, I install it, and I just can't make it work, or it's broken, so sometimes you need to uninstall Extensions. So to do that, click on this little weird 'Clear Extension Inputs'. With that cleared, your search disappears, and it tells you things like, the ones what-- tells exactly what's enabled. What's recommended, I never find that useful, but over here it tells me the ones I've enabled. So I can click on them and say, "Actually HTML doesn't work," I'm going to uninstall it, and try a different one. You can disable it temporarily. Say that you're like, "Actually is it working, is it breaking something else?" let's just disable it, and then test something, and then enable it again to see if that thing goes away. I've never had to do that. Often the star rating kind of fixes that, or at least guarantees a half-decent plugin or extension. 

And that's it, that is HTML checking. It's on by default for your CSS. Let's move on now and actually start building the structure for our project 1, The Restaurant. I'll see you in the next video.
  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • © Bring your Own Laptop Ltd 2024