In this tutorial, you will build a simple web page in an online code editor called Glitch. This tutorial is cribbed from Google Tools for Developers and is the first part of assignment 1.
1. Before starting this tutorial, complete these prerequisites:
- Read/review: Getting Started with HTML.
- Download: Google Chrome browser. We will use Chrome developer tools.
2. Build your page.
You’re going to build this page in an online code editor called Glitch.
Set up the project
- Open the templated source code (HTML). I will refer to this as the editor tab throughout this tutorial.
- Click Sign In (upper right corner) and sign in to Glitch.
Either use your GitHub or Facebook account credentials or create a new account.
You must sign to retain the ability to edit this project once you close the editing tab. - Click dfb1 (top left corner) to expand the Project Options menu.
- Click Remix This.
Glitch will create an editable copy of the project; it randomly generates a new name. The content is unchanged (duplicate). - Click Show Live.
Glitch opens a new tab that contains the live page. I refer to this as the live tab throughout this tutorial.
Add some content!
- In the editor tab, replace
<!-- Your "About Me" will go here. -->
with
<h1>About Me</h1>
.... <body> <p> Your site! </p> <main> <h1> About Me </h1> </main> ...
- View your changes in the live tab.
The text About Me is now visible on the page. The h1 element is equivalent, semantically, to the page title. The browser automatically styles headings in larger or bolder type; you can customize their appearance with CSS. - Return to the editor tab. On the line below
<h1>About Me</h1>
add<p>I am learning HTML. Recent accomplishments:</p>
.... <h1> About Me </h1> <p>I am learning HTML. Recent accomplishments:</p> ...
- View your changes 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> ...
- Check the live tab view to make sure that the new content displays correctly.
Learn about the DOM and Javascript
- Go to the live tab. At the bottom of your page you should see the text
A new element!?!
- Look at the code in your editor tab to try to find this text in the index.html file. It’s not there!
- Go back to the live tab.
Right-clickA new element!?!
and select Inspect. - Chrome Developer Tools will open alongside your page (location depends on prior customization).
<div>A new element!?!</div>
is highlighted blue. Although in DevTools it looks as though your HTML contains this code, it does not.This content has been added to your page because of the<script src="new.js"></script>
code at the bottom of your HTML document. This is an example of the DOM Tree in action. To edit this text, you have to edit the javascript. Read Introduction to the DOM to learn more about the DOM. - Add some more content! Replace
<p>Your site!</p>
with the code below. Then check the live tab view to make sure that the new content displays correctly.... <header> <p><strong>Welcome to my site!</strong></p> <button>Download my resume</button> </header> ...
- Copy the URL in your live tab and paste it in the text document that is the Assignment 1 deliverable. This is mine: https://nosy-anglerfish.glitch.me/