Make your first website by reading this post. Learn to Code#1
Tags: html, beginners, tutorial, productivity
Published: 2022-02-17 11:37:37

If you're interested in making websites, This will be a great starting for you. But before making the website, You need some requirements. 

**1st** - Install VS Code
**2nd** - Open VS Code and Install an extension called 'Live server'

_Image Given Below_

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8yapt9r7hf7f0m1ngi2s.png)

**3rd** - You need a browser. _EX - Internet Explorer _ **😜**

And that's all you need.
Now,
 
For the first step - Make a folder and open it in VS Code. To open the folder in VS Code. To open the folder you need to go to **File > Open Folder** or **Use the Keyboard Shortcut** - `Ctrl + K + Ctrl + O`.

And for the Second Step - Make a new file by clicking the button in the Side Bar. 

_Image of the Side bar and the button_

**Side Bar Image -**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aewqxpcm5m0xasipaotu.png)

**New File Button**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/868nlo8r53j5khk5ripn.png)

_The Highlighted Content in the above image is the New File Button_

After that, You want to put the file name. For that, You type `index.html` for the file.

And The last step, The third step - type the Emmet `!` in the file. 

_For those who don't know what Emmet is - Emmet is a set of plug-ins for text editors that allow for high-speed coding and editing in HTML, XML, XSLT, and other structured code formats via content assist._

_Image of the Emmet_

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t3td91yfseeb8ts6kdyz.png)

After typing the Emmet `!`, Press enter and it will automatically type a bunch of code. Then remove the following code from the file. 
```
<meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
```
 WE ARE NOT USING IT. We will look for every code written in the file after completing our project.

Then in the middle of the body content, type `<h1>Hello Everyone</h1>`. Also, Don't forget to save the file. To save file, Press `Ctrl + S` in your keyboard. Then, Press the `Go Live` button in the Status Bar. 

_Image of the Status bar and the `Go Live` Button_

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1otzidn53algumwzz65r.png)

And that's all for the coding. Now let's look at the breakdown of our code.

                 **BREAKDOWN OF OUR CODE**
Hey, Are you still reading? Then please follow. 

For the breakdown, We'll look at the first section which is -

```
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body>
    <h1>Hello Everyone</h1>
</body>
</html>
```

In the first line - `<!DOCTYPE html>`, It declare the HTML document type. It means that it is a 'HTML' file. and the second line `<html lang="en">` means the language of the web page. In the third and fifth line, We can see two codes - `<head>` and `</head>` - It means the head, Where the data stores the data. In the third line you can see `<head`> and  in the fifth line `</head>`. In that, the third line is starting - Which has only bracket angles and in the fifth line is the closing - Which has angle tag and a forward slash. 

The fourth line is `<title>Document</title>` means the title of the web page. You can change it into anything like My first website or My Website. It customize the title of the web page.

_Image of the title of the web page after writing the code `<title>Document</title>` in it._

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9wwswrzes7z29tk3xs02.png)

And for the last part - The sixth, seventh and eighth line, It shows the code 

```
<body>
    <h1>Hello Everyone</h1>
</body>
```.

It is the body tag where we write all the design and things of our website and the h1 tag, which means 'heading 1' is the heading tag. You can also type anything in the place of 'Hello Everyone'. For example - Hello guys, Halo etc.

The ninth tag is the closing of our HTML tag.

Our breakdown is done. That's all for today and have a Nice day. 

_The Image of today's coding_

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tp7el9vxr2ftm0kuax9d.png)

Thank you,
From Gautham.