Hello, I'm Adrian Michael CJ Cool and I'm going to help you through making your first website in HTML using Vim.

There will be 5 parts to this.

  1. Opening a file
  2. Switching Modes
  3. HTML File Setup
  4. Adding Information
  5. CSS & JS

There are many tools that can be used when editing code. Those being:

And many many more. For this tutorial we will be using Vim.

Opening a file

To open a file in vim you first need to open terminal.
After opening the terminal type the command vim index.html

Switching Modes

Now that you're inside vim, you can see the contents of your file.
At the moment you can't edit any information.
To switch to a mode where you can edit information, press I, To exit edit mode, press Esc

HTML File Setup

To start with HTML editing, you first need to set up the document.
To do this type in the following text:

<!Doctype html>
            <html lang="en">

This is the basic structure for a HTML file. Now we move onto the information within said file.

Adding Information

Adding information to your HTML file is quite easy. Below this will be a basic template for adding information. This should be written on the line following our setup data.

<head>
    <title>Your Title Here</title>
    </head>
<body>
<h2>Your Header Here</h2>
<p>Information Can Be Written Here</p>
</body>
</html>

This text will provide you a simple and basic template for a HTML page. With this we can move onto more advanced code

CSS & JS

CSS and JS stand for Cascading Style Sheet and Javascript respectively. To a beginner they can be quite advanced, however this guide is here to make it easier.

To start with CSS type in the following information underneath your title:

<style>
            body{
            background-color: Color Here;
            }
            </style>

This will get you started with a colored background.

To add JavaScript, things get a bit more technical. We'll be using a validator code as an example.
To start download the code from the following link.

Validator

After downloading this, create a new subfolder within the folder your index.html is in. Name the folder js and place validate.js inside it.

Now add to your HTML the following text just after your style script:

<script src="js/validate.js"></script>

Adding this to your HTML will allow you to validate it.

Finally to finish, press esc, type :wq and boom, thats your HTML

This is pretty much everything you would need to know for making a website with HTML. I hope you enjoyed.

Au revoir