developer-tools.md

layout	title	desc	hide_markbot	extra_tutorials	playlist	video	goal	steps
lesson	Developer tools	Learn about the developer tools in browsers and use them to modify an existing website.	true	title url Browser developer tools browser-developer-tools	browser-developer-tools	1-developer-tools	before no_image 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. true	title before Watch the video Watch the video linked above to learn how to use the developer tools built into browsers. title before notes 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.](https://ltw-webdev-1.github.io/dev-tools-modifier/) **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` 1. Heading font-size is larger—`3rem` 1. Navigation items are rearranged 1. The first navigation item is bold 1. The broken image is displaying 1. Second paragraph is gone 1. The first paragraph is center aligned 1. The first paragraph has the class of `intro` 1. The `<h2>` tags all have the same font-size 1. All the figcaptions have smaller font-sizes—`.875rem` *(See if you can do this with only one modification)* label text Reminder The stuff you do in the developer tools isn’t permanent. **If you refresh this exercise you’ll have to start over.** label text Shortcut `⌘⌥I` opens the developer tools. label text Hint When working with multiple screens I often put the developer tools on my laptop screen and have my code on the big monitor.