The Box Model Lesson A

Being able to inspect and debug your HTML and CSS is critical to front-end development. This lesson will take us through the Chrome Dev Tools, which allow you to see detailed information about your elements and CSS rules, as well as assist you in finding and fixing problems in your code. To open up the inspector, you can right-click on any element of a webpage and click “Inspect” or press <kbd>F12</kbd>. Go ahead and do that right now to see the HTML and CSS used on this page. Don’t get overwhelmed with all the tools you’re now seeing! For this lesson, we want to focus on the Elements and Styles panes.