Explore our extensive collection of courses designed to help you master various subjects and skills. Whether you're a beginner or an advanced learner, there's something here for everyone.
Join us for our free workshops, webinars, and other events to learn more about our programs and get started on your journey to becoming a developer.
For all the self-taught geeks out there, here is our content library with most of the learning materials we have produced throughout the years.
It makes sense to start learning by reading and watching videos about fundamentals and how things work.
Data Science and Machine Learning - 16 wks
Full-Stack Software Developer - 16w
Search from all Lessons
Curated list of small interactive and incremental exercises you can take to get better at any coding skill.
Curated section of projects to build while learning with simple instructions, videos, solutions, and more.
Guides on different topics related to the technologies that we teach in our courses
HTML Code is difficult to debug initially, but it's easy to grasp if you follow this recipe. You only need to know 2-3 things before starting to code or debug in HTML that will make you a master. Yes, it's that easy, so don't worry and keep reading.
If you are interested in debugging other languages or technologies, here is our full guide about what is debugging and how to become a master of debugging when coding front-end and back-end web development.
This guide is about fixing a bug, but it's worth mentioning how to prevent the majority of the bugs in the first place:
<p>, close it immediately! Like this:
<p></p>, and then proceed to fill the inner HTML content.
The most effective debugging tools for HTML are:
Let's go over each of them in detail.
You may assume that the code you wrote is the one being displayed by the website. NOPE! There are multiple reasons why your original code may not match the source code being used on the website.
Sometimes the browser will use an old version of the code instead (cache memory). This is called:
Browser Cache. Caching can be a common source of confusion for junior developers, leading to changes not appearing on the website as expected.
Cache errors: You need to ensure the code you wrote is the same code rendered to your website.
Make sure to disable browser cache in the developer tools. Also, get used to holding the
shiftkey when refreshing a website during development.
Every major browser has Developer Tools. The first tab in the developer tools is called "Elements", and it contains -almost- everything you need to fix your bugs.
The Dev Tools Inspector shows a live version of your code instead of your original source code. This "live version" is called "The DOM". It's what the browser was able to interpret from your code. These are some cases that make the inspector great:
Minification: Sometimes, websites compress and optimize the code for faster loading times. The HTML inspector will show the minified code, which may be difficult to read.
Browser extensions: Ad blockers or script blockers modify the code shown in the HTML inspector.
Server-side rendering: the HTML inspector will show the code rendered on the server rather than the source code.
The last crucial debugging tool for HTML is your coding IDE (editor). Most of the IDEs offer the following features:
If a tag is not closed correctly. For example, if you forget to close a
<div> tag: The code editor might highlight the entire block of code that follows the unclosed tag in red. You can also see the error in the terminal if you use plugins like prettier. If you click on an opening tag, the editor will also highlight the closing tag.
HTML tags have attributes, for example, the
<img> tag has a
<img src="https://domain.com/something" />. Unfortunately, sometimes we make mistakes when opening or closing those tags.
To find those errors, the best tool is the syntax highlighter. It will show weird coloring; look at this image for a better understanding.
This is funny because everyone makes this mistake, I did it, you did it or will do it, and everyone else did it or will do it.
How do you know your link tag is wrong? The Dev Tools Inspector console will show a 404 error like this (look at the image below):
Note: It shows the URL it used to retrieve your stylesheet; check that the URL is OK.