Hello again! It's great to see you back.
In our last session, you did an excellent job setting up your project folder and creating your first index.html file. You now have the basic "boilerplate" code that forms the skeleton of any webpage, sitting on your computer.
Today, we'll complete the final, crucial step of setting up your development workspace. You'll learn how to take the code you've written in Visual Studio Code and view it as a real webpage in your browser. This is the moment where your code comes to life! By the end of this lesson, you will have a seamless workflow for writing code, saving it, and instantly seeing your changes.
1. From Code to Webpage: The Role of the Browser
First, let's clarify the relationship between your code editor and your web browser.
- VS Code (your code editor) is where you write and edit the instructions for your website using HTML. Think of it as your digital notepad or the place you draw your blueprints.
- A Web Browser (like Chrome, Firefox, or Edge) is the program that reads your HTML file, interprets the instructions, and renders (or draws) the visual webpage for you and your visitors to see.
You've created the blueprint; now it's time to see how the browser builds it.
2. Method 1: The Simple, Direct Approach
The most straightforward way to see your HTML file is to open it directly from your computer's file system.
Run a Website Locally with HTML
The following article, 'Run a Website Locally with HTML', clearly explains this first method. It's a fundamental skill to know.
Read the section titled 'Option A: Double-Click the File'. Follow the instructions for your operating system (Windows or Mac) to find your index.html file in your my-blog folder and open it.
When you open the file, you'll see a mostly blank page. But look closely at the browser tab! It should show the title you set in the previous lesson, like "My Journalism Blog". This confirms you're viewing your file.
The Edit-Save-Refresh Cycle
This direct method introduces the core development cycle, but with a manual step. Let's try it:
- Go back to your
index.htmlfile in VS Code. - Inside the
<body>tags, add the following line of code:<h1>My First Headline</h1> - Save the file (you can use the keyboard shortcut
Ctrl+Son Windows orCmd+Son Mac). - Switch back to your web browser. You won't see the change yet!
- Manually refresh or reload the page. On most browsers, you can do this by pressing
F5orCtrl+R(Cmd+Ron Mac).
Now your headline should appear! This cycle—editing code, saving the file, and refreshing the browser—is fundamental to web development. However, manually refreshing every single time can become tedious. Let's look at a much better way.
3. Method 2: The Professional Workflow with Live Server
To make development faster and more efficient, developers use tools that automatically refresh the browser whenever a file is saved. For VS Code, the most popular tool for this is an extension called Live Server.
This extension creates a small, local web server on your computer, which serves your files to the browser and tells it to refresh whenever you save a change.
Installing Live Server
This video will guide you through installing the Live Server extension.
How to Run HTML File in Visual Studio Code Live Server
The video 'How to Run HTML File in Visual Studio Code Live Server' will show you exactly how to find and install the correct extension.
Watch the first 50 seconds of the video. Follow the steps to open the Extensions view in VS Code, search for 'Live Server' (the one by Ritwick Dey is the one you want), and click 'Install'.
Using Live Server
Once installed, using Live Server is simple. You should see a new "Go Live" button in the blue status bar at the bottom right of your VS Code window.
- Make sure your
index.htmlfile is open in VS Code. - Click the "Go Live" button.
A new browser tab will open automatically, displaying your index.html page. Notice the address in the URL bar. Instead of a file:///... path, it will look something like http://127.0.0.1:5500/index.html. This indicates your page is being served by your new local server.
Now for the best part! Arrange your VS Code and browser windows so you can see both.
- In VS Code, change the text inside your
<h1>tag to something new, like "Welcome to My Blog". - Save the file.
Watch the browser—it should update instantly with the new headline, no manual refresh needed! This immediate feedback is incredibly valuable and will significantly speed up your work as you build your blog.
Test your understanding!
Without closing the Live Server, go back to your index.html file in VS Code. Add a new paragraph tag right below your <h1> line: <p>This is where my articles will go.</p>.
What do you need to do to see this new sentence appear on your webpage?
Show answer
You only need to save the file (Ctrl+S or Cmd+S). Because Live Server is running, it will detect the change and automatically refresh the browser for you.
To stop the server, you can click the same button in the VS Code status bar (it will now look like a port number, e.g., Port: 5500).
Conclusion
Congratulations! You have now fully configured your local development environment. You've bridged the gap between writing code and seeing the result, which is a huge milestone.
Let's review the key takeaways:
- You learned that the browser's job is to render the HTML code you write.
- You can view a local HTML file by double-clicking it, but this requires a manual browser refresh after every change.
- The recommended professional workflow is to use the Live Server extension in VS Code, which provides automatic browser refreshing, saving you time and effort.
You are now ready to move beyond setup and start building. In our next lesson, we will begin Module 2, "HTML Foundations," where you'll learn what all the "boilerplate" code in your index.html file actually means as we start structuring the content of your blog.