HTML

Inova Academy · free preview

Course details →
▶ Free previewModuleSet Up and Publish Your First Page

Create your project folder and write your first index.html file

Every website you have ever visited — Jumia, Nairaland, your bank's page — starts as a plain text file on someone's computer. In this lesson you create that file yourself: a proper project folder and a working index.html you can open in Chrome.

Why the folder matters as much as the file

When you later publish your work (on GitHub Pages, Netlify, or a client's cPanel), you upload a folder, not a loose file. If your images, styles and pages are scattered across Downloads and Desktop, the site breaks the moment it leaves your laptop.

So we build the habit now: one project, one folder, everything inside it.

Step 1: Create the folder

Pick a place you can find again. On Windows, C:\Users\YourName\Documents\web-projects. On a Mac, Documents/web-projects.

Inside web-projects, create a folder called:

my-first-site

Then inside my-first-site, create two empty sub-folders:

my-first-site/
├── images/
└── css/

You will not use css/ today, but professional projects always have it, and you want the muscle memory.

Naming rules that will save you pain

Web servers are stricter than your laptop. A file that opens fine on Windows can 404 online because of one capital letter or space.

Do thisNot thisWhy
my-first-siteMy First SiteSpaces become %20 in URLs
about.htmlAbout.HTMLLinux servers are case-sensitive
lagos-office.jpglagos office (1).jpgBrackets and spaces break links
hyphens -underscores _Google reads hyphens as word breaks

Rule of thumb: lowercase letters, numbers and hyphens only.

Step 2: Get a proper code editor

Notepad works, but it will fight you. Install Visual Studio Code (free, from code.visualstudio.com). It colour-codes your tags, closes them for you, and warns you when something is wrong.

Once installed, open VS Code, then File → Open Folder and choose my-first-site. You should now see your folder in the left sidebar. Always open the folder, never a single file — that is how the editor understands your project.

Low on data or on a shared laptop? VS Code is about 90MB to download. If that is not possible today, use Notepad++ (Windows) or even Notepad, and just be careful to save with the .html extension.

Step 3: Create index.html

In the VS Code sidebar, hover over MY-FIRST-SITE and click the New File icon. Name it exactly:

index.html

Why index? Because when a browser requests a folder — say www.adebayo.com/ — the server automatically serves the file named index.html. It is the front door of every website. Name it home.html and visitors get an ugly file listing or an error instead.

Step 4: Write the boilerplate

Type this out by hand. Do not copy and paste — typing it three or four times this week is how it becomes automatic.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Chidera Okeke — Web Developer</title>
</head>
<body>
  <h1>Chidera Okeke</h1>
  <p>Aspiring web developer based in Enugu, Nigeria.</p>
</body>
</html>

Save with Ctrl + S (Cmd + S on Mac).

What each line is doing

  • <!DOCTYPE html> — tells the browser "this is modern HTML5." Leave it out and browsers switch to a weird 1990s compatibility mode.
  • <html lang="en"> — wraps the whole document. lang="en" helps screen readers pronounce your text correctly and helps Google.
  • <head> — information about the page. Nothing here appears on the screen.
  • <meta charset="UTF-8"> — lets the page display characters like ₦, é, and Yorùbá tone marks without turning them into gibberish.
  • <meta name="viewport" ...> — makes the page scale properly on phones. Most of your Nigerian visitors are on Android phones, so this is not optional.
  • <title> — the text on the browser tab and in Google search results.
  • <body> — everything the visitor actually sees.

Notice the pattern: tags open <p> and close </p>, and they nest neatly inside each other like boxes inside boxes. <body> is inside <html>; <h1> is inside <body>. Never cross them over.

Step 5: Open it in a browser

Find index.html in your file explorer and double-click it. Chrome opens and you should see a big heading and a line of text.

Look at the address bar. It says something like:

file:///C:/Users/Chidera/Documents/web-projects/my-first-site/index.html

That file:/// means you are viewing it from your own disk, not the internet. Perfect for now. Later we swap it for a real https:// address.

Step 6: The edit–save–refresh loop

This is the rhythm of all front-end work:

  1. Change something in VS Code.
  2. Save (Ctrl + S).
  3. Switch to the browser and press F5 (or Ctrl + R) to refresh.

Try it: change the <p> text to mention your own city, save, refresh. If nothing changed, you forgot to save.

When something goes wrong

SymptomUsual cause
Browser shows your code as plain textFile saved as index.html.txt — check the extension
Double-click opens VS Code instead of ChromeRight-click → Open with → Google Chrome
Whole page is a headingYou forgot the closing </h1>
Naira sign shows as ₦Missing <meta charset="UTF-8">
Text is tiny on your phoneMissing the viewport meta tag

Try it yourself

Build your own version of the page, not Chidera's:

  1. Create web-projects/my-first-site/ with images/ and css/ inside it.
  2. Create index.html and type the boilerplate from memory as far as you can, then check back here.
  3. Set the <title> to Your Name — Web Developer.
  4. In the <body>, add an <h1> with your name and three <p> paragraphs: where you live, one skill you already have, and what you want to build by the end of this course.
  5. Save, open in Chrome, and confirm the tab shows your title.

Keep this folder — every lesson from here builds on it.

More free previews

Create your project folder and write your first index.html file — free preview · Inova