Debugging CSS
Debugging CSS
Take a look at some of the most common CSS bugs and how you can debug them.
Enroll now in our Intro to Programming Nanodegree program to learn more about CSS - https://www.udacity.com/course/intro-…
Content
1.6 -> welcome to debugging CSS we all knew
6.319 -> we'd end up here because just like with
8.21 -> HTML debugging CSS takes such a great
11.809 -> deal of patience such a good eye and is
14.57 -> one of the most important parts of
16.19 -> coding CSS errors can be hard to notice
19.609 -> because the browser will often go ahead
21.619 -> and render your code just without it
24.23 -> being displayed in the way that you want
26.289 -> incorrect CSS can lead to problems
29 -> throughout your code base so it's
31.13 -> incredibly important that you isolate
32.96 -> and look for problems before you build
35.36 -> bigger websites so let's take a quick
38.3 -> look together at some of the most common
40.37 -> CSS bugs as a quick reminder bugs are
44.96 -> what we consider issues in our code so
48.26 -> anything that's an error or anything
50.03 -> that's causing behavior other than
51.77 -> what's expected is called a bug so
54.56 -> debugging then is the process of going
56.84 -> through our code to find those places
58.49 -> where the errors are removing those bugs
61.13 -> so that everything can rock on so here I
65.63 -> have set up some CSS code that has some
69.2 -> of the most common errors take a look
72.77 -> before I talk about it just to see if
74.84 -> you can see any with your eye so here in
80.659 -> the box class you'll see that I'm
83.179 -> missing a colon between the position
87.649 -> which is the property and the value
89.81 -> which is absolute it's always important
92.96 -> to make sure that the syntax is property
96.319 -> colon value semicolon now here in the ID
101.78 -> 1 I'm missing a semicolon after the
106.1 -> color red this line looks good this line
109.7 -> looks good
110.509 -> something's funny here oh I've
113.95 -> misspelled or missed named a property
117.409 -> which is one of the things that happens
118.969 -> all the time because it's not always
121.459 -> intuitive what you want something to do
123.77 -> versus what it actually is
125.09 -> so while the index is what I'm going for
127.67 -> the way that CSS understands the index
130.61 -> is Z - index it's these little errors
134.54 -> that can make
135.29 -> debugging a little difficult so here
139.25 -> you'll see the issue is that this too is
143.54 -> not prep ended with either the class or
147.23 -> ID sign of a period or a hash so it's
152.299 -> supposed to be a type but HTML doesn't
154.549 -> have a type called - it has a list it
158.15 -> has an image a button an input a text
160.819 -> area does all sorts of things but two is
163.37 -> nothing if I wanted it to be the ID - I
167.209 -> could do that if I wanted it to be the
168.95 -> class - I could do that
170.78 -> but - on its own will do nothing 3 on
174.23 -> the other hand is a perfectly valid ID
176.659 -> and this perfectly valid ID wants to
179.989 -> have a background of blue but in fact I
183.23 -> have misspelled it so that it has a
185.06 -> background of blue which is nothing
188.87 -> unfortunately because BL uue is not a
191.9 -> color that the browser will recognize
194.079 -> blue this is an example of how you would
198.109 -> deed CSS now good luck on your own
Source: https://www.youtube.com/watch?v=ynVhMKnuLos