Install VS Code and Chrome (plus a phone-only setup with Acode)

Before you can write a single line of HTML, you need two things: a place to write the code (an editor) and a place to see the result (a browser). This lesson gets both set up — on a laptop if you have one, or on your phone alone if that's what you're working with. Either way, you finish this lesson with a real file on your device that opens in a browser.

Words in this lesson

A note on the steps in this lesson

Software changes. Download buttons move, installers get new options, and app menus get rearranged. Every step below was checked in September 2026.

If your screen doesn't match, believe your screen. The tools themselves publish the current instructions:

A moved button is still the same button. Knowing where to look is the skill.

The two tools and what each one does

Think of it like tailoring. Your editor is the sewing machine — where you cut and join the code. Your browser is the mirror — where you see how it actually looks on a body.

You do not need Word, Notepad, or any "website builder". HTML is plain text. Any tool that saves plain text will do — VS Code and Acode just make it far more pleasant.

Part 1: Laptop setup

Install Google Chrome

We use Chrome because it has the best built-in developer tools, and because most of your future clients and their customers will be on Chrome or something built on the same engine (Edge, Opera, Brave, Samsung Internet).

1. Go to https://www.google.com/chrome
2. Click Download Chrome, run the installer.
3. When it asks, set it as your default browser. That way double-clicking an HTML file opens it in Chrome.

Budget around 100 MB of data, so do it on Wi‑Fi or a bundle you don't mind spending.

Install VS Code

VS Code (Visual Studio Code) is free, made by Microsoft, and is what most working developers use.

1. Go to https://code.visualstudio.com
2. The site detects your system and offers the right download — Windows, Mac, or Linux.
3. On Windows, run the installer. Tick the box that says "Add to PATH" and the ones for "Open with Code" in the right-click menu. They make life easier later.
4. Launch it. Close the welcome tab.

Roughly another 100 MB. Budget about 250 MB in total to be safe.

Low-spec laptop? VS Code runs fine on 4 GB RAM. If yours is 2 GB and struggling, use Notepad++ (much lighter) instead. Everything in this course still works — you're just typing text into a file.

Make a folder for your work

Don't scatter files on your Desktop. Create one folder now and keep everything inside it:

Documents/
  web-projects/

In VS Code: File → Open Folder → pick web-projects. The left sidebar (Explorer) now shows your folder. Every project you build in this course lives inside it — starting with the real one in the next lesson.

Create and view a test file

This one file is a smoke test to prove your setup works. You'll build the real project folder in the next lesson, so don't get attached to it.

In the Explorer sidebar, hover over the folder name and click the New File icon. Name it exactly:

test.html

The .html part matters. Without it, the browser treats your file as plain text and shows the code instead of the page.

Type this in:

<!DOCTYPE html>
<html>
  <head>
    <title>My First Page</title>
  </head>
  <body>
    <h1>Hello from Lagos</h1>
    <p>My name is Chiamaka and this is my first web page.</p>
  </body>
</html>

Save with Ctrl + S. Nothing shows in the browser until you save — this trips up almost every beginner at least once.

Now open it: find the file in File Explorer, right-click → Open with → Google Chrome. You should see a big heading and a line of text.

Keep VS Code and Chrome side by side. Edit, save, then press Ctrl + R in Chrome to reload. That edit → save → reload loop is the whole job.

One extension worth installing

Click the Extensions icon in the left bar (four squares), search Live Server, click Install. After that, right-click your test.html in the Explorer and choose Open with Live Server. Chrome opens the page and reloads it automatically every time you save. It saves you thousands of Ctrl + R presses over this course.

Part 2: Phone-only setup with Acode

No laptop? You can still complete this entire course on an Android phone. Plenty of developers started exactly this way.

Install Acode

1. Open the Play Store, search Acode - code editor.
2. Install the free version. It's small — well under 50 MB.
3. Make sure Chrome is installed too (most Android phones ship with it).

Create your folder and file

1. Open Acode. Tap the menu icon (three lines, top-left) to open the sidebar.
2. Tap Open folder → Add path/storage, grant storage permission, and choose or create a folder — for example Internal storage/web-projects.
3. In the sidebar, long-press the folder name → New file → name it test.html.
4. Type in the same HTML from above. Acode gives you a row of extra keys above the keyboard for <, >, / and " — use them, they're much faster than switching keyboard layouts.
5. Save with the floppy disk / save icon at the top.

Preview your page

Acode has a play (▶) button in the top toolbar. Tap it and your page renders. To see it in Chrome instead — which is more accurate — tap the three-dot menu → Run in browser (or in some versions, share/open the file with Chrome).

If that fails, open Chrome and type the file path directly:

file:///sdcard/web-projects/test.html

That address bar trick works on almost every Android phone.

Phone tips that actually help

• Get a keyboard that doesn't fight you. Gboard auto-capitalises and "corrects" your tags. Go to Gboard settings and turn off autocorrect and auto-capitalisation for a smoother time.
• Turn your phone sideways. Landscape gives you a wider view of your code lines.
• Enable word wrap in Acode settings so long lines don't run off the screen.
• A cheap Bluetooth keyboard turns any phone into a workable coding setup. Worth it if you're in this for the long run.

iPhone?

Acode is Android-only. On iOS, use Koder or Textastic from the App Store, or work in the free online editor at codepen.io. The lessons all still apply.

Common mistakes

The short version

• You need two tools: an editor to write (VS Code, or Acode on Android) and a browser to view (Chrome).
• HTML is plain text. No website builder, no Word.
• The filename must end in .html, or the browser shows your code instead of your page.
• The loop is edit → save → reload. Nothing changes in the browser until you save.
• Live Server reloads Chrome for you automatically and is worth installing on day one.
• A phone is a complete setup: Acode + Chrome, with the file:///sdcard/... address trick as a fallback.
• Steps checked September 2026 — if your screen differs, trust your screen and check the tool's own docs.

Try it yourself

Set up your environment and prove it works:

1. Install your editor and Chrome using the steps above.
2. Create the folder web-projects and inside it a file called test.html.
3. Paste the sample HTML, but change the heading to your own city and the paragraph to your own name and one sentence about why you're learning HTML.
4. Save, open it in Chrome, and take a screenshot showing your page.
5. Now change the heading text, save again, reload, and confirm the browser updates.
6. Deliberately break it: rename the file to test.txt, open it in Chrome, and see what happens. Rename it back.

You'll know you've got it when you can change a word, save, reload, and see it appear in the browser — and when you know from the symptom alone whether you forgot to save or mis-named the file.