Course Content
Pre-requisites
Get the right tools in place to complete the course.
0/1
Laying the HTML Foundation
0/1
HTML Tutorial for Beginners: A Step-by-Step Guide
About Lesson

Now that you have downloaded the editor and are comfortable with it, let’s move on to building a simple web page.

Step 1: Create a Project Folder

  1. Decide where you want to create the project folder. Common locations are:
    • Documents (e.g., Documents/sites)
    • Desktop
    • Any location that’s convenient for you.
  2. Create a folder named portfolio (e.g., Documents/sites/portfolio). This folder name reflects the focus of your project, but you can choose another name if you prefer. For consistency, it’s ideal to:
    • Use lowercase letters.
    • Stick to alphanumeric characters.
    • Use underscores _ or hyphens for spaces.

Step 2: Open the Folder in VSCode

  1. Launch Visual Studio Code (VSCode).
  2. Open the portfolio folder in VSCode. (If you don’t remember how, refer to the VSCode guide to refresh your memory.)
  3. Any files you create for this project must go inside the folder, that you named, porfolio.

Step 3: Create an HTML File

  1. Open the Explorer panel in VSCode (usually located on the left side of the interface).
  2. Right-click within the Explorer and select New File.
  3. Name the file index.html.

Step 4: Add Boilerplate HTML Code

  1. Inside the editor, you can:
    • Type out the boilerplate HTML code manually, OR
    • Use a shortcut by typing an exclamation mark ! and pressing Enter.

Using the shortcut will generate the following code:

<!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>

 

Note: It’s better to use the shortcut than to copy-paste the code, as this reinforces learning.

Step 5: Add Content to the Page

  1. Between the <body> and </body> tags, add the following code:
<p>Hello Internet!</p>

Your full code should now look like this:

<!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>
    <p>Hello Internet!</p>
</body>
</html>

 

Step 6: Preview the Page

  1. Right-click anywhere in the editor background and select Show Preview.
  2. You should see a split view with a preview of your page on the right.

Mac users: Note that the preview setup can vary depending on your configuration. Make sure to check the guide for Mac-specific instructions if needed.

Step 7: Create Additional Pages

Now that you’ve created your homepage (index.html), let’s create a few more skeleton pages. For each page:

  1. Create a new file in the Explorer panel.
  2. Use the shortcut ! to generate boilerplate HTML.

Create the following pages:

  • about.html
  • contact.html
  • portfolio.html

These will serve as the basic structure for your website. Great job—you’ve just laid the foundation for your portfolio site!