This exercise will get you started learning the anatomy of a web page with the help of Chrome DevTools.
You will learn how to:
- Write some basic HTML and insert an image into the page
- Use the Elements panel in Chrome DevTools
- Create a separate file to contain your JavaScript code
- Use the Network panel in Chrome DevTools
- Google Chrome
- A code editor (e.g. Atom or VS Code)
❗ HTML is a markup language. HTML separates "content" (words, images, audio, video, and so on) from "presentation" (instructions for displaying each type of content). HTML uses a pre-defined set of elements to define content types. Elements contain one or more "elements" that contain or express content. elements are enclosed by angle brackets, and the closing element begins with a forward slash. (developer.mozilla.org)
Basic HTML structure:
<!DOCTYPE html>
<html>
<head>
<title>Title of my page</title>
</head>
<body>
Some text
</body>
</html>- The
<!DOCTYPE html>tag at the top tells the browser that we are using version 5 of the HTML standard. - The
<html>element surrounds all elements in the page. - The
<head>elements contains element that define meta data about the contents of the page, for instance the<title>. - The
<body>element surrounds the page content.
Read more about HTML here: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Introduction
✏️ Open exercise2.html in Chrome and in your code editor.
✏️ Locate the empty <body>-element. This is where we will be adding some markup.
✏️ To create a main heading for the page, add a <h1>-element with the text "This is my heading" inside the <body> element.
✏️ Next we will add a paragraph of text under the heading. Add a <p>-element with the text "This is my paragraph" underneath the previous <h1>-element.
✏️ Refresh the page in the browser. The result should look something like this:
- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p
- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements
✏️ Download an image of your choice (GIF/PNG/JPG) and rename the file something more sensible.
✏️ Create a sub folder called images inside the folder containing exercise2.html
✏️ Move your image file into the images folder. The resulting folder structure should look like this:
✏️ To display the image in the web page, we need to add an <img/> element. The img element does not have a closing element. Note the / at the end of the element:
<img src="" alt="My amazing image" />If you refresh the browser, no image will be displayed yet. We need to set the src attribute to the relative path of the image in the images folder on your computer:
<img src="images/my-image.png" alt="My amazing image" />❗ The
altattribute ("Alternate text") is used to specify a descriptive text that should be displayed if the image cannot be loaded. It is also important for accessibility (screen readers).
✏️ Refresh the page. The result should be something like this:
❗ Having trouble displaying the image? Double check that the the path to the file in the
srcattribute is correct. Also verify that the syntax of the<img/>element is correct. Still not working? Open the Console panel in Chrome DevTools like in Exercise 1 to debug.
We can use the Elements panel in Chrome DevTools to make changes to the DOM (and CSS) on the fly in the browser.
✏️ Open the Chrome Dev Tools by doing one of the following:
- Select More Tools > Developer Tools from the Chrome Menu.
- Right-click on a page element and select Inspect
- Use the keyboard shortcuts
Ctrl+Shift+I(Windows) orCmd+Opt+I(Mac)
You should now see the Elements panel displaying the DOM tree of your page:
✏️ Try moving the mouse pointer over some of the elements. The corresponding section of the web page will "light up" to tell you where the element currently selected is located in the layout of the page.
✏️ Try using the up and down arrow keys to navigate up and down the DOM tree.
✏️ Try editing the heading by first selecting the <h1> element in the DOM tree view and then double click on the text "This is my heading". Type something and press enter to stop editing and display the changes in the web page.
📖 Read more about the Elements panel in DevTools here: https://developers.google.com/web/tools/chrome-devtools/inspect-styles/
In Exercise 1 we created some simple JavaScript inside a <script> element in the web page. Now we´ll look at creating a separate .js file for our JavaScript code. This makes the code reusable, as we can link to the same script from multiple pages and share the script with others.
✏️ Start by creating a scripts folder inside the folder where exercise2.html is located.
✏️ Create a file called exercise2.js inside the scripts folder you just created.
✏️ Add the following code to the exercise2.js file
alert('Hello from an external JavaScript file!')✏️ To make your web page load this script, we need to add a <script> element with an src attribute (like we did with the image):
<script src=""></script>❓ Can you guess what the value of the src attribute needs to be in order to load your script? Hint: Take a look at the image source path.
✏️ Refresh the web page and you should now see an alert box with the text "Hello from an external JavaScript file!".
📖 More info about the
<script>element here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script
Lastly we will take a look at the Network panel in Chrome DevTools. The Network panel lets you look at a timeline of what resources are loaded when you load the web page, such as the page itself, scripts, images, videos and background HTTP requests.
✏️ Open the following URL in Chrome: http://output.jsbin.com/redoqo
✏️ Open the Chrome Dev Tools by doing one of the following:
- Select More Tools > Developer Tools from the Chrome Menu.
- Right-click on a page element and select Inspect
- Use the keyboard shortcuts
Ctrl+Shift+I(Windows) orCmd+Opt+I(Mac)
✏️ Select the Network panel. Notice that the panel is empty. This is because we need to have the panel open when the page loads in order to record network activity. Press CTRL+R (Windows) or CMD+R (Mac) to refresh the page and record.
✏️ You should now see a list containing multiple requests. A short description of some of the columns in the list:
- Method: The HTTP Verb (GET, POST, PUT, etc.) used in the request
- Status: The current status of the request (200, 404, 500, etc.)
- Type: The type of the requested resource (png, script, document, stylesheet)
- Size: The size of the response
- Time: The total duration of the request
✏️ The page contains a request to a image called fire.gif. See if you can locate the request in the list:
- How big is the image?
- How long did it take to download and display the image?
- What is the status of the request?
✏️ Open the following page: http://jsbin.com/rezuhiv ✏️ Follow the steps above to record network activity ❓ Can you spot what's wrong by looking at the list of requests? (Hint: Errors are light-red).
- What is the status code of the failed request?
📖 Read more about the Network panel in DevTools here: https://developers.google.com/web/tools/chrome-devtools/network-performance/resource-loading