Chrome DevTools Crash Course - using Chrome 'Inspector' for CSS Development

Описание: In this Chrome Developer Tools tutorial, I'll show you the basic features, where everything is located, and the most important tools you should know about. See exactly how I use DevTools for CSS tweaks, troubleshooting, and development.

I constantly use DevtTools in my workflow, and it has so many different use cases:
• Reverse-engineer a design from another website
• Troubleshoot a CSS problem on my own sites
• Temporarily disable CSS styles
• Plan a new CSS design in real-time

Here's what we'll cover in this video:

0:00 - Intro
0:25 - How to Open Chrome DevTools Panel
0:56 - Repositioning the Panel
1:32 - Changing text size of DevTools
1:43 - Basic Overview (where everything is located)
2:56 - Writing new CSS Rules
4:48 - Toggling CSS styles
5:23- The Computed Tab (important features)
6:32 - Targeting Mode
7:41 - Editing HTML source code
8:42 - Toggling Element State (:Hover)
10:00 - Responsive Mode (screen size preview)
10:43 - Outro and next steps

#css #devtools #chrome