Debug Session - Debug HTML with Chrome

About this lesson

Debug any website using Google Chrome's Inspect Element tool. Students will learn how to locally edit the HTML & CSS code live in the browser of any website. This is a good way to testing layouts and inspecting the code of a webpage.

Planning
Step 1
Introduction

Get Ready

You will learn how to debug any website using Google Chrome's Inspect Element tool. Students will learn how to edit the HTML & CSS code live in the browser of any website. This is great for testing layouts and inspecting the code of a webpage. Show your friends what debugging is all about.

Example:

Information
Step 2
More Information

Read This:

What is Inspect Element?
Browser web developer tool that allows you to edit the existing HTML and CSS of a website. The changes you make are not LIVE on the web and will disappear when you refresh the page.

Why is this useful?

You can:

  • Make quick drafts of a website re-design
  • Experiment with quick HTML & CSS changes
  • Inspect other website’s HTML & CSS code
  • Visualize the result without having to go into your website's code

What does it allow us to do?

  • Inspect elements with the magnifying glass
  • Investigate the CSS styles
  • Change the colors
  • Change the images
  • Change the headlines
  • Change the text values
  • And more!
Step 3
Get Started! Open Google Chrome
Step 4
Type 'www.mvcodeclub.com' into the URL bar

What is 'https'?

Do I need to type it?
Hypertext Transfer Protocol Secure (https) means that info the user exchanges with the website is secure. No, you do not need to type the https part into the URL bar. It appears on it's own, as an indicator from the website, showing it has a secure connection.

Step 5
*Right-click and choose 'Inspect Element' from the menu
Check Your Work
Step 6
Inspect Element Opens.
Step 7
Click on the magnifying glass
Step 8
Select an element in the page to inspect it
Step 9
Click on it's related line of code

What is this?
It's HTML5 code. We are highlighting and reading the HTML5 code used on this webpage. Ask yourself, "What does h4 mean?". Notice, it contains the phrase 'MV Code Club'. Next, we'll figure out how to hack this code and revise the text.

Step 10
Right-click on the code and choose "Edit as HTML"
Step 11
Highlight and revise the text
Check Your Work
Step 12
Success!

Work Check!

Have you successfully changed the text on the webpage? If not, try again! Make sure inspect element is open. Click on the magnifying glass and select the text element. Click around, and edit the code!

Step 13
Inspect the text "We teach kids to code"

Open the Styles panel
On the right, there is a "Styles" tab. This shows the website's CSS code. You can edit this code and change the appearance of the webpage.

What is CSS?

It's a special coding language that calls elements in the HTML code, and gives them unique styles on the webpage. CSS gives us control of the appearance of the HTML. We can edit properties such as color, size, shape, placement, and even animations (new with CSS3!).

Step 14
Next, inspect the navbar element
Step 15
Find the navigation bar code

Inspect the Navbar HTML code
You are inspecting the HTML of the navigation bar. It's coded with class attributes that we will edit.

Step 16
Change the color of the navigation bar

What's happening?

You are editing the CSS code live in the browser! From the Styles Tab. CSS (cascading style sheet) works with HTML to style and format elements on the webpage. By editing the CSS code, we are changing the appearance of the website.

Step 17
Find an AWESOME image online and copy it's URL address.
Step 18
Change the main image

Inspect the banner photo

Use the magnifying glass and inspect the banner photo. Notice the related HTML code in the Inspect Element panel.

Right-click and "Edit as HTML":

Empty what's inside of the image quotation marks:

Careful! Do not delete the img code syntax. Only empty what's inside of the two quotation marks. Otherwise, this hack won't work.

Paste your new image URL inside of the quotations marks:

Check Your Work
Step 19
Result

Hacked!

You have hacked the main photo of a website. Nice work! Let's re-cap. You have inspected and changed the HTML and CSS code of this website. You have revised the text, changed the font color, and replaced the image. Awesome job.

Step 20
Hack more and more!

Take what you know and go crazy. Change the HTML and CSS code of anything you see.

Challenge
Step 21
CHALLENGE

It's your turn to hack another website and take good before & after screenshots! You work can be featured on our website!

Debug Session - Debug HTML with Chrome Info

Account

MVCode

Created By

matie

Access Level

public

For Teachers and Schools

Teach coding to your students with MVCode Teach

MVCode offers an integrated product designed to teach coding to students.

Learn more about MVCode Teach