Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.

Preview

Start a free Basic 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 Videos

  • 0:00

    With Chrome DevTools, debugging CSS doesn't always have to be tricky and

  • 0:04

    frustrating.

  • 0:04

    Becoming a skilled CSS debugger takes practice.

  • 0:07

    And just like learning to code, the more you practice the faster and

  • 0:10

    more efficient you'll be at finding and fixing bugs.

  • 0:13

    So now you're ready to debug CSS issues on your own using DevTools.

  • 0:17

    Be sure to launch the work space for this video to get the latest files for

  • 0:21

    this exercise.

  • 0:22

    So this is the same RSVP App we looked at earlier,

  • 0:25

    except that I removed the JavaScript.

  • 0:27

    And just for this exercise, I manually added four names to the guest list.

  • 0:32

    Now when you preview the workspace, you'll see a page with several problems.

  • 0:36

    So let's go over the issues you'll need to debug.

  • 0:39

    The first thing you'll notice is that the header has no background, and

  • 0:43

    the space between the RSVP heading and the top of the header is no longer present.

  • 0:48

    The heading up here is a little too close to the top edge of the app,

  • 0:52

    it should look like this.

  • 0:54

    The form submit button is also not displaying the correct height and

  • 0:58

    background color, so it looks a lot shorter than it should be.

  • 1:02

    And there's a little extra space between the right edge of the form and the button,

  • 1:06

    it should look like this.

  • 1:09

    Finally there are a couple of issues with our lists of guests.

  • 1:13

    First the list items are being displayed on separate lines when they should

  • 1:19

    be displayed side by side when the view port is 769 pixels or wider.

  • 1:23

    And the items up here too narrow in all view port sizes.

  • 1:27

    For example,

  • 1:28

    they should each take up an entire line here in the narrowest breakpoint.

  • 1:32

    And display as four equal size items side by side in wider breakpoints, like this.

  • 1:41

    Second, notice all the white space on the left side of the guest list at wider

  • 1:46

    breakpoints.

  • 1:47

    And at this medium breakpoint, the label and

  • 1:49

    check box are even dropping down to the bottom of the container.

  • 1:53

    I'll give you a hint for this on, check the float properties.

  • 1:57

    So this exercise is a great way to practice what you've learned about

  • 2:00

    debugging CSS.

  • 2:01

    In the next video, I'll show you my solution.

  • 2:03

    Good luck and have fun.

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

Sign up