Update Your Home Page with Essential HTML

By /

Back to: Create a Static Student Website

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 “studentsite” repo (e.g. https://github.com/yourusername/studentsite/) with Github pages already setup.
  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 lessons).
  3. You should already have a bare-bones, minimal index.html file already created.
View Video Lesson

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 code 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>Title Goes here</title>
<meta name="description" content="Description of this web page goes here.">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>Heading Goes Here</h1>
<p>Lorem ipsum et dolorem. This is a paragraph.</p>
</body>
</html>
view raw barebones-html-with-essentials.html hosted with ❤ by GitHub

John Doe Student Site Example:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>John Doe</title>
    <meta name="description" content="This is my Student Website.">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

    <h1>Hi, I'm John</h1>
    <p>I am a fictional web design student. This site is under construction. Soon, I will be posting my course
        assignments and portfolio here.</p>

</body>
</html>

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.

Add Some [Temporary] Course Content to Your List

At some point, we are going to create dedicated sub-pages for each course, where all course-specific assignments will be posted. Before we create it, let’s post a link to our first sub page first. In a future step, we will create the sub page index.html that will reside within the sub page folder. Even though this link will not work (yet), the practice of adding it in temporarily is a good way to learn and practice how to link to local content using relative paths. Here’s the code:

<h2>My Courses</h2>
<ol>
    <li><a href="art128/index.html">ART 128 Interface Programming I</a></li>
</ol>

And here’s what it your full index.html should look like once complete:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>John Doe</title>
<meta name="description" content="This is an example student website for John Doe, a fictional web design student.">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>Hi, I'm John</h1>
<p>I am a fictional web design student. This site is under construction. Soon, I will be posting my course assignments and portfolio here.</p>
<h2>My Courses:</h2>
<ul>
<li><a href="art128/index.html">ART 128 Interface Programming 1</a></li>
</ul>
</body>
</html>
view raw barebones-html-with-essentials-plus-list-johndoe-studentsite.html hosted with ❤ by GitHub

And finally, go ahead and take a look at your student site home page in a browser. Here’s what it should look like once this step is complete (NOTE: do not be alarmed that your styling is gone, we will be adding it back in soon in a future step):

Screenshot of John Doe's Student Site home page after completing this step.
Screenshot of John Doe’s Student Site home page after completing this step.

Step

4

Save (stage + 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 stage + commit (with a comment of your change) followed by a push (sync).

The Git Stage + Commit > Push-to-Main Process

  1. Stage + Commit: add a descriptive comment then hit the checkmark icon (the checkmark will save the changes via a git “add” and “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 the main branch of your GitHub repo, be sure to test your live site hosted on Github pages.

Congratulations! You just completed another coding exercise!