Demo: Demo: Debugging in the Browser

A walkthrough using the developer tools to debug HTML and CSS in your browser.

Scroll down...

Content

Resources

Comments

In this demo we'll walk you through debugging your HTML and CSS using the browser developer tools.

The project repo for this demo can be found here.

Once you have the repo cloned or forked you can fire up a local server in the project directory with $ ruby -run -e httpd . -p 3000 and then open it in your browser at http://localhost:3000. Click around the links and have a look around the code!

Debugging Forms and Tables

Here is a common problem experience with HTML tables that forces elements like forms to close when placed inside a table. The short answer is to wrap the table element with your form. The following video takes a closer look...

The Clearfix

The purpose of clearfixing might be unclear until you see what happens when you don't use it. The following video illustrates how clearfixing allows floated and cleared divs to display correctly.

Floats with Padding and Margins

A common detail to overlook is the effect that padding and margins have of floating elements. Padding and margins are included in an element's width and if you forget that you'll wind up pulling precious hairs out of your head trying to fit elements in a 100% width space. The next video will use the CSS function calc to solve this issue.

Wrapping Up

This demo highlighted some common bugs dealing with HTML and CSS. Always be on the look out for these bugs and never forget to double check your rendered markup in the element inspector! Try not to jump to conclusions or second guess yourself with debugging, sometimes the issue is as simple as emptying your browser cache or fixing a typo. Flex your debugging muscles first, but remember that most issues have already been experienced by someone out there so answers are usually only a Google search away!

Octocat 300


Sign up to track your progress for free

There are ( ) additional resources for this lesson. Check them out!

There are no additional resources for this lesson just yet!

Sorry, comments aren't active just yet!

Next Lesson: The Lorem Ipsum Blog Page