Setting Up: VS Code and Your First Web Page

Before You Start: A Kitchen and a Cup

Think about making chai. You need two things: a kitchen where you make it, and a cup to serve it in. Building a web page works the same way:

• A code editor is your kitchen. This is where you write your code.
• A web browser is your cup. This is where you (and everyone else) see the finished page.

The good news: both are free, and you already have a browser on your phone or laptop.

In a hurry? You can run every example in this lesson right now with the ▶ Try it yourself button under each code box. Nothing to install. But to build real websites you need your own editor too, and setting it up takes only about 10 minutes.

What You Need

Step 1: Install VS Code

1. Open code.visualstudio.com in your browser.
2. Click the big Download button. The site picks the right version for Windows, Mac or Linux.
3. Open the downloaded file and click Next on each screen. The default options are fine.
4. On Windows, tick “Add to PATH” and “Add ‘Open with Code’ action” when you see them. They make life easier later.
5. Open VS Code. You will see a Welcome screen. You are ready!

Step 2: Create a Project Folder

Every website lives in its own folder, just like every shop has its own building. Keeping files together means nothing gets lost.

1. On your Desktop, create a new folder called my-first-website.
2. In VS Code, click File → Open Folder and choose that folder.

When you finish the next step, your folder will look like this:

my-first-website/
└── index.html

Tip: use small letters and hyphens in file and folder names, like my-first-website, not My First Website. Spaces and capital letters cause broken links later.

Step 3: Create Your First File, index.html

In the VS Code sidebar (called the Explorer), click the New File icon, type index.html and press Enter.

Why the name “index”? When someone opens a website, the browser looks for a file called index.html first. It is the front door of your website, so your home page is always named index.html.

Step 4: Write Your First Code

Type (or copy) this code into index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My First Web Page</title>
</head>
<body>
  <h1>Hello, World!</h1>
  <p>This is my first web page. I built it myself!</p>
</body>
</html>

Press ▶ Try it yourself to see the result straight away. Now change Hello, World! to your own name and press Run again. Congratulations, you just edited a web page!

What does each line mean?

Don’t try to memorise all of this today. You will learn each tag properly in the next lessons. For now, just notice the pattern: most tags come in pairs, an opening tag like <h1> and a closing tag like </h1>.

Time-saving shortcut: in a new .html file, type ! and press Tab. VS Code writes the whole starting structure for you. This feature is called Emmet, and developers use it every day.

Step 5: Save and Open It in Your Browser

1. Save the file with Ctrl + S (on a Mac, Cmd + S). The white dot on the file’s tab disappears when it is saved.
2. Open your my-first-website folder in File Explorer (Windows) or Finder (Mac).
3. Double-click index.html. It opens in your browser.
4. Look at the browser tab: it shows “My First Web Page”, the text from your <title>.

The address bar will show something like file:///C:/Users/you/Desktop/my-first-website/index.html. The word file means the page is on your computer, not on the internet yet. You will put it online for free in the Git and GitHub lessons.

Step 6: The Developer Loop: Edit, Save, Refresh

Every web developer in the world repeats this loop thousands of times:

1. Edit the code in VS Code.
2. Save with Ctrl + S.
3. Refresh the browser with F5 (or Cmd + R on a Mac).

Optional upgrade: install the free Live Server extension so the browser refreshes by itself. Click the Extensions icon in VS Code, search for “Live Server” (by Ritwick Dey), click Install, then right-click index.html and choose Open with Live Server.

Real-Life Example: A Web Page for Sharma General Store

Mr. Sharma runs a small general store in your area. Every day, customers call him to ask the same questions: “What time do you open?”, “Do you sell notebooks?”, “Where exactly is your shop?”. A simple web page can answer all of these, any time of day.

Here is that page. Run it and see how a few lines of HTML already look like a real website:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Sharma General Store</title>
</head>
<body>
  <h1>Sharma General Store</h1>
  <p>Your neighbourhood shop for daily needs, since 1998.</p>

  <h2>Shop Timings</h2>
  <p>Monday to Saturday: 8:00 AM to 9:00 PM</p>
  <p>Sunday: 9:00 AM to 1:00 PM</p>

  <h2>What We Sell</h2>
  <ul>
    <li>Rice, dal and atta</li>
    <li>Milk, bread and eggs</li>
    <li>Soaps and shampoos</li>
    <li>Notebooks and pens for school</li>
  </ul>

  <h2>Visit Us</h2>
  <p>Shop No. 12, Main Market, near the bus stand.</p>
  <p>We accept cash and UPI.</p>
</body>
</html>

Try these changes, one at a time, and press Run after each:

1. Change the shop name to a shop near your home.
2. Change the Sunday timings.
3. Add one more item to the “What We Sell” list. Copy one <li>...</li> line and edit it.

You used a few new tags here (<h2>, <ul> and <li>). That is fine. You will learn them properly very soon. Right now the goal is to get comfortable editing and running code.

Common Mistakes (and How to Fix Them)

• The file is saved as index.html.txt. Windows hides file extensions, so the file looks right but is really a text file. Fix: in File Explorer open View and turn on File name extensions, then rename the file. In VS Code, a real HTML file shows an orange <> icon.
• You forgot to save. The browser shows the old version of your page. Look for the white dot on the VS Code tab: if it is there, press Ctrl + S.
• You opened a different copy of the file. If you have two index.html files in different folders, you may be editing one and opening the other. Always open the file from your project folder.
• A closing tag is missing. Forget one </h1> and the rest of the page can turn into a giant heading. See it for yourself:

<h1>Welcome to my page
<p>This should be a normal paragraph, but it looks like a big heading!</p>

Now run the fixed version, with the closing </h1> in place:

<h1>Welcome to my page</h1>
<p>Now this is a normal paragraph.</p>

Practice Task: Build Your “About Me” Page

Create a new file called about-me.html in your project folder. Use the starter code below and complete the three TODO steps. You can also press Try it yourself and complete it right here.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>About Me</title>
</head>
<body>
  <!-- TODO 1: Change this heading to your name -->
  <h1>Your Name</h1>

  <!-- TODO 2: Write where you live and what you study -->
  <p>I live in ... and I am studying ...</p>

  <!-- TODO 3: Add a heading "My Hobbies" and a list of 3 hobbies -->

</body>
</html>

Your finished page should have:

• Your name as the main heading
• A paragraph about your city and what you study
• A “My Hobbies” heading with a list of three hobbies
• A browser tab title that says “About” and your name

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>About Priya</title>
</head>
<body>
  <h1>Priya Nair</h1>
  <p>I live in Kochi and I am studying B.Com in my second year.</p>

  <h2>My Hobbies</h2>
  <ul>
    <li>Drawing</li>
    <li>Playing badminton</li>
    <li>Learning to code</li>
  </ul>
</body>
</html>

Key Takeaways

• You need two free tools: a code editor (VS Code) to write code and a browser to see it.
• Keep every website in its own folder, and name files with small letters and hyphens.
• index.html is the front door (home page) of every website.
• The developer loop is Edit → Save → Refresh.
• Type ! and press Tab in VS Code to get the basic HTML structure instantly.