Original subtitles

Now another very important skill

that you will need as you become a web developer

is to debug your own code and to ask questions in case

that you cannot solve certain problems.

So in programming,

we say that a bug is basically an error or a mistake.

And so basically debugging our code means finding and fixing

errors in code.

All right.

So let's now pretend that there is some error in your code

and in HTML, the most common error,

so the most common bug that occurs, is that some elements

remain unclosed.

So that can easily happen even with VS Code

automatically closing elements for us,

but still sometimes with copy paste

or with some other things that happen.

Sometimes we end up deleting these closing tags

and then some error might appear.

So let's say that for some reason,

we never closed the strong element here.

And then our page is going to look like this.

And of course, for this example,

we need to pretend that we don't know about this bug, right?

Anyway, this doesn't make any sense.

So if we just introduced a bug

and then we render our page,

then all of a sudden, our page looks like this, right?

And this might be a little bit scary

because you look at your page and it looks very wrong.

This is not what you intended, right?

So how to fix this?

Well, in this case, it is actually very simple.

All you need to do is to take a look at this result here.

So at this page,

and actually figure out where the bug started.

So the problem here is clearly that all the text is bold,

where you don't want it to be.

And so to debug this code,

you need to look where the code is not bold.

So up here, for example, the text is not bold.

And so the bug must appear somewhere below this.

Then this one here is bold,

but that's simply because it's an h2.

Then here you see some more text that is also not bold.

And then from here on all of a sudden, everything is bold.

And so that means that your bug must be somewhere here.

And so then you can move back to your HTML

and notice that, oh, you did not close this element.

And then it's very simple.

You just come here, close your element,

give it a save and you're back.

And the same can of course happen

on all other kinds of elements.

So let's say for some reason you overrode

this closing tag here.

Then you'll take a look, and again,

everything is suddenly bold and also bigger and blue.

And so maybe immediately from the color and the bold text,

you can see that this now looks like a the h3.

So again, you can then come to your code,

notice that there is a bug and fix it.

Now, one of the bugs that is quite common

is that for example, here, you close the Li

and the leave the content outside.

So something like this.

And then as you check your page,

something looks very off, right?

But then again, it is just a matter of going

to the place in the HTML that corresponds to this problem,

and then figure out what happened.

So this case, that's pretty clear

you have an extra closing Li.

So just close that and we are back to safety here.

Now, what if this happens in like a bigger element?

So let's say here in the aside.

If we delete this, then the error

might not be that apparent.

So you see, it's not that apparent.

All that happened is that this text here

is suddenly inside of this aside element.

So now imagine that you created this bug in your code

very early on, even before you actually

started writing the CSS.

And so in that case, you never noticed

that this was happening.

And then as you started writing the CSS,

you suddenly noticed that this is off,

but you don't really remember writing the HTML.

So you're not sure what might be wrong here.

And so a great solution in that case

is to actually use an HTML validator tool.

So that will basically allow you to see

if your HTML is valid or not.

So to do that, let's copy all the code here.

At least that I think is the easiest way of doing this.

Then here we need to Google, HTML validator

and then usually it should be this very first result,

but I will also have a link to this HTML validator

on my resources page as I showed you before.

So here we can validate by introducing a URI.

So that's something like a URL.

We can manually upload a file,

or we can simply paste the code that we just copied here.

And so again, that is, I think the easiest solution.

So let's click on check

and now actually we have a couple of errors.

So not just the one that we were looking for,

but you'll see that down here actually is

that unclosed element aside.

So that is the bug that we just on purpose introduced.

So let's fix that here.

Now, all right.

Then here we have another error which is end tag div seen,

but they were open elements.

So this error is actually related to this one,

and this is quite common to see in a validator.

So that one error in the code

actually then create some multiple right here, okay?

So these two were fixed by what we just did here,

but then here, apparently we have some other errors

in our code.

So let's actually fixed those.

So in line 131, we have the duplicate attribute width.

So let's fix that.

And actually that's true.

So we have width, and then width again,

and of course this should be height.

So height, like this.

And then finally there is yet another one.

So in line 137, attribute height not allowed.

And actually the problem here is that this is misspelled.

So that's a stupid error.

So it's not th but ht like this.

So you see that actually, even before on purpose,

introducing a bug, we had invalid HTML all along.

So now I'm copying it again.

So then here I will command or control a

to select everything, delete it and paste it again.

Then check and now we have no errors or warnings to show.

Okay, so that is the HTML validator.

So, a very useful tool,

but let me now actually show you another tool,

which is a div checker and a div checker

can be very helpful to compare your own code

with my code that I actually code here in the videos.

So in case you run into any problem

where your page looks different than mine,

probably something is wrong in your code.

And so in that situation,

you can compare your code automatically to mine, basically.

So let's say that for some reason,

instead of using the a element here, you use link.

And link doesn't make any sense here,

but well, with anchors, we are actually creating hyperlinks.

And so for some reason, you might have made a mistake

of, instead of using a, using link,

because you might've thought

that this is what creates links.

And so now somehow your code here is not clickable

and it's black instead of blue.

And actually let's go back to our CSS here

and in the nav remove this piece of code

that we added in the last video, right?

But anyway, now let's actually compare this code

with my code.

So with the final code in this section.

So let's search for div checker like this,

and then you can simply use divchecker.com.

So here you will put your code.

So again, command or control a, then copy, then paste.

And now here on this side,

you need the other code or actually the other way around.

So here you want the original.

So let's delete that and here your changed text.

And so let's now come to the code that you downloaded.

So this repository, and then I have the final folder here.

And so this is what you can use this code for.

So to compare it with your own code.

So we are in this section of the CSS fundamentals

and we're interested in the index.

And so in order to open this up,

we can very simply drag it onto the VS Code icon

here in the menu bar.

And so this is, basically the final code of this section.

So, so again, selecting everything, copying it,

then I can paste that here.

And then somewhere there should be

the find different button.

So by the time you are watching this video,

this interface might look a little bit different,

but the basic idea should still be there.

That you have two text boxes

and then some button to compare them.

So just click that and then you see the differences

nicely marked in here.

So in the original, of course we have the a element

while you, for some reason had the link, okay?

And in this case that's the only difference

or actually here is some other one.

So the closing tag and here is just closing.

So let me actually fix that as well.

So here, of course it should be a,

let's put that back

and in here there's also something wrong in content.

So closing tag here, it should be the closing tag.

Let's see if there is something else,

but ah, yeah, here are these bugs that we just solved also.

So previously we had width twice, right?

And so we fixed that already.

And so here we are good.

And this was wrong previously.

So in the final file, it was actually still wrong, okay?

But besides that, that's it.

Okay.

Then down here, we have access again to

that text so we can do some changes here.

So let me just introduce a couple more,

just so we could see how that looks like then.

So this Li here, let's say we didn't close this somehow.

Let's say that here inside of the footer,

we actually closed not footer, but header for some reason.

Okay, find a difference.

And then here you see that it looks very different.

So even if you have just empty lines,

it will still show up here in the div checker.

Right?

So that's all the changes that we just introduced.

Now, okay, great.

So div checker and HTML validators

are two extremely helpful tools to debug your HTML code.

But now let's go actually to CSS because there are also

some potential bugs that might happen there.

Now, one of the most common sources of bugs in CSS

are some conflicts between selectors.

So let's select these links here once again,

and keep in mind that they are inside of the nav,

which is inside of the main header.

Okay.

So we have the nav a link here, but for some reason,

let's imagine that we selected these links also

somewhere else and then edit some different style there.

So let's say somewhere here in the middle

of the rest of the code,

and here we wrote a different selector.

So let's say that here we wrote main header

and then inside of that the nav and then inside that the a

like this, and here we set the color actually to red.

Okay, but we still want our color to be blue.

But now if we reload this, then our text is actually red.

So we have two selectors,

which both define the color and they both apply.

And so if before you wrote this and only later you

then wrote this piece of code

and wanted the texts actually to be blue,

then you might not be understanding

what actually happens here.

While the color is actually not the perfect example here.

So let's play instead with the margin top.

So let's say that for some reason,

you defined the margin top to be 100 pixels for the link,

but then a bit later, again,

you write this rule here where you actually only want

the margin top to be 10 pixels.

So you are writing this rule, then you give it a save.

And all of a sudden it looks like this.

So you have 100 pixels.

So what is happening?

Well, let's inspect and well,

you see that both of these selectors apply of course.

So both of the rules.

But the margin top that does actually apply

is this one here in this longer selector.

So as a rule of thumb,

besides the rules that we already learned before

about selector priority,

if one selector is way more complex than the other,

then many times it's actually the more complex one

that gets applied.

Okay.

And so that's why I also told you before

that you should avoid writing a selector like this.

So a very complex one.

So keep your selector simple, like this one,

and that will then avoid creating bugs like this.

Okay.

Now, technically here,

if we take a look at the selector specificity,

you see it, that it has 1,2 right?

So memorize that 0, 1, 2.

And here we have 0, 2, 2.

And so these numbers are larger

and therefore this is the one that actually gets applied.

Now I mentioned before,

not to worry about specificity

because that gets too complex,

but basically the higher the numbers,

the more that selector apply.

All right?

So don't write selectors like this

and instead keep their specificity low.

Okay.

And if you follow the rules that I showed you

about the priority of selectors, then you should be fine.

Another common problem that might happen

is that for some reason you misspelled a property name

and that happens all the time.

So let's say that instead of right, you wrote this,

then you give it a save.

And of course the element is not positioned

where you expected it to be.

So in that case,

the simple thing to do is simply to inspect that element

and then check out what happened there.

Now in the case of a pseudo element like this,

you will actually have to then click here

to open the element itself,

and then from there you can select the pseudo element.

And then you can simply check out the properties here

and you will then find this icon here,

which means unknown property name.

And so from that, you will immediately know

that here you misspelled something.

So then you come here to your code, fix that

and you're a good to go again.

So this one is also more common than you thought.

And so doing what I just did here

is always a good idea.

And in general, it is also always a good idea

to always experiment with this code

that you have here in the dev tools

and play around with it.

And for example, tweak values here.

So instead of, for example,

experimenting with the h2 font size here in the code,

you can simply come here to this value, click it,

and then on your keyboard, you can use the up and down keys,

just like it says here.

Actually, so in that tool tip.

So with this, you can see real life how these values changed

and you can also use shift and up and down,

and then it will increment in steps of 10.

So this is very, very helpful.

I do this all the time when I'm experimenting

with different values, okay.

And if for some reason you somehow really

cannot fix your code.

Then of course, again, you can use the div checker

to compare your CSS code with the one

that I show in the video.

So the final code of the section,

that is in the repository

that I just showed you before.

Now, finally, one error that I see beginners make

all the time is to not correctly link the CSS file

in the first place.

So remember that, that happens up here in this link.

And sometimes for some reasons,

students mess up the path to the CSS file.

That's also because sometimes we might want to put this

into a different folder.

So just like we did with the images.

And then you need to correctly, of course, write the path

in relation to this HTML file.

So in case that no CSS at all is applied to your page,

then the first thing that you need to check

is if this link here is correct.

So if your style sheet was correctly linked to your HTML.

Okay?

So this is how you fix some of the most common bugs

in HTML and CSS.

But if for some reason you really, really cannot fix

any of the bugs that you found,

even using all of the tools that I just showed you

in this video, then of course you can ask a question

in one of the platforms that I just showed you.

And in particular on Stack Overflow,

or you can also post a new question here

in the Udemy Q and A.

Now what matters here is that you always post

all of your code to a code pen first.

So instead of a copy and paste all your code

to Stack Overflow or into the Udemy Q and A,

please make it easy for the person who will help you.

And instead paste all your code into a code pen.

So we have already used code pen for the challenges,

but just to make sure, well, where is it now?

Oh, here.

So start coding,

or you can just write slash pen

and then again, grab all your code,

put a tear in the HTML and then all your CSS right here.

And in case you have JavaScript, you can also put it here,

then you'll save it for which you will need an account.

And then you just copy the URL and paste it

either to Stack Overflow or to the Udemy Q and A section.

Okay?

Now, right.

And I think that's it about the basic skills

of debugging and asking questions.

So of course, debugging can go a lot deeper than just this,

but for now, I just wanted to give you an overview

of what debugging is and how it works.

And now to wrap up this section,

let's continue building our coding challenge

that we have been building ,in the next video.