Using Dev Tools

Three ways to open the developer tools:

1. Right click inside an online page. Then click “Inspect” or “Inspect Element:”.
2. Hold Ctrl and Shift together and press “I”.
3. On Firefox and Brave Web Browser, click the hamburger icon on the upper right corner. Then click “More tools”. Then click “Web Developer Tools”.

Click on a header, or paragraph, etc. that you want to inspect OR right click on it and click “Inspect” and it will go directly to the line in your HTML code that you want to inspect or change.

• Under the “Inspector” tab on the left side you can see it’s HTML code.
• Under the “Filter Styles” tab in the middle, you can see it’s CSS style codes.
  • You can click on the :hov tab to toggle on and off to inspect and try out what happens when you ✔️ the hover, active, etc. anchor options.