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