Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

YouTube

Firefox Developer Tools for Beginners

TheCoderCoder via YouTube

Overview

Learn how to use Firefox Developer Tools to debug and troubleshoot HTML and CSS in this comprehensive tutorial. Explore the main UI of the developer tools panel, including the Markup View for searching and editing HTML. Discover useful features like the color picker, breadcrumbs bar, and Rules tab for CSS manipulation. Dive into the Layout tab to inspect grid and flexbox layouts, and utilize the Computed and Changes tabs for in-depth style analysis. Explore typography options in the Fonts tab and master navigation through tabs and the 3-panel view. Get hands-on experience with Responsive Design Mode, Network monitoring, Accessibility testing, and Storage management. By the end of this 42-minute video, gain practical skills to enhance your web development workflow using Firefox's powerful debugging tools.

Syllabus

- Intro
- Turn on developer tools, main UI in the dev tools panel
- Markup View, search, and edit HTML
- Color picker
- Breadcrumbs bar
- Rules tab
- Layout tab, grid and flexbox inspector
- Computed tab
- Changes tab
- Fonts tab
- Navigating tabs and 3-panel view
- Responsive Design Mode
- Network tab
- Accessibility tab
- Storage tab

Taught by

Coder Coder

Reviews

Start your review of Firefox Developer Tools for Beginners

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.