This is the first in a series of tutorials that teach you the basics of web development. You will also learn about a set of web developer tools called Chrome DevTools that can increase your productivity.
In this particular tutorial, you learn about HTML and the DOM. HTML is one of the core technologies of web development. It is the language that controls the structure and content of webpages. The DOM is also related to the structure and content of webpages, but you'll learn more about that later.
You are going to learn web development by actually building your own website. By the time you complete all of the tutorials in the DevTools for Beginners series, your finished site will look like Figure 1.
By the end of this tutorial, you will understand:
- How HTML and the DOM create the content that you see on webpages.
- How Chrome DevTools can help you experiment with HTML and DOM changes.
- The difference between HTML and the DOM.
You'll also have a real website! You can use this site to host your resume or blog.
Before attempting this tutorial, complete the following prerequisites:
- If you're unfamiliar with HTML, read Getting Started with HTML.
- Download the Google Chrome web browser. This tutorial uses a set of web development tools, called Chrome DevTools, that are built into Google Chrome.
Set up your code
You're going to build your site in an online code editor called Glitch.
Open the source code via this link. This tab will be called the editor tab throughout this tutorial.
Click dfb1. The Project Options menu opens in the top-left corner.
Click Remix This. Glitch creates a copy of the project that you can edit and randomly generates a new name for the project. The content is the same as before.
If you plan on completing the next tutorial in this series, click Sign In and sign in to Glitch with your GitHub or Facebook account. If you don't sign in you will lose the ability to edit this project once you close the editing tab.
Click Show Live. A new tab opens, showing you the live page. This tab will be called the live tab throughout this tutorial.
Your site is pretty empty. Follow the steps below to add some content to it!
In the editor tab, replace
<!-- You're "About Me" will go here. -->with
... <body> <p>Your site!</p> <main> <h1>About Me</h1> </main> ...
View your changes in the live tab. The text
About Meis visible on the page. It's larger than the rest of the text, because the
<h1>element represents a section heading. Your web browser automatically styles headings in larger font sizes.
Back in the editor tab, insert
<p>I am learning HTML. Recent accomplishments:</p>on the line below where you just put
... <body> <p>Your site!</p> <main> <h1>About Me</h1> <p>I am learning web development. Recent accomplishments:</p> </main> ...
View your change in the live tab.
Back in the editor tab, add a list of your accomplishments:
... <p>I am learning web development. Recent accomplishments:</p> <ul> <li>Learned how to set up my code in Glitch.</li> <li>Added content to my HTML.</li> <li>TODO: Learn how to use Chrome DevTools to experiment with content changes.</li> <li>TODO: Learn the difference between HTML and the DOM.</li> </ul> ...
Again, go back to the live tab to make sure that the new content is displaying correctly.
Experiment with content changes in Chrome DevTools
If you were developing a big page with a lot of HTML, you can imagine that it might be somewhat tedious to go back-and-forth between the editor tab and the live tab hundreds of times in order to see your changes, especially if you weren't sure what exactly to put on the page. Chrome DevTools can help you experiment with content changes without ever leaving the live tab.
Learn the difference between HTML and the DOM
Before you start editing your content from Chrome DevTools, it's helpful to understand the difference between HTML and the DOM. The best way to learn is by example:
Go to the live tab. At the bottom of your page you see the text
A new element!?!.
Go back to the editor tab and try to find this text in
index.html. It's not there!
Go back to the live tab, right-click
A new element!?!, and select Inspect.
DevTools opens up alongside your page.
<div>A new element!?!</div>is highlighted blue. Although this structure in DevTools looks like your HTML, it is actually the DOM Tree.
When your page loads, the browser takes your HTML to create the initial content of the page. The
DOM represents the current content of the page, which can change over time.
<div>A new element!?!</div content is added to your page because of the
<div>A new element!?!</div> to your page. That is why this mystery text is visible on
your live page, but not in your HTML.
Edit the DOM
If you want to quickly experiment with content changes without ever leaving the live tab, try DevTools.
In DevTools, right-click
Your site!and select Edit as HTML.
<p>Your site!</p>with the code below.
<header> <p><b>Welcome to my site!</b></p> <button>Download my resume</button> </header>
Press Command+Enter (Mac) or Control+Enter (Windows, Linux, Chrome OS) to save your changes, or click outside of the box. Your changes automatically show up in the live view of your page. The text
Your site!has been replaced with the new content.
This workflow is only good for experimenting with content changes. If you reload the page or close the tab, your changes will be gone forever. If you're using this workflow and you want to save your changes, you need to manually copy those changes over to your HTML.
The next couple of sections show you some more ways that you can change content from the DOM Tree.
You can also change the order of DOM nodes. For example, on your web page the navigation menu is near the bottom. To move it to the top:
<nav>node in the DOM Tree of DevTools.
<nav>node to the top, so that it's the first child below the
<nav>node is now displaying at the top of your page.
Delete a node
You can also remove nodes from the DOM Tree.
In the DOM Tree, click
<div>A new element!?!</div>. DevTools highlights the node blue.
Press the Delete key on your keyboard. The
<div>A new element!?!</div>node is removed from your DOM Tree.
Copy your changes
You're almost done. You've made a few changes to your page in DevTools, but they're not yet saved to your source code.
Reload your live tab. The changes that you made in the DOM Tree disappear. In particular, the text
Your site!returns to the top of the page, and the text
A new element!?!returns to the bottom.
Copy the code below.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <header> <p>Welcome to my site!</p> </header> <nav> <ul> <li><a href="/">Home</a></li> <li><a href="/contact.html">Contact</a></li> </ul> </nav> <main> <h1>About Me</h1> <p>I am learning web development. Recent accomplishments:</p> <ul> <li>Learned how to set up my code in Glitch.</li> <li>Added content to my HTML.</li> <li>Learned how to use Chrome DevTools to experiment with content changes.</li> <li>Learned the difference between HTML and the DOM.</li> </ul> </main> </body> </html>
Go back to the editor tab and replace the contents of your
index.htmlfile with the code that you just copied.
- Complete the next tutorial in this series, Get Started with CSS, to learn how to style your page and experiment with style changes in Chrome DevTools.
- Read Introduction to the DOM to learn more about the DOM.
- Check out a course like Introduction to Web Development to get more hands-on web development experience.