Skip to main content

How to Start HTML for Complete Beginners

· 3 min read

This article is for non-programmer to arrange ADE (Application Development Environment) on your computer to start web development with HTML.

The only 4 steps get you ready to explore the coding world!

  1. Install browser
  2. Install editor
  3. Add extensions to editor
  4. Give it a shot

Application Development Environment​

Your laptop is no different from ones programmers use except ADE, Application Development Environment. The process includes downloading and installing software and change their settings. The fact is that some people hate coding just because they had difficulties to set up the environment, like me.

install and download
  • Download: Copy data from the Internet to another machine.
  • Install: Get the machine ready to use software you downloaded.

Browser​

You're reading this site with a browser, and skip the section if you're using Google Chrome. In this article I use Google Chrome because it facilitates developer tools, which are very useful in web developing.

Chrome dev

Editor​

A software to write text. You can code with the default text editor, but I wouldn't recommend it to use for coding. Editors for coding come with useful functions such as auto-completion and syntax highlighting, without which it's extremely difficult to code without typos.

My recommendation is Visual Studio Code by Microsoft (often shorten as VS Code) for the following reasons:

  • Free
  • Many useful extensions
  • Light
  • Well-maintained
  • etc...

Unless you have your own favourite editors, this will work for most of the cases. Download it from here and install it following the installer.

VS Code Extensions​

Just like Google Chrome, VS Code has a lot of useful extensions. They add very useful functions for coding to the editor.

How to add extensions​

Super easy 4 steps:

  1. Click the square icon on the left
  2. Search by words
  3. Click an extension you want to install
  4. Click "Install"

Add VS Code extension

Useful Extensions for HTML coding​

HTML Snippets​

A collections of useful functions about HTML such as auto-completion, syntax highlight and snippets. Find further information here。

Live Server​

You can host a server without any configurations but just one click with it. Find further information here。

Server and Client

Roughly speaking, server is a computer that running websites, while client is a computer to access to websites (your laptop.)

Give It a Shot​

note

Install Live Server before try this section.

  1. Create a directory at Desktop or wherever
  2. Open the directory with VS Code by File > Open ... or Command/Ctrl + O
  3. Create a file and copy and paste the following code and save it as index.html in the directory
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    Hello World!
  </body>
</html>
  1. Click Go Live at the right bottom of the editor

Go Live

If Chrome opens automatically and shows the following page, you did it! If Chrome doesn't open automatically, open it on your own and enter http://127.0.0.1:5500/index.html.

Hello World!

Now you're a web engineer! 🎉 Update your resume!