Start Here
3 lessons

Module 3 - Lesson 7

Inspecting CSS in the Browser

Lesson Overview

In this lesson, I’m going to walk you through all the CSS-related settings of the Chrome Browser Inspector tool, which is a must-know tool for anyone who wants to learn how to target website elements and learn various CSS properties.

Video Chapters

00:00 Introduction

00:46 Opening the Dev Tools

01:22 Change the panel position

01:57 Enabling Responsive Mode

02:23 Selecting Website Elements

02:40 HTML Source Panel

03:15 CSS Panels

05:57 CSS Box Model

07:51 Inspecting Elements

11:14 Writing Custom CSS

15:32 Selecting pseudo-classes

16:29 Enabling CSS Overview

Action Items

Inspect your website! Go through all the different Dev Tools settings, change and tweak the CSS. Don’t be afraid to edit and check different elements.Enable the CSS Overview experimental feature and check how well your website is doing and if you’ve been consistent with your color palettes and typography.