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.
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.
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?
What does it allow us to do?
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.
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!).
Use the magnifying glass and inspect the banner photo. Notice the related HTML code in the Inspect Element panel.
Careful! Do not delete the img code syntax. Only empty what's inside of the two quotation marks. Otherwise, this hack won't work.