Update Your Home Page with Essential HTML

Back to: Web Design for All Ages

In this hands-on activity, we are going to update our bare-bones index.html home page with some essential HTML markup.

Pre-requisites

This exercise assumes the following:

  1. You should already have a Github pages repo setup (e.g. https://github.com/yourusername/yourusername.github.io).
  2. You should have already established a local dev environment (e.g. already cloned your Github repo to your local computer. If not, please refer to the previous lesson(s).
  3. You should already have a bare-bones, minimal index.html file already created.

Step

1

In VS Code, open up your bare-bones, initial start of the home page (index.html)

Launch your text editor, VS Code, and open your index.html file.

Remove all inline CSS in the head of your index.html file.

If you completed a previous exercise of temporarily placing CSS into the head of your index.html file within style tags, then please delete the CSS.

Delete the CSS – the no-longer-needed CSS in the head will be put back in later, via an external CSS style sheet.

<style>
    body {
        background: yellow;
        font-family: sans-serif;
        display: grid;
        align-content: center;
        min-height: 100vh;
        text-align: center;
    }

    h1 {
        font-size: 100px;
        text-transform: uppercase;
        margin: 0;
    }

    p {
       font-size: 30px;
        color: red;
    }
</style>

Once deleted, your file should return to looking something like this:

<html>
<head>
<title>Title of the Web Page</title>
</head>
<body>
<h1>Large Heading</h1>
<p>This is a paragraph of text. Lorem ipsum et dolorem.</p>
</body>
</html>
view raw barebones.html hosted with ❤ by GitHub

Step

2

Add in Essential HTML File & Head Elements

As you learned in a previous lesson, update your index.html file with the following essential/core HTML:

  1. Doctype
  2. HTML Language Setting (add the lang=”en” attribute)
  3. Meta Charset Character Setting
  4. Meta Description
  5. Meta Viewport
  6. Link to External CSS file (HOLD)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Summer Site 2019</title>
<meta name="description" content="This is my Summer 2019 website." />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
</head>
<body>
<h1>Summer 2019</h1>
<p>I created this site as part of my summer project at Iolani.</p>
</body>
</html>
view raw barebones-html-with-essentials-summer2019.html hosted with ❤ by GitHub 
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Summer Site 2019</title>
    <meta name="description" content="This is my Summer 2019 Website." />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
</head>

Step

3

Add Your First List

As you learned in a previous lesson, one of the most commonly used HTML elements is the list item (li). Add your first list to your index.html file as an “unordered” list.

<ul>
    <li>This is an Unordered List Item</li>
    <li>This is an Unordered List Item</li>
    <li>This is an Unordered List Item</li>
</ul>

Be sure to put this in the body of your index.html file, below your h1 and p elements.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Summer Site 2019</title>
<meta name="description" content="This is my Summer 2019 website." />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
</head>
<body>
<h1>Summer 2019</h1>
<p>I created this site as part of my summer project at Iolani.</p>
<ul>
<li>This is an Unordered List Item</li>
<li>This is an Unordered List Item</li>
<li>This is an Unordered List Item</li>
</ul>
</body>
</html>
view raw bare-bones-essentials-with-list-summer-2019.html hosted with ❤ by GitHub

Step

4

Save (commit) your local changes to the server (Github)

By now you should know the drill: in VS Code, navigate to the “Source Control” (a.k.a. “Git”) tab on the left, then do a commit (with a comment of your change) followed by a push (sync).

The Git Commit + Push-to-Master Process

  1. Commit: add a descriptive comment then hit the checkmark icon (the checkmark will save the changes via a git “commit”)
  2. Push: at the bottom of the interface, hit the sync icon (this sync icon will upload the changes via a git “push”)
    • Enter your username and password if/when prompted

Test your live site

Whenever you push changes to your master GitHub repo, be sure to test your live site hosted on Github pages.

Congratulations! You just completed another coding exercise!