Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Debugging CSS with Chrome DevTools

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Debugging Styles Challenge

2:05 with Guil Hernandez

You're ready to debug CSS issues on your own using DevTools. With Chrome DevTools, debugging CSS doesn't always have to be tricky and frustrating. Becoming a skilled CSS debugger takes practice, and just like learning to code, the more you practice the faster and more efficient you'll be at finding and fixing bugs.

Resources

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    With Chrome DevTools, debugging CSS doesn't always have to be tricky and 0:00
    frustrating. 0:04
    Becoming a skilled CSS debugger takes practice. 0:04
    And just like learning to code, the more you practice the faster and 0:07
    more efficient you'll be at finding and fixing bugs. 0:10
    So now you're ready to debug CSS issues on your own using DevTools. 0:13
    Be sure to launch the work space for this video to get the latest files for 0:17
    this exercise. 0:21
    So this is the same RSVP App we looked at earlier, 0:22
    except that I removed the JavaScript. 0:25
    And just for this exercise, I manually added four names to the guest list. 0:27
    Now when you preview the workspace, you'll see a page with several problems. 0:32
    So let's go over the issues you'll need to debug. 0:36
    The first thing you'll notice is that the header has no background, and 0:39
    the space between the RSVP heading and the top of the header is no longer present. 0:43
    The heading up here is a little too close to the top edge of the app, 0:48
    it should look like this. 0:52
    The form submit button is also not displaying the correct height and 0:54
    background color, so it looks a lot shorter than it should be. 0:58
    And there's a little extra space between the right edge of the form and the button, 1:02
    it should look like this. 1:06
    Finally there are a couple of issues with our lists of guests. 1:09
    First the list items are being displayed on separate lines when they should 1:13
    be displayed side by side when the view port is 769 pixels or wider. 1:19
    And the items up here too narrow in all view port sizes. 1:23
    For example, 1:27
    they should each take up an entire line here in the narrowest breakpoint. 1:28
    And display as four equal size items side by side in wider breakpoints, like this. 1:32
    Second, notice all the white space on the left side of the guest list at wider 1:41
    breakpoints. 1:46
    And at this medium breakpoint, the label and 1:47
    check box are even dropping down to the bottom of the container. 1:49
    I'll give you a hint for this on, check the float properties. 1:53
    So this exercise is a great way to practice what you've learned about 1:57
    debugging CSS. 2:00
    In the next video, I'll show you my solution. 2:01
    Good luck and have fun. 2:03

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up