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.
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.
| Tool | Job | Laptop | Phone |
|---|---|---|---|
| Code editor | Where you type HTML | VS Code | Acode |
| Browser | Where you view the page | Chrome | Chrome (Android) |
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).
- Go to
https://www.google.com/chrome - Click Download Chrome, run the installer.
- When it asks, set it as your default browser. That way double-clicking an HTML file opens it in Chrome.
The download is about 100 MB, so do it on Wi‑Fi or a data 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.
- Go to
https://code.visualstudio.com - The site detects your system and offers the right download — Windows, Mac, or Linux.
- 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.
- Launch it. Close the welcome tab.
Download is roughly 100 MB too. Total for both: budget about 250 MB of data 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, ~5 MB) 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/
html-course/
lesson-01/
In VS Code: File → Open Folder → pick html-course. The left sidebar (Explorer) now shows your folder. This is how you'll work for the rest of the course.
Create and view your first file
In the Explorer sidebar, hover over the folder name and click the New File icon. Name it exactly:
index.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 index.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
- Open the Play Store, search Acode - code editor.
- Install the free version. It's small — under 30 MB.
- Make sure Chrome is installed too (most Android phones ship with it).
Create your folder and file
- Open Acode. Tap the menu icon (three lines, top-left) to open the sidebar.
- Tap Open folder → Add path/storage, grant storage permission, and choose or create a folder — for example
Internal storage/html-course. - In the sidebar, long-press the folder name → New file → name it
index.html. - 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. - 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/html-course/index.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 ₦4,000 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 problems and quick fixes
| Problem | Cause | Fix |
|---|---|---|
| Browser shows the raw code, not the page | File saved as index.html.txt | Rename it so it ends in .html |
| Page won't update after editing | You didn't save | Ctrl + S, or the save icon in Acode |
| Nothing appears at all | Text is outside <body> | Move your content between <body> and </body> |
| Can't find the file on phone | Saved to app storage, not internal storage | Re-open the folder from Internal storage in Acode |
Try it yourself
Set up your environment and prove it works:
- Install your editor and Chrome using the steps above.
- Create the folder
html-courseand inside it a file calledindex.html. - 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.
- Save, open it in Chrome, and take a screenshot showing your page.
- Now change the heading text, save again, reload, and confirm the browser updates.
If you saw that change appear in Chrome, your setup is complete and you're ready to actually learn HTML in the next lesson.