CSS, HTML, Tools & Generators

Chrome Developer Tools Exercise: Web Site Vandalism

Go to LangaraPRM.com in Chrome.

Right click (control-click on Mac) in the page and choose Inspect Element.

This will open up the Chrome Developer Tools. Make sure that you are in the Elements section. You can select it using the tabs on the top of the Inspector.

In this exercise, I want you to change the following:

  • every image on the page
  • every headline
  • every story description
  • every author name
  • every section name
  • every word in a menu (leave the social and search icons)w

To change the images, you can use any or all of the following Image Placeholder services:

  • placekitten.com
  • placecage.com
  • placezombie.com
  • fillmurray.com
  • placecage.com
  • stevensegallery.com
  • lorempixel.com
  • p-hold.com

For bonus points, figure out how to change a font or two, or a font color, or a background color.

When you are done, take a screenshot of the page.

Make sure that I can find your effort at http://mylinux.langara.bc.ca/~your-id/dev-tools-exercise


Below is an example of what I’m asking you to do. We start with the original site:

Screen Shot 2016-09-05 at 6.16.38 PM


And here’s the new and improved version (work in progress):


Screen Shot 2016-09-05 at 6.17.30 PM