Initial HTML Home Page

By /

Back to: Web Design for All Ages

Creating a bare-bones index.html file as a starting point

How does one begin coding a website from scratch? By starting with the home page. For static sites, that’s the index, or index.html. In this lesson we are going to use your favorite text editor (e.g. VS Code) and code the home page for a website from scratch, starting with a blank index.html file.

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

Ready to start coding? Let’s dive in!

Step

1

In VS Code, create a home page (index.html)

Launch your text editor, VS Code, and open your project folder, then create a new file and name it index.html. Warning: you must name it exactly this way: all lowercase, no spaces, no dashes. index.html. If you are not careful and exact, your site will most likely not work.

  1. Create a new file (File > New) and name it index.html

Step

2

Add Initial HTML Markup

  1. Type in the following HTML code exactly as it appears below
<html>

<head>
    <title>Summer Site 2019</title>
</head>

<body>
    <h1>This is my Summer 2019 Web Site</h1>
    <p>I created this site as part of my summer project at Iolani.</p>
</body>

</html>

Be sure to pay close attention to the syntax (spelling, spacing/indenting, etc.) and try to match the code exactly.

Before you move on to the next step, test your web page locally by opening the file in a browser. You can do this multiple ways, such as opening the index.html file via Finder (double-clicking on it) or by dragging-and-dropping your index.html file into a browser (e.g. Chrome).

Step

3

Save (commit) your local changes to the server (Github) via VS Code’s built in Git tab.

In VS Code, navigate to the “Source Control” (a.k.a. “Git”) tab on the left, then Commit (save with a comment) and Push-to-Master (upload your changes) by doing the following:

  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

Step

4

Test your live website!

To see if it worked, test your site on the server

  • Go to yourusername.github.io and see if the index.html file is now displaying as your home page

Congratulations, you just created your index.html website home page.