techboyg5 Web Development Tutorial

2.2 - Setting Up

Installing Visual Studio Code

It's easy to learn HTML with a text editor, but an editor specifically designed for editing code is recommended. I'd recommend Visual Studio Code, a free and open-source code editor by Microsoft.

Visual Studio Code works on Linux, Windows, and macOS. However, this tutorial specifically focuses on Windows.

Downloading

Go to the Visual Studio Code download page. Click the blue download button to download an installer.

Installing

Once the download is finished, you can open the installer manually.

Once Visual Studio Code is done installing, you can close the installer window.

Setting up a website folder

Now, create a folder on your computer, where all website files will be stored. Putting it in the root Desktop folder or the root Documents folder is recommended.

Starting Visual Studio Code in this folder

Open Visual Studio Code. Drag the folder to the Visual Studio Code window. Visual Studio Code will restart, running inside the newly opened folder.

Creating your first file

You're now going to create your first file! Inside Visual Studio Code, right-click the empty list of files. Click "New File", then name the file index.html. This will be the home page of your website.

The New File option highlighted in the context menu of Visual Studio Code The New File textbox, with index.html types in it The blank index.html file

Opening the file in your browser

Right-click the index.html file in Visual Studio Code. Select Copy Path. Now, paste the copied content in your browser's address bar. You should see a blank page, because the index.html file has no content yet.

Now you're all set! You have a development environment where you can test code.



Comments

Leave a Comment