Assignment 1: getting started with HTML

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:

2. Build your page.

You’re going to build this page in an online code editor called Glitch.

Set up the project

  1. Open the templated source code (HTML). I will refer to this as the editor tab throughout this tutorial.The editor tab.
  2. 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.glitch sign in
  3. Click dfb1 (top left corner) to expand the Project Options menu.glitch project
  4. Click Remix This.
    Glitch will create an editable copy of the project; it randomly generates a new name. The content is unchanged (duplicate).glitch project index page
  5. Click Show Live.
    Glitch opens a new tab that contains the live page. I refer to this as the live tab throughout this tutorial.glitch show live
    glitch show live tab

Add some content!

  1. 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>
...

    glitch about me

  2. 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.
  3. 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> 
...

    glitch accomplishments

  4. View your changes in the live tab.
  5. 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>
...

    glitch about me list

  6. Check the live tab view to make sure that the new content displays correctly.

 

Learn about the DOM and Javascript

  1. Go to the live tab. At the bottom of your page you should see the text A new element!?!glitch new element
  2. Look at the code in your editor tab to try to find this text in the index.html file. It’s not there!
  3. Go back to the live tab.
    Right-click A new element!?! and select Inspect.glitch inspect element
  4. 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.devtools inspect
  5. 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>
...

     

  6. 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/
:: HCDE 532 home/syllabus : Schedule ::