HTML Tutorial
Bringing Your Code to Life
You've written your first HTML - the DOCTYPE, the head, the body, all of it sitting in a text editor looking completely inert - and at this point it's just words in a file, kind of like a recipe you've written out but never cooked, and the browser is what actually turns those ingredients into something you can look at and interact with. The moment you open an HTML file in a browser for the first time and see it render as an actual page is genuinely one of those small but memorable moments in learning web development, and I remember mine very clearly because I'd spent an hour staring at the code and then the h1 just appeared on screen and I actually said something out loud to nobody. What this section covers is that first step - saving your file the right way, opening it in a browser, and understanding why file paths exist and why they will definitely confuse you at least once before they click.
The Simple Workflow: Create, Save, View
The workflow for learning HTML on your own computer is three steps and once you've done it a couple of times it becomes second nature - write the code, save the file with the right extension, open it in a browser. That's it. The thing that catches people out is almost always step two, specifically the file extension, which sounds like a tiny detail until you realize that saving your file as index.txt instead of index.html means the browser will just show you all your tags as raw text instead of rendering them, which is a confusing thing to debug when you don't know yet that's what's happening.
Step-by-Step Process
Step 1: Create Your HTML File- Technically you can write HTML in Windows Notepad and it'll work, but using a proper code editor like VS Code makes the whole thing easier because it colors your syntax, auto-closes your tags, and catches certain errors before you even run the file. Open your editor, create a new file, and type or paste your HTML in. The example below is a complete minimal page that's good to start with: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>My First Page</title> </head> <body> <h1>Hello, World!</h1> <p>I just created my first web page.</p> <img src="images/welcome.jpg" alt="A welcome sign"> </body> </html> ```Step 2: Save the File With the .html Extension- Go to File > Save As, navigate to the folder you want to keep your project in, and name your file with a .html extension at the end. The most common name for a homepage is index.html because that's the default filename web servers look for when someone visits a URL without specifying a file. When saving, make sure the "Save as type" dropdown is set to All Files or HTML Documents, not Text Document - otherwise some editors will quietly add .txt to the end and you'll end up with index.html.txt which browsers won't treat as HTML. **Correct:** index.html **Incorrect:** index or index.txt or index.html.txt If you're on Windows with hidden file extensions turned on in your folder settings, double-check the actual saved filename because that .txt might be invisible until you look for it.Step 3: Open the HTML File in a Web Browser- Open File Explorer on Windows or Finder on Mac, find your saved index.html file, and double-click it. It should open in whatever browser is set as your default. You can also open your browser first and press Ctrl+O on Windows or Cmd+O on Mac to browse for the file manually. When it opens you should see your page rendered - the title you wrote in the title tag will appear in the browser tab, and your h1 and paragraph will be visible in the page. The URL in the address bar will start with file:// instead of https://, which is normal - that just means you're opening a local file directly rather than loading it from a server.
Understanding File Paths: Why Your Image Might Be Broken
So the example code has an image tag: img src="images/welcome.jpg" - and there's a decent chance when you first try this, you'll see a broken image icon instead of the actual image, and the reason is almost always a file path mismatch, which is one of those things that seems obvious once you understand it but is genuinely confusing the first few times. A relative file path tells the browser where to find a file relative to where the HTML file itself is sitting, so if your index.html is in a folder called my-website and your image is inside a subfolder called images inside that same folder, the path images/welcome.jpg is correct because the browser starts from where the HTML file is and looks from there. The folder structure has to actually match - you can't just write any path you feel like and expect the browser to go hunting for it. **Your folder should look like this:** ``` my-website/ ├── index.html └── images/ └── welcome.jpg ``` If your image is broken, the three most likely causes are: the filename spelling is off (welcome.jpg versus Welcome.jpg - capitalization counts), the folder is named differently than what you typed in the src attribute, or the image file isn't actually in that folder at all and you just think it is. Open your folder, look at it with your own eyes, and compare it character by character against what you wrote in the src.
The Edit-Refresh Cycle: Seeing Your Changes
Most of your time learning HTML is going to be spent in a loop: make a change in the editor, save the file, switch to the browser, hit refresh, look at the result, go back to the editor and do it again - and this cycle is so constant that the keyboard shortcuts become muscle memory pretty fast, Ctrl+S to save and then F5 to refresh in the browser. The thing nobody warns you about is that sometimes you'll refresh and nothing changes even though you definitely saved, and the first few times this happens you'll probably spend ten minutes checking your code for a bug before you realize the browser is just showing you a cached version of the old file.
The Caching Problem (And How to Solve It)
Browser Caching- Browsers cache files - meaning they save local copies of things like stylesheets and scripts - to make pages load faster on repeat visits. This is great for normal browsing but annoying during development because the browser might keep showing you an old version of your CSS or JavaScript even after you've changed it. It happens less often with plain HTML but it does happen.Solutions- The quickest fix is a hard refresh: Ctrl+F5 on Windows or Cmd+Shift+R on Mac, which tells the browser to skip the cache and re-download everything. The more reliable solution for active development is to open the browser's Developer Tools (press F12 or right-click and select Inspect), go to the Network tab, and check the Disable cache checkbox. With that on, every refresh will always fetch the latest version of every file as long as the tools are open.
Beyond Your Local Machine: The Next Steps
When you open an HTML file from your desktop, the URL in the browser starts with file:// - which means you're loading it directly from your computer's hard drive, not from a server, and that distinction matters because a file:// URL only works on your machine, nobody else can visit it. Getting your site onto an actual web server so other people can see it is a whole separate topic, but the short version is that web hosting companies let you upload your files to their servers and then your site gets a real URL that anyone can visit. GitHub Pages, Netlify, and Vercel all have free tiers and you can go from a folder of HTML files on your desktop to a live public URL in under ten minutes once you know the process, which makes them genuinely useful for learning because you can share your work and see it running in a real environment.
You Are Now a Web Developer
There's something satisfying about finishing this part because it closes the loop - you're not just looking at code samples on a screen anymore, you're actually writing files, opening them, and watching them render as pages you built yourself. The create-save-view-refresh cycle is one of those workflows you'll do so many thousands of times as a developer that eventually it stops feeling like a workflow and just becomes how you think. File paths will still catch you off guard occasionally, caching will still annoy you sometimes, and there will definitely be a moment where you're convinced your code is broken and it turns out you just forgot to save - that part doesn't fully go away, it just happens less