Skip to main content
Back to path

Welcome to a Grasp lesson

Create a free account to keep studying and create your own study path.

Lesson 3

Setting Up Your First HTML File

Recommended resources

Hello! Welcome back to your coding journey.

In our last lesson, you successfully installed and personalized Visual Studio Code, your new digital workshop. You now have the main tool used by web developers all over the world.

Today, we're going to organize that workshop and lay the very first foundation stone for your journalism blog. This lesson covers how to create a dedicated project folder to house all your website's files and how to create your very first HTML file within it. Think of this as getting your desk tidy, creating a new labeled folder for your big story, and putting the first blank page inside, ready for your ideas.

1. Why Project Folders are Essential

Before we create anything, it's important to understand why we need to be organized. A website isn't just one file; it's a collection of many files—HTML for content, CSS for style, images, and eventually scripts for interactivity. Keeping all these files for a single website inside one main folder, often called a project folder or root folder, is crucial.

This video offers a great explanation of this concept and introduces some vital rules for naming your files and folders for the web.

{Web-D 01} File and folder structure

This video, '{Web-D 01} File and folder structure', uses a helpful suitcase analogy to explain the concept of a 'root folder'. It also covers the essential rules for naming files on the web, which will prevent many common problems later on.

Watch from the beginning until 7:28. Focus on two key ideas: The concept of a single 'root folder' for your entire website (01:22 - 03:10). The critical rules for naming files: no spaces, no special characters, and the importance of case sensitivity (03:10 - 07:28).

To summarize the key takeaways from the video:

  • One Project, One Folder: Every website you build should live in its own dedicated folder.
  • File Naming is Key:
    • Use only lowercase letters, numbers, and hyphens (-).
    • Do not use spaces in file or folder names (e.g., use about-me.html instead of about me.html).
    • Be consistent. The web is case-sensitive, so MyPage.html and mypage.html are two different files. Sticking to all lowercase is the simplest way to avoid mistakes.

2. Creating Your Project Folder

Now it's time to apply these concepts. We'll create a main folder to hold all your future web projects, and then a specific folder for the blog you're about to build. We'll do this using your computer's built-in file manager (File Explorer on Windows or Finder on macOS).

The following guide from the Mozilla Developer Network (MDN) provides excellent, step-by-step instructions.

Dealing with files - Learn web development | MDN

This article, 'Dealing with files' from MDN, is a fantastic reference for file management. We'll use it to create our folder structure.

Please read the section titled 'Creating a folder'. Follow the steps to create a folder named web-projects inside your computer's Documents folder. Then, inside that new web-projects folder, create another folder and name it my-blog. This my-blog folder will be the project folder for your journalism site.

After following the instructions, your folder structure should look like this:
Documents → web-projects → my-blog

Your my-blog folder is currently empty, but it's now the official home for your website.

Test your understanding!

Imagine you're adding a new page to your blog for your portfolio. Based on the file naming rules, which of the following is the best name for the HTML file?

  1. My Portfolio.html
  2. Portfolio.html
  3. my-portfolio.html
Show answer

The best choice is 3. my-portfolio.html.

Here's why:

  • Option 1 is incorrect because it contains a space.
  • Option 2 is technically valid, but using a capital letter can lead to consistency errors.
  • Option 3 follows all the best practices: it's all lowercase and uses a hyphen to separate words, making it both safe for the web and easy to read.

3. Creating Your First HTML File

With your project folder ready, it's time to open it in VS Code and create your very first file. This file will be your website's homepage. In web development, the homepage file has a special, conventional name: index.html. Browsers and web servers automatically look for a file with this name when someone visits your site's main address.

This video demonstrates exactly how to open a project folder in VS Code and create new files.

VS Code for Absolute Beginners

In this clip from 'VS Code for Absolute Beginners', you'll see how to use the VS Code interface to open your my-blog folder and create the index.html file inside it.

Watch from 2:47 to 4:38. Follow along to: Click 'Open Folder' and select the my-blog folder you just created. Use the 'New File' icon in the Explorer sidebar to create a file named index.html.

When you're done, your VS Code window should look something like this, with the MY-BLOG folder open in the explorer pane and a blank index.html file open in the editor.

Code Editor Interface with HTML File Creation Instructions
Your VS Code editor, showing the `my-blog` folder on the left and your new, empty `index.html` file ready for code.

The .html part of the file name is the extension. It tells the computer and VS Code that this is an HTML document, which allows the editor to provide you with helpful features for writing web code.

4. Adding the Basic HTML Structure

An empty file isn't very useful, so let's add the fundamental code structure that every single webpage needs. This is often called "boilerplate" code.

You could type it all out, but VS Code has a fantastic built-in tool called Emmet that makes this incredibly fast.

  1. Make sure your cursor is in the empty index.html file.
  2. Type a single exclamation mark: !
  3. Press the Enter or Tab key.

Instantly, VS Code will generate the basic structure for an HTML page.

Basic HTML File Structure in a Code Editor
Your `index.html` file after using the Emmet shortcut. This is the standard starting point for any webpage.

Your file should now contain code like this. Don't worry about what it all means just yet; we'll cover that in detail in the next module. For now, you've successfully created a valid webpage.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

One small change you can make right away is to edit the page title. Find the line that says <title>Document</title> and change "Document" to something more descriptive, like "My Journalism Blog". This is the text that will appear in the browser tab.

Conclusion

Fantastic work today! You've transitioned from having an empty code editor to having a properly structured project and the first file of your website. These organizational skills are foundational to being a successful developer.

Let's summarize your achievements:

  • You learned the importance of using a project folder to keep your website's files organized.
  • You practiced good file naming conventions (lowercase, no spaces) to prevent future issues.
  • You created a my-blog project folder on your computer.
  • You opened this folder in VS Code and created your homepage file, index.html.
  • You used an Emmet shortcut to add the basic HTML boilerplate code to your file.

You now have a real, albeit blank, webpage file sitting on your computer. But how do you look at it in a web browser? In our next lesson, we will bridge that final gap. You'll learn how to open your index.html file in Chrome or Firefox and see your work come to life.