Your First Webpage!

3 min readNov 16, 2023

After going through the career-switching journey into tech myself, there is so much out their on how to get started. But as with many things, you need to put the theory into practice to really get going!

Here’s a simple, step-by-side guide to creating your first webpage, dare I say in under 5 minutes? Let’s see!

1. Download Visual Studio Code

We will be writing our first webpage in this popular ‘Integrated Development Environment’ (IDE), so if you haven’t already, then download the application here.

2. Create a Folder

Somewhere on your device, create a new folder, in my example I will name my folder ‘Webpage’.

3. Open Folder from Visual Studio Code

When opening your Visual Studio Code application, you should be presented with this page, and the option to ‘Open…’ a folder. Click on that and then navigate to where you have saved your folder from step 2:

4. Create an index.html File

By clicking on the first icon next to your folder name (the ‘page’ icon), you will be able to add a new file, title this ‘index.html’:

5. Add Your Basic HTML Page Structure

Let’s start! Inside your index.html page, you will want to add the basic structure of your webpage, see the code below.

If you want to find out what each of these tags mean, check this out.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Webpage</title>
    </head>
    <body>
        <!--content goes here-->
    </body>
</html>

6. Fill In Content

Feel free to create a page about your favourite anything, in my case I am going to create it about my favourite food, chocolate!

Replace the green comment from above, with the HTML below:

<h1>My Favourite Food</h1>
<p>Welcome to my awesome blog, all about chocolate!</p>
<section>
    <h3>Benefits of Eating Chocolate</h3>
    <p>*Not from a registered doctor*</p>
    <ol>
        <li>Lowers blood pressure</li>
        <li>Improves blood flow to the brain</li>
        <li>Boosts good cholesterol</li>
    </ol>
</section>

7. View Page in Your Browser

a) To be able to view your web page in your browser, you will firstly need to head down to the ‘extensions’ tab on the left-hand side, and in the search bar type ‘live server’. As seen below, click on the blue ‘install’ button:

b) Navigate back to your files, and if this extension has installed correctly, you will be able to right-click on your index.html file, and the first option will be ‘open with live server’:

c) In the case your browser does not automatically open, navigate to your default browser, and you should now see your first webpage:

8. You’ve Created Your First Webpage

You’ve done it, you’ve started your HTML journey!

Now What? Next Steps?

In terms of where to go from here, you can:

a) Just like you would continue to learn more vocabularly when learning a language, you could learn about other HTML tags, and add these into your webpage. As a starting place I would recommend CodeCademy’s ‘Learn HTML’ course.

b) If you want to speed right ahead to styling, you can start exploring CodeCademy’s ‘Learn CSS’ course.