Browser developer tools help remove some of the guesswork when debugging your front-end code. In this video, go over how to use the CSS panel.
- [Instructor] Let's go over some tips for debugging…and inspecting our CSS with the developer tools.…I'm just using an example page with some basic HTML…and CSS for this demo.…You can find it in your exercise files,…but it's not necessary to have this file…to follow along with the demo.…Let's look at how we can use the CSS panel on the right…to inspect our code.…The first thing we can do is uncheck properties.…What that will do is temporarily remove styles.…This helps to isolate any problems…by seeing how each property changes the element,…without actually deleting any code, until you're ready.…
Anytime you see user agent style sheet,…this refers to the default styles,…generated by the browser itself.…If you see properties cross out,…it means it's being overridden by another CSS declaration.…In the dev tools, the more specific CSS selector…are listed at the top of the panel.…So to figure out which declaration may be overriding a style…scroll upwards to find it.…Look for either the same selector…or a more specific selector.…
- Reviewing CSS syntax
- Reviewing simple selectors and attribute selectors
- Using pseudo-class selectors and pseudo-element selectors
- Reviewing the CSS box model
- Adding a menu to your project
- Using float, display, and position
- Debugging CSS
- Resetting stylesheets
- Working with background images
- Exploring a mobile-first approach for responsive web design
- Creating flexible and fluid layouts
Skill Level Beginner
Building Responsive Forms with Flexboxwith James Williamson1h 20m Intermediate
1. CSS Selectors
3. Tips and Tools
4. Responsive and Mobile
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.