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!
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 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.
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.
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!