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

by | Oct 22, 2021 | 0 comments

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

by | Oct 22, 2021 | CSS Tips and Tricks | 0 comments



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

source

[newsletter_form]
<div class="tnp tnp-subscription"> <form method="post" action="https://www.dienodigital.com/?na=s"> <input type="hidden" name="nlang" value=""><div class="tnp-field tnp-field-firstname"><label for="tnp-1">First name or full name</label> <input class="tnp-name" type="text" name="nn" id="tnp-1" value=""></div> <div class="tnp-field tnp-field-email"><label for="tnp-2">Email</label> <input class="tnp-email" type="email" name="ne" id="tnp-2" value="" required></div> <div class="tnp-field tnp-field-button"><input class="tnp-submit" type="submit" value="Subscribe" > </div> </form> </div>