Studio: Making Headlines
Getting Ready: Developer Tools
As you've learned, debugging code is an essential part of coding. When it comes to working with web pages, browser developer tools are indispensable.
In this course, we will mostly use Firefox as our browser. If you haven't installed Firefox, you can get it from Mozilla. Other browsers have good developer tools as well (Chrome, in particular) but we're going to stick with Firefox. If you are more comfortable with another browser, you'll find that most of the developer tools functionality exists in other browsers' dev tools as well.
Firefox's developer tools contain a lot of functionality, and we will only begin to touch on it here, learning more of its functionality later in the unit. In this class, we'll learn about the tools available for working with HTML elements.
Walkthrough
Prior to the studio, the instructor will lead the class through an overview of some basic functionality of Firefox's dev tools, including but not necessarily limited to:
- How to open dev tools
- Inspecting an HTML element
- Modifying an element's HTML
- The difference between the content displayed when using "View Source" and what's in the "Inspector" tab
Making Headlines
Pick a news site (The New York Times, for example), and use your browser's developer tools to modify one of the main articles to use a picture and text of your choosing.
Have fun with this (see our example below), but be respectful of others and avoid overtly critical political or social commentary.
Optional: Share your creation in the #showcase channel on Slack, and see what others have created!