HTML Fundamentals Pre Work

Debugging your front-end code can be an intimidating part of the development process, but it’s also one of the most powerful skills you can acquire. Developers of all levels spend a significant amount of time troubleshooting code, but the more comfortable you are with debugging tools, the easier it will be to isolate, identify and fix broken code.

The front-end languages (HTML, CSS and JavaScript) are run entirely in the browser, so the technique for troubleshooting broken code can happen in many places. Luckily, modern browsers are aware of this and give us a collection of advanced tools to help us debug.

Developer Tools

One of the first tools you should familiarize yourself with when doing front-end development are the built-in browser Developer Tools, commonly referred to as “dev tools”. To open in Chrome:

• Ctrl + Shift + i
• (or) Right click on the browser window and select inspect

The Elements Panel: Debugging HTML, CSS & DOM Events

Most helpful for:

• debugging layout and styling issues
• monitoring DOM Events

The elements panel lets you view the entire HTML source of the current page you are viewing. From here, you can edit, add or remove content and elements directly on the page. Though your changes won’t be saved (any changes made here will be lost upon refreshing the page), sometimes it’s helpful to make tweaks directly in this panel so you can see what effect the changes will have on your application before you implement them.

Dev Tools Introduction

Please watch the video below, the complete the exercises to work towards that muscle memory of using the dev tools!

Dev Tools Practice Exercises

• Open the dev tools on your favorite site
• Move the dock to the bottom
• Close the dev tools
• Re-open the dev tools - where is the dock?
• Click the inspect arrow and click on something in the browser. What HTML element is it?
• Click on something else in the browser, something you suspect will be a different HTML element.
• Move the dock to the right
• Make some changes to the webpage by updating the HTML and/or CSS in the dev tools.
• Close the dev tools
• Re-open the dev tools - where is the dock?
• Open the same site in another tab - are the dev tools open in that tab?
• Close your dev tools
• Open and close them one last time to make sure you’re getting that keyboard shortcut down! ✅ Send a screenshot of the changes you made in the site to your instructors!