-: 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?
And 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 introduce the 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 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 are back.
And the same can of course happen
on all other kinds of elements.
So, let's say for some reason you overwrote
this closing tag here, then you 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 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 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, in 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 site, 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 of,
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 of 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 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.
All right.
Then here, we have another error
which is end tag div seen, but there 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 a code actually then creates
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 fix those.
So, in line 131, we have to duplicate attribute with.
So, let's fix that.
And actually that's true.
So, we have with and then with 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 status 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 diff checker.
And a diff 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 have 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 diff checker like this.
And then, you can simply use diffchecker.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 you are,
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 are 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 again, selecting everything, copying it
then I can paste that here.
And then, somewhere there should be defined
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 then here, there's also something wrong in the 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 with 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 close, 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 diff checker, right?
So, that's all the changes that we just introduced.
Now, okay. Great.
So, diff 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 added 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 of 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 one of 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 this select specificity,
you see that it has one, two, right?
So, memorize that zero, one, two.
And here, we have zero, two, two.
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 will apply now. 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 misspell 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 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 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 these 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 ten.
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 diff 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 reason,
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&A.
Now, what matters here is that you always post
all of your code to a Code Pen first.
So, instead of copy and paste all your code
to Stack Overflow or into the Udemy Q&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?
Ah, here.
So, start coding, or you can just write slash pen.
And then again, grab all your code, put it here in the HTML.
And then, all your CSS right here.
And in case you have JavaScript, you can also put it here.
Then you 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&A section.
Okay. All 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.