Developer tools

Learn about the developer tools in browsers and use them to modify an existing website.

Watch the video

  1. Video or tutorial

    You can watch the video(s) or follow along with the written tutorial—or both—they convey exactly the same information.

Goal

Learn about using the browser developer tools to modify and inspect websites.

The developer tools are really helpful when making websites because we can see what code is being applied and test solutions live in the browser.

The developer tools should almost always be open when working on websites. Since I use two monitors the developer tools are always open on my laptop, my code and browser open on the large screen.

1 Watch the video

Watch the video linked above to learn how to use the developer tools built into browsers.

2 Modify a website

We’re going to load up a website, the using the developer tools we’re going to modify it to look a specific way.

Go to this website.

Then, using the developer tools, modify it to look like the screenshots. See the list of changes below.

List of changes

  1. Background colour is different—#f2f1ed
  2. Heading font-size is larger—3rem
  3. Navigation items are rearranged
  4. The first navigation item is bold
  5. The broken image is displaying
  6. Second paragraph is gone
  7. The first paragraph is center aligned
  8. The first paragraph has the class of intro
  9. The <h2> tags all have the same font-size
  10. All the figcaptions have smaller font-sizes—.875rem (See if you can do this with only one modification)

  1. Reminder

    The stuff you do in the developer tools isn’t permanent. If you refresh this exercise you’ll have to start over.

  2. Shortcut

    ⌘⌥I opens the developer tools.

  3. Hint

    When working with multiple screens I often put the developer tools on my laptop screen and have my code on the big monitor.