📝 Lesson 2: HTML the Quick & Dirty Way

The Experiment

Before we install any fancy tools, let's prove something important: HTML is just text.

You don't need special software to write HTML. You don't need a license, a compiler, or a development environment. All you need is:

1. A text editor (literally any text editor)
2. A web browser

That's it. Let's prove it right now.

Step by Step: Your First HTML File

Step 1: Open Notepad

On Windows, press Win + S, type Notepad, and open it. You should see a blank white window with a blinking cursor. Nothing fancy. That's the point.

Step 2: Type This HTML

Type the following into Notepad exactly as shown:

<h1>Hello, World!</h1>
<p>I just made a web page. In Notepad. Seriously.</p>
<p>This is my <strong>first</strong> HTML file!</p>

That's three lines. That's all you need.

Step 3: Save the File

This is the tricky part. You need to save this as an HTML file, not a regular text file.

1. Go to File → Save As
2. Navigate to your Desktop (so you can find it easily)
3. In the "File name" field, type: my-page.html
4. In the "Save as type" dropdown, change it to "All Files (*.*)"
5. Click Save

Step 4: Open It in Your Browser

Go to your Desktop and double-click the file my-page.html. Your default web browser should open and display your page.

You should see:

• A big bold heading that says "Hello, World!"
• Two paragraphs of text beneath it
• The word "first" in bold

It Works! (Sort Of)

Take a moment to appreciate what just happened. You typed three lines of text into the simplest editor on your computer, saved it with a .html extension, and your browser rendered it as a web page.

Look at the browser's address bar. You'll see something like:

file:///C:/Users/YourName/Desktop/my-page.html

That file:/// prefix means the browser is reading a local file from your computer — not downloading it from a server on the internet. It's your file, on your Desktop, rendered in your browser. Simple.

Now look at the page itself. It's ugly, right? The text is small, the font is plain, there's no color, no layout, no personality. It looks like a document from 1996. That's because we only used HTML — we haven't added any CSS yet. That comes later.

But it works. And that's the important thing to internalize: at its core, a web page is just a text file that a browser knows how to read.

Try Adding More

Let's experiment a bit. Go back to Notepad (your file should still be open) and add some more content:

<h1>Hello, World!</h1>
<p>I just made a web page. In Notepad. Seriously.</p>
<p>This is my <strong>first</strong> HTML file!</p>

<h2>Things I Like</h2>
<ul>
    <li>Pizza</li>
    <li>Video games</li>
    <li>Making web pages in Notepad, apparently</li>
</ul>

<h2>About Me</h2>
<p>I am learning HTML and CSS. I started about five minutes ago.</p>
<p>Visit <a href="https://www.google.com">Google</a> if you get bored.</p>

Save the file (Ctrl + S), then go back to your browser and refresh the page (Ctrl + R or F5).

You should now see:

• A subheading ("Things I Like")
• A bulleted list
• Another subheading and paragraph
• A clickable link to Google

Notice the workflow here:

1. Edit the file in Notepad
2. Save
3. Switch to browser
4. Refresh
5. Repeat

This edit-save-refresh cycle is how web development has worked since the beginning. The tools get better, but the loop stays the same.

Why This Approach Breaks Down

So if HTML is just text and Notepad can write text... why would you ever need anything else?

Great question. Let's talk about what goes wrong as soon as you try to build anything real:

🔍 No Syntax Highlighting

In Notepad, everything is the same color — black text on white background. Tags, content, attributes, values — it all looks the same. When your file is 10 lines long, this is fine. When it's 200 lines long, it becomes a nightmare. You can't tell your HTML tags from your actual content at a glance.

A proper code editor colors different parts of your code differently — tags in one color, attributes in another, text content in another. This is called syntax highlighting, and it makes errors visible instantly.

⌨️ No Auto-Complete

In Notepad, you have to type every single character yourself. Every opening tag, every closing tag, every attribute name and value, every angle bracket. Typos are inevitable, and a single missing > can break your entire page.

Code editors offer auto-complete: start typing a tag name, and the editor suggests the rest. It can automatically add closing tags, fill in required attributes, and even generate entire HTML structures with a few keystrokes.

📁 No File Management

Right now your file is sitting on your Desktop. What happens when you need:

• Multiple HTML pages
• A CSS file
• An images folder
• A clear project structure

Your Desktop becomes a mess. A code editor gives you a sidebar with your entire project folder, making it easy to navigate between files, create new ones, and keep everything organized.

🐛 No Error Detection

Notepad won't tell you if you forgot a closing tag, misspelled an attribute, or nested your elements incorrectly. You'll only find out when you load the page in a browser and something looks wrong — and then you have to hunt for the mistake in a wall of monochrome text.

Code editors can underline errors in real time, before you even save the file.

👀 No Live Preview

With Notepad, you have to manually save, switch to your browser, and refresh every single time you make a change. That adds up fast.

Code editors can show you a live preview that updates automatically as you type.

The Point of This Exercise

So why did we do this if Notepad isn't the right tool? Two reasons:

Keep your my-page.html file on your Desktop for now. In the next lesson, you'll open it in VS Code and see the difference immediately.

Summary

🧹 Cleanup

Don't delete my-page.html from your Desktop yet! We'll use it in the next lesson to compare the Notepad experience with VS Code.

🚀 What's Next?

In the next lesson, you'll install Visual Studio Code — a free, powerful code editor used by millions of developers. You'll open your Notepad-made HTML file in it and immediately see why proper tooling matters. Then we'll set up a real project folder and start doing things the right way.