Learn By Debugging | HTML for Beginners

This post is to explain how we can learn coding by debugging existing code blocks.

Photo by James Wainscoat on Unsplash

Introduction

First of all, you must be wondering why have the beautiful bugs up here in the picture? Well, that's to indicate bugs 🐛 🙄 in your code blocks. I just wanted you to understand what bugs in coding and how to get rid of them, so, to add a touch of fun to it, I thought of visualizing it in the above manner.

What are bugs in Coding

Bugs are actually syntax errors or typo errors in your code blocks leading to unsuccessful attempts to run your code projects.

How do you know there are bugs

You get to know of bugs in your code as you try to run your code and the console displays the bugs/errors on the screen and you are unable to run your finished code result. You will not get the expected result in the output and ththat'whenbyou know that your code has some bugs in it.

How to Fix these Bugs

The procedure is quite simple as long as you maintain your calm demeanor! All you need to do is to check the error statements from console and fix them one by one. Let's consider how I solved the bugs in a freeCodeCamp basic Html mini project for beginners as shown below.

Code With Bugs

<h1>Welcome XYZ Pet Adoption!</h1>

<p>Consider adopting a pet today. We have cats, dogs, rabbits and more.</p>

<h2>See our cats!</h2>

<img href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" att="Five cats looking around a field."></img>

<h2>Adopt a cat!</h2>

<a src="/cats">Visit cats page</a>

<h2>Adopt a dog!</h2>

<a src="/dogs">Visit dogs page</a>

The Resultant Html Page

The resultant html page looks like the screenshot of the page providrd below.

Debugging Process

After taking a good look at the html page above, I went back to the provided bug-ridden code that was initially presented to me , with the task of debugging the same.

I read the code line by line and I noticed that the main heading , paragraph snd second heading are all ok since the result is at tandem with the code syntaxes.

However, right below the second heading, that is h2 elements, I saw that there is an image element img supposed to show images of 5 cats but no images are displayed in the result. So, I examined the image element further, to see that the attribute of img is provided as href. After doing notes kn img element, I know that the attribute of img should be source indicated by src. This meabs that the code has error or bug at this point by writing the wrong attribute. 🤔 Now, if I were you, i would still go back to read up the attribute definition and also what are the attributes of img element. So, I went back to my code block and corrected this error by typing src in place of href .

Let me show you the result of this bug fix!

Code After first debug

<h1>Welcome XYZ Pet Adoption!</h1>

<p>Consider adopting a pet today. We have cats, dogs, rabbits and more.</p>

<h2>See our cats!</h2>

<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" att="Five cats looking around a field."></img>

<h2>Adopt a cat!</h2>

<a src="/cats">Visit cats page</a>

<h2>Adopt a dog!</h2>

<a src="/dogs">Visit dogs page</a>

The Html Page after First Debug

Observation Of The Resultant Html Page

In the above page I am happy to see the expected result, the image of the five cats, but, there is no description written below the image as was indicated in the erroneous code. How did i know that it was supposed to be a picture of 5 cats? By looking st the code that says "att=”five cats looking around the field” , so, I need to fix the code in order for it to reveal this description. A close look at the syntax reveals that there is a typo or spelling mistake here! It is supposed to read

alt= “ five cats looking around the field” instead of the erroneous att = “five cats looking around the field”. I revert to the code file and changed the att to alt and if I were you, I would again refer back to the definition of alt.

When I observe the page again, it does not show up the alt message below the image as it is supposed to be, this could happen due to some browser issues, but not to worry, as alt messages are usuallly supposed to show in cases when the image is not clear in some browsers and it is an attribute for the image element in order to add an additional text about the image that is displayed in the page.

I looked at the img element in the above code and find that they have mentioned a closed img tag which is wrong as we all know from the img element theory because the img element is suppposed to be a self closing tag, so, I corrected that by removing the </img> closed img tag.

Code after above debugging

<h1>Welcome XYZ Pet Adoption!</h1>

<p>Consider adopting a pet today. We have cats, dogs, rabbits and more.</p>

<h2>See our cats!</h2>

<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">

<h2>Adopt a cat!</h2>

<a src="/cats">Visit cats page</a>

<h2>Adopt a dog!</h2>

<a src="/dogs">Visit dogs page</a>

Get back to debugging the rest of the code

As shown in the above code, I have completed debugging until the part where they have mentioned the image for displaying the five cats as you can see that I have corrected the code by making the img element as self closing by removing the provided closed img tag and also changed the typo of att to alt and I have already explained the definition of the alt attribute in the above paragraph. Now I need to check for bugs in the rest of the code.

I find that they have provided a link to a page which is supposed to be a cats page and an invitation to visit the cats page and they have used the anchor tag , that is <a> tag to link to the page, however, I noticed that they have not written the href attribute inside the anchor tag , instead they have written the src attribute inside the anchor element which is a wrong thing to do.

The href is the attribute of the anchor tag and href that is, hypertext reference is used to specify the url of the page that the link goes to . Since the href attribute is missing in the above code it will not connect to the page, hence , I need to debug this by adding the href attribute inside the anchor tag, and I removed the src attribute from inside the anchor tag.

Just below the above code, there is a similar bug in the code that mentions the src attribute inside the anchor tag instead of the href attribute with an invitation to link or visit the dogs page. Since it is the same bug, I remove the bug by replace the src attribute with the href attribute inside the anchor tag. The code after debugging the last two errors as explained here is as shown below in the code block after full debugging.

Code block after complete debugging

<h1>Welcome XYZ Pet Adoption!</h1>

<p>Consider adopting a pet today. We have cats, dogs, rabbits and more.</p>

<h2>See our cats!</h2>

<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">

<h2>Adopt a cat!</h2>

<a href="/cats">Visit cats page</a>

<h2>Adopt a dog!</h2>

<a href="/dogs">Visit dogs page</a>

The HTML Page after full debugging

Conclusion

In the above html web page you can see the five cats’ image where we did the debugging as explained in the above paragraphs and also after that we were not able to see any page links before debugging , but, after debugging the code, now, we are able to see the two links, one link to visit cats page and another link to visit the dogs page and as you can see , both the links created are clickable links, that is if you click on the links , you will be able to visit the mentioned specific page that the developer wants the user to visit! In this particular code block, you may find that the links are clickable but not leading you to a specific landing page, that’s because, you have not yet mentioned a proper url here.

Your Homework here:

In the last part of the code block, I want you to write any specific url for the cats page and the dogs page and you can also respectively change the name of the visit pages as per what url link you are writing there in the code block.

Let me know if you were able to do this home work and after completing your home work, please paste the link to your code in codepen or you may just send a screenshot and mention if you were able to visit the page that you specified in the page that you debugged. You can use the same web page code that I used above if you want.

More HTML Tutorials here: