Part of the Series: How To Build a Website With HTML

This tutorial series will guide you through creating and further customizing this website using HTML, the standard markup language used to display documents in a web browser. No prior coding experience is necessary but we recommend you start at the beginning of the series if you wish to recreate the demonstration website.

At the end of this series, you should have a website ready to deploy to the cloud and a basic familiarity with HTML. Knowing how to write HTML will provide a strong foundation for learning additional front-end web development skills, such as CSS and JavaScript.

To explore HTML in practice and begin building an HTML website, we’ll need to set up a new project using a text editor. This tutorial series uses Visual Studio Code, a free code editor available for Mac, Windows, or Linux, but you may use whichever code editor you prefer.

After opening your preferred text editor, open up a new project folder and name it html-practice. We’ll use this folder to store all the files and folders we create in the course of this tutorial series.

To create a new project folder in Visual Studio Code, navigate to the “File” menu item in the top menu and select “Add Folder to Workspace.” In the new window, click the “New Folder” button and create a new folder called html-practice as illustrated in the gif below:

Gif of how to add a project folder in Visual Studio Code

Next, create a new file called index.html inside the html-practice folder. We’ll use this file through the tutorial series to experiment with HTML. If you are using Visual Studio Code, you can create a new file by using Right Click(on Windows) or CTRL + Left Click (on Mac) on the html-practice folder, selecting “New File”, and creating the file index.html as illustrated in the gif below:

Gif of how to add a file in Visual Studio Code

You now have a project folder and file for exploring HTML. We’ll return to this file in the tutorials ahead.

A Quick Note on Debugging HTML

Before we get started with our HTML exercises, be aware that precision is important when writing HTML. Even an extra space or mistyped character can keep your code from working as expected.

If your HTML code is not rendering in the browser as intended, make sure you have written the code exactly. To troubleshoot errors, check for extra or missing spaces, missing or misspelled tags, and missing or incorrect punctuation or characters. Each time you change your code, make sure to save your file before reloading it in the browser to check your results.


Creative Commons License