Your editor, your first page, and seeing it change

This is the shortest lesson in the course and skipping it will cost you hours later. Twenty minutes now buys you an editor that catches your typos, and a browser that updates the moment you save.

The editor: VS Code

Download it from code.visualstudio.com and install it. It is free, it runs on Windows, macOS and Linux, and it is what most of the industry uses — so the screenshots in every tutorial you read afterwards will match.

Other editors are fine. If you already have one you like, keep it. What matters is that you are not writing HTML in Notepad, where a single missing quote is invisible.

Make a folder and open it

Not a file — a folder. This is the habit worth forming now.

Make a folder somewhere sensible. Avoid Desktop and Downloads, which become a mess; something like ~/sites on macOS or Linux, or C:\sites on Windows. Inside it, make a folder called first-page.

Then in VS Code: File → Open Folder, and choose first-page.

The left sidebar now shows that folder. Everything you do lives inside it, and when you deploy at the end of the course, it is the folder you deploy.

Never use spaces in folder or file names for web work. my site/about page.html becomes my%20site/about%20page.html in a URL, and you will spend an evening wondering why a link is broken. Use hyphens: my-site/about-page.html.

Your first page

In the sidebar, click the new-file icon and name the file exactly:

index.html

index.html is special. A server asked for a folder serves the file called index.html inside it. That is why riztechacademy.com shows a page without you typing a filename. Get this name wrong — Index.html, index.htm, home.html — and your deployed site shows a directory listing or a 404. Linux servers are case-sensitive even though your Mac or Windows machine is not, which is a genuinely nasty way to discover the difference.

Now type ! on the first line and press Tab.

VS Code expands it into a complete HTML skeleton. That shortcut is called an Emmet abbreviation, it is built in, and it is how you should start every HTML file for the rest of your life. Change the <title> to My first page and put something inside <body>:

<body>
  <h1>Hello from Pune</h1>
  <p>This is my first page.</p>
</body>

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

See it in a browser

Two ways. Learn both.

The direct way. Right-click index.html in the sidebar → Reveal in File Explorer / Finder, then drag the file onto your browser window. The address bar shows file:///…/first-page/index.html.

To see a change: save in VS Code, then press Ctrl + R (Cmd + R) in the browser. Every single time. You will forget, and you will be confused for a minute — everybody is, at least once.

The better way: Live Server. Click the Extensions icon in the left bar (four squares), search Live Server, install the one by Ritwick Dey. Then right-click index.html in the sidebar and choose Open with Live Server.

Your browser opens at http://127.0.0.1:5500/, and now the page reloads itself every time you save. Put VS Code on one side of the screen and the browser on the other, and you have the setup you will use for the rest of the course.

Note the address: 127.0.0.1 is your own machine, and 5500 is a port. That is a real little web server running on your laptop, which is also why fonts and scripts that misbehave on file:// work here.

Four settings worth changing

Open settings with Ctrl + , and search for each by name.

Format On Save — tick it. Your HTML gets indented properly every time you save. Badly indented HTML is how you lose a closing tag, and an editor that indents for you tells you instantly when your nesting is wrong: the indentation goes somewhere you did not expect.

Auto Save — set it to onFocusChange if you like, but leave it off if you are using Live Server, or the page will reload while you are halfway through a tag and you will see broken renders that are not real.

Word Wrap — set to on. Long lines of HTML scrolling sideways is miserable.

Render Whitespace — set to boundary. It shows you the spaces at the ends of lines, which matters more than you would think.

Two extensions, and no more

Resist installing twenty. These two earn their place:

Live Server, above.

HTML CSS Support or the built-in HTML support is enough for autocomplete. Type < and VS Code offers you element names; type a CSS property and it offers values. Use it — not to avoid learning the names, but because a typo in backgorund-color is silent in CSS. Nothing errors. The colour just does not change, and you stare at it.

Skip the AI autocomplete extensions for this course. You are learning what the elements mean, and something that finishes your sentences prevents exactly that.

Make it break

Do this now, properly, because recognising these three states saves you real time:

1. Delete a closing tag. Remove the </p> and save. The page still renders — HTML does not error, it guesses. This is the most important thing to know about HTML and the reason a missing tag can produce a layout that is wrong three elements later rather than a message telling you what happened.

2. Misspell an element. Change <h1> to <h11> and save. No error. The browser treats an unknown element as a generic inline box, so your heading becomes ordinary text. Again: silence.

3. Save the file with the wrong name. Rename index.html to index.txt and open it. The browser shows your HTML as text, because the file extension decided Content-Type, exactly as in the previous lesson.

Put it all back afterwards.

Check your work

Why open a folder, not a file. Everything you build lives in one folder, and that folder is what gets deployed.

Why no spaces in names. They become %20 in URLs and break links.

Why index.html exactly. A server asked for a folder serves index.html; Linux servers are case-sensitive even when your machine is not.

What ! then Tab does. Expands an Emmet abbreviation into a full HTML skeleton.

What Live Server gives you. A real server on 127.0.0.1:5500 that reloads on save.

Why Auto Save plus Live Server is a bad pair. It reloads mid-tag and shows broken renders that are not real.

Why Format On Save helps correctness. Unexpected indentation is how you spot broken nesting.

What happens when you delete a closing tag. Nothing visible errors. HTML guesses, and the damage shows up elsewhere.

What happens with <h11>. No error; it becomes a generic inline element.

Why a typo in a CSS property is silent. Nothing errors — the style simply does not apply.

Practice

Install VS Code, create ~/sites/first-page, and open the folder.
Create index.html with ! then Tab. Change the title and add an h1.
Open it with file:// and reload manually after a change.
Install Live Server, open the page with it, and confirm it reloads on save. Note the address and the port.
Turn on Format On Save. Deliberately mis-indent your HTML, save, and watch it correct itself.
Delete a closing </p> and save. Describe what the page does.
Change <h1> to <h11>. Describe what the page does.
Rename the file to index.txt and open it. Explain what you see using the previous lesson.
Create a second file about.html with a heading, and open it at http://127.0.0.1:5500/about.html.
Create a folder with a space in its name, put a page in it, and try to link to it. Then rename it with a hyphen.

Official documentation

VS Code — HTML editing — Emmet abbreviations, folding and the built-in autocomplete.
Emmet — Abbreviation syntax — The full syntax behind the ! shortcut, which is worth ten minutes.

Next: what every one of those skeleton lines actually does.