Assignment: Inspecting HackerHero

Estimated Time: 0.5 - 1 hour

Objectives:

• To get familiar with Inspect Element Tool
• To understand about spacing particularly about width, padding, border width, and margin

A good front end developer is good at using Inspect Element and we want you to also get familiar with using this wonderful tool.

Using Inspect Element,

• Visit the following sites: www.cnn.com, www.disney.com, www.espn.com and see how these sites would look without any CSS. You can do this by using Inspect Element to 'remove' the in the html. Pay attention to which content is in the headings tag (e.g. h1, h2, h3, etc), which are in ul/li, which are in paragraphs, images, etc. Note how all sites, without CSS, look like your HTML assignment! Write down your observations as you observe these sites.

• Now visit www.hackerhero.com. Remember that your browser has rendered the HTML and CSS based on what was given to the browser. However, you can adjust or modify what shows up on YOUR browser by playing with Inspect Element. Changing YOUR browser's rending doesn't mean you are changing what others see when they visit the same website. Use Inspect Element to change some of the element's padding, margin, font size, as well as the background color. Change other CSS styles to play around and to get familiar with how width, height, min-height, border, border-radius, font color, font size, vertical-align works. Take a screenshot of YOUR browser's rendering of a given page along with a summary of what you've changed and what you've learned.

Once done, upload your work below and add a comment about how many hours (roughly) this assignment took you.