Skip to main content
DIGITAL CULTURETHE LAB / DIKULT105

SEE IT / DO IT YOURSELF

A home for
your own code.

Seven steps to a folder you can find again, an HTML file and a preview of what you make.

Keep this guide on your phone or beside VS Code. Do the tasks on a Windows computer or Mac. No AI or Copilot is required.

BY THE END OF THIS GUIDE YOU CAN

  • Open a real project folder in VS Code, the editor professional developers use
  • Write a webpage in HTML and watch it update in Live Preview
  • Read every tag in your page and say what it does
Start with step 1 ↓
About the screenshots

Real screenshots from the official documentation. The images show the providers' example projects; your project names and content will differ. Open the tool alongside this guide.

One step at a time. Keep the real tool open beside this guide.

Checkmarks stay in this browser only. Nothing is submitted or reported.

STEP 01

Download VS Code.

  1. Visit code.visualstudio.com ↗.
  2. Choose the download for Windows, Mac or Linux.
  3. Open the downloaded file and install the program. On Mac, move Visual Studio Code into Applications if prompted.
  4. Open Visual Studio Code on your computer.

Check your screen: VS Code opens as a separate application, with a welcome page or an empty workspace.

Linux: which download should I choose?

On the download page, choose .deb for Ubuntu, Debian or Linux Mint; choose .rpm for Fedora or a compatible distribution. Choose the architecture that matches your computer: x64 for most Intel/AMD laptops, or Arm64 for an ARM computer.

Open the downloaded package in your software installer and install it. Then launch Visual Studio Code from your applications menu. For other distributions or installation methods, follow Microsoft's Linux installation guide.

Do I need to sign in or enable AI?

No. You can write HTML and use Live Preview without an AI account. Skip Copilot setup for this exercise. If you want to try AI later, the AI coding guide comes after these steps.

STEP 02

Create a folder on your Desktop.

Give it a name you will remember, such as my-future-world.

Windows

Go to your Desktop. Right-click an empty area → New → Folder. Type the name and press Enter.

Mac

Open Finder → Desktop. Choose File → New Folder. Type the name and press Return.

Linux

Open your file manager and choose Desktop. Use New Folder and enter your project name. If you do not have a Desktop folder, create it in Documents instead. Open that same folder in VS Code in the next step.

Check your screen: Your new project folder appears in the location you chose.

This folder is your project. Keep your code, images and sounds here. VS Code is the application you use to work with those files.

STEP 03

Open the whole folder.

  1. Return to VS Code.
  2. Choose File → Open Folder….
  3. Find Desktop (or Documents on Linux if you used it) and select your project folder.
  4. Choose Select Folder on Windows or Open on Mac. If asked about trust, confirm only when this is the folder you created and trust.
VS Code Explorer showing an open project folder
Look on the left: the folder appears under EXPLORER. Microsoft calls its example vscode101; yours will have the name you chose. Source: Microsoft ↗. Select the image to enlarge it.

Check your screen: Your project folder appears in Explorer, the file panel on the left.

I only see a welcome page.

Choose View → Explorer. If your folder is still missing, use File → Open Folder… again.

STEP 04

Create index.html.

  1. Right-click your folder in Explorer → New File, or select the New File button shown below.
  2. Name the file index.html and open it.
  3. Copy the code below and paste it into this empty file.
  4. Save with Ctrl+S on Windows or Cmd+S on Mac.
The New File button highlighted in VS Code Explorer
The red outline marks the page-with-a-plus icon: New File. Source: Microsoft ↗. Select the image to enlarge it.
A small starting page
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My future world</title>
</head>
<body>
  <h1>A place I know</h1>
  <p>I notice the sound of rain at the bus stop.</p>
  <details>
    <summary>What if this changes in the future?</summary>
    <p>What if we have to pay to hear the sounds of our city?</p>
  </details>
</body>
</html>

Open this guide on your computer to copy into VS Code. Copying on a phone puts the code on that phone.

WHAT DOES THIS CODE MEAN?

  1. <!doctype html>Tells the browser: this is a modern webpage. It is always the first line. HTML intro ↗
  2. <html lang="en"> … </html>Wraps the whole page. lang says the language, so screen readers pronounce it correctly. Elements ↗
  3. <head> … </head>Information about the page that is not shown on it: the tab title, settings and, later, the link to your CSS.
  4. <title>My future world</title>The text in the browser tab.
  5. <body> … </body>Everything people can see on the page goes in here.
  6. <h1>A place I know</h1>The main heading. h1 is the biggest; h2 to h6 get smaller. Headings ↗
  7. <p> … </p>A paragraph of text. Paragraphs ↗
  8. <details><summary> … </summary> … </details>A built-in reveal. The summary is always visible; click it and the rest opens. No JavaScript needed. details ↗

Most tags come in pairs: <p> opens, </p> closes (note the slash). Everything in between is the content.

TRY IT: CHANGE ONE THING

  1. Predict, then change: replace the words inside <h1> with a place you know. Save with Ctrl + S and look at Live Preview.
  2. Add a paragraph: copy the whole <p> … </p> line, paste it underneath and write a new sentence.
  3. Stretch: add a smaller heading with <h2> … </h2> above the question.

LEARN IT PROPERLY ON W3SCHOOLSHTML tutorial ↗HTML elements ↗Try it Yourself editor ↗

Check your screen: index.html appears inside your project folder, with the code in the editor.

Desktop
└── my-future-world
    └── index.html
My file is called index.html.txt.

Right-click it in VS Code → Rename. Change the full name to index.html. It must end in .html.

STEP 05

Install Live Preview.

  1. Open Extensions from the icons on the left, or choose View → Extensions.
  2. Search for Live Preview.
  3. Select the extension published by Microsoft. Click Install.
The Extensions icon and Microsoft Live Preview Install button highlighted
Find the icon on the far left, the search box at the top and Install beside Microsoft Live Preview. Source: Microsoft ↗. Select the image to enlarge it.

Open the official Microsoft Live Preview page ↗

Check your screen: Live Preview is installed and enabled.

Several extensions have similar names.

Choose Live Preview published by Microsoft. Its exact identifier is ms-vscode.live-server.

STEP 06

Open your page in Live Preview.

  1. Open index.html in the editor.
  2. Right-click the HTML file and choose the Live Preview Show Preview option, or select the preview button at the top right.
  3. Find the heading A place I know in the preview.
  4. Select What if this changes in the future? to reveal the text below it.
A frame from Microsoft’s Live Preview demonstration
A frame from Microsoft’s recording. Expand the demonstration below to see the actual mouse action. Source: Microsoft ↗. Select the image to enlarge it.
Watch the real action: open Live PreviewMicrosoft screen recording showing the mouse opening Live Preview

Recording from Microsoft. Close this section to hide the animation.

Watch the real action: edit code and see it updateMicrosoft recording of a code edit updating the preview

The example code belongs to Microsoft. Original recording and documentation ↗.

Check your screen: A heading, a paragraph and a clickable line appear. Open the actual result of the starter code ↗.

The preview is empty or missing.

Check that your file contains the code, is saved and ends in .html. Check that Microsoft Live Preview is enabled. Reopen the whole project folder if you only opened a single file.

STEP 07

Make the example yours.

  1. Replace the text between <h1> and </h1> with a place or situation you know.
  2. Replace the rain sentence with one detail you have noticed yourself.
  3. Replace the future question and the revealed text with your own idea.
  4. Save. Check that your changes appear in Live Preview.

Check your screen: The page uses your own words, the text can be revealed, and you know where the file is saved.

An ordinary observation is enough. You decide what you share. This is a starting exercise, not a completed final assessment.

TAKE IT FORWARD

You have somewhere to begin.

Use the checkpoints above to see what is ready and where you need help.

Next time: open VS Code → File → Open Folder… → choose the same Desktop folder. Open index.html and start Live Preview again.

Next, give your page colour with style.css: Lab 1’s CSS & colour studio shows how. Keep images in the same folder too. Keep everything inside your project folder. Live Preview shows your page locally; it does not publish it online.

Ready to publish? Follow the GitHub guide →

NEXT STEP / OPTIONAL

Code with AI. Stay the author.

Your folder and Live Preview are ready. The next guide shows how to use an AI assistant in VS Code: write a clear prompt, read every change, test it and log what you kept.

Open the AI coding guide →

Continue with JavaScript.

Write and test your code in VS Code, then use it in Construct.

VS Code → Construct: step by step →

← Back to Lab 1: experiment