Debugging CSS in Real Time with DevTools

The lecture starts off teaching you a way to discover new CSS properties.

Then you get introduced to the browser Developer Tools, usually called the DevTools. You learn that you can right-click to inspect an element on the page.

You can select an element and see its CSS properties on the side.

You can click the color circle to pick a different color and see the changes in real time.

You can select an element and specify new CSS properties under the element and braces section.

You can use the checkboxes next to the property name to see what it looks like before and after that property is applied.

You can use the DevTools to provide you suggestions for property names as you start typing characters. The DevTools also provides suggestions for the value of the property, so you can go through them and see which one suits better your use case.

Students ask questions in the end.