HTML Environment Setup

HTML doesn’t need a lot of setups to get started, you will need two main things after a working computer.

Setting up a browser

A browser of your choice, but chrome is preferred for web development, cause of its amazing devtools.

Chrome devtools will help you inspect HTML elements, and debugging why maybe something is not working.

Other browsers do have their devtools as well, but in my opinion and a lot of other developers, chrome provides a better experience overall.

To install google chrome browser, if you don’t have it already. you will download the chrome installer for your operating system.

Then you will install it just like you will install any other application, nothing special so I will consider that you’re already comfortable installing applications.

Now that you have google chrome ready, we need to install the second required application, which is a code editor.

Setting up a code editor

A code editor is an application, that you use to edit your code source, in our case HTML webpage code source.

As for the browsers, there’s a lot of available choices when it comes to code editors.

But as for google chrome, we will choose a code editor by Microsoft called Visual Studio Code or short of VSCode.

VSCode is a great code editor, that will provide you with HTML support and a lot of other programming languages.

You can easily install visual studio code by downloading the vscode installer for your operating system.

Then install it the same way you did for google chrome, also I will consider that you’re comfortable installing applications.

If you don’t know how to install applications for your operating system, you can do a simple search on YouTube.

Something like "how to install visual studio code in windows 10" while windows 10 is the name of your operating system.

Hello World in HTML

Hello, World is a popular example for getting started with any new technology.

  1. Open visual studio code, from File>New File you can create a new document.

  2. Write the word Hello, World! into the document you just created

  3. From File>Save save your document to your desktop as hello-world.html. Don’t forget the extension .html at the end.

  4. Now from your desktop, open the file you just saved into your browser.

  5. Congrats, you just created your first HTML webpage

HTML webpages do use the file extension .html, as for music .mp3, .wav or videos .mp4, .mkv in HTML we use the .html extension.

The HTML file extension is important, without it, the browser won’t know how to interpret the file.

In the next section, We’ll learn about HTML webpage structure, even if you’re Hello, World webpage, worked fine on the browser.

We didn’t include some required elements, in our HTML webpage in order for it to be valid.