Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
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.
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