Initial HTML Home Page

By /

Back to: Create a Static Student Website

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.

View Video Lesson

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

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>John Doe</title>
</head>

<body>
    <h2>Hi, I'm John.</h2>
    <p>I'm an interface design student. This site is currently under construction. Soon it will contain links to featured portfolio projects and coursework for my classes at KCC within the New Media Arts program.</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 (add + 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 Stage (add) & Commit (save with a comment) and Push (upload your changes) by doing the following:

  1. Stage & Commit: add a descriptive comment then hit the checkmark icon (the checkmark will save the changes via a git “add” + “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.