Make your first website by reading this post. Learn to Code#1

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

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 -

New File Button

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

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

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.

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

Thank you,
From Gautham.

Blog

Make your first website by reading this post. Learn to Code#1

lifeascoder

Join Our Newsletter. No Spam, Only the good stuff.

Related