How to debug CSS with Firefox Developer Tools

Coder Coder ยท Beginner ยท๐Ÿ–Œ๏ธ UI/UX Design ยท2y ago
๐Ÿ”ฅ My course: Responsive Design for Beginners! https://coder-coder.com/responsive/ ๐Ÿ’ป Become a full-stack web dev with Zero to Mastery: https://academy.zerotomastery.io/a/aff_338z7xnj/external?affcode=441520_ti97uk6b In this video I show you how to use Firefox Developer Tools to debug and troubleshoot your HTML and CSS. Firefox Developer Tools Documentation - https://firefox-source-docs.mozilla.org/devtools-user/index.html 00:00 - Intro 01:00 - Turn on developer tools, main UI in the dev tools panel 02:12 - Markup View, search, and edit HTML 08:15 - Color picker 08:48 - Breadcrumbs bar 09โ€ฆ
Watch on YouTube โ†— (saves to browser)

Chapters (15)

Intro
1:00 Turn on developer tools, main UI in the dev tools panel
2:12 Markup View, search, and edit HTML
8:15 Color picker
8:48 Breadcrumbs bar
9:21 Rules tab
16:04 Layout tab, grid and flexbox inspector
24:05 Computed tab
26:16 Changes tab
27:49 Fonts tab
29:44 Navigating tabs and 3-panel view
30:48 Responsive Design Mode
34:06 Network tab
36:35 Accessibility tab
40:39 Storage tab
Can I code up this UI in 10 minutes?
Next Up
Can I code up this UI in 10 minutes?
Kevin Powell