Mini-Exercise: Inspector Sketches

Adapted from exercises by Marie Otsuka, and Laurel Schwulst, using code by Matt Wolff

To familiarize ourselves with the interaction of CSS with HTML, we’re going to "kill all styles" on some webpages we visit regularly. Then, remix their styles to make our own versions of the site. To do this, we’ll first use a special javascript "bookmarklet" to explore the web without CSS. Then use the "Inspector" to modify the CSS of those same webpages.

Your most helpful tool in coding is going to be the “Inspector.” Learning to use this tool will provide key insights into how your browser is reading the HTML/CSS that you write. Google Chrome for its inspector tools. Firefox and Safari also have this function available as well, but the Chrome inspector has many useful features.

Don’t worry about breaking anything! What you see in your browser is just your version of HTML that is displayed at that time. Messing with things with the inspector won’t change anything other site visitors will see. If you want to start over, simply refresh the page.

We’ll do this short exercise in pairs.

Instructions Part 1

Go to this webpage: Kill All Styles, and follow the directions to create the Kill All Styles Bookmarklet. If your partner has trouble creating the bookmarklet, share your screen and help them.

Without sharing your screens, visit sites in your browser history and remove their CSS. Find a site you find particulary interesting in its contrast between its styled version and unstyled versions. Share the url with your partner so they can try removing the pages' style from the site and be surprised at the result.

Instructions Part 2

Using the same website you selected and shared with your partner, open the inspector to not only remove styles, but try adding additional styles to override the existing styles. Try to create a new look and feel for the site they gave you. You can right-click directly on an element and "Inspect" it.

Then, share your “hacked” site with your partner through a screenshare.

Be sure to take a screenshot of your result, and link to your screenshot from your class website.