How To Set Up Your HTML Project
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.
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:
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:
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.