Hacker Challenge

Use your web inspector to hack your way through a series of challenges.

The web inspector is a hidden panel available in all web browsers that allows you to navigate through elements on a page and temporarily change them.

In Google Chrome, you can open your web inspector by right clicking in the browser window and clicking the last option, "Inspect".

Useful Inspector Tabs

• Once open, you will immediately see the HTML for the page you're looking at. This is the "Elements" tab. Use this area to expand, collapse, and temporarily edit the HTML sections to have a look around.

• Under "Elements", on the right side, you will see a Styles panel. Use this area to see and temporarily edit the CSS styles on the page.

• The next tab over is the "Console" tab. This shows the logs and errors of the JavaScript that's being rendered on the page. You will see validation, tips, and hints here.

• "Sources" is the next tab over. It'll tell you what files are being loaded into the browser for that page. Here you should see our HTML, JavaScript, and CSS.

• If you skip over a few tabs, the last tab we will be using is the "Application" tab. Here we will be working with the "Local Storage" area, which shows any data that our website has saved to your browser.

Modes

There are 2 modes of the hacker challenge.

• The normal challenge mode provides optional hints. It has no timer.
• The hard mode challenge provides no hints. It also has a timer, and you're limited to 60 minutes.