Code your first webpage

HTML Cheatsheet

• Download HTML Cheatsheet (PDF)
• Star HTML Cheatsheet on Github
• Share HTML/CSS Cheatsheet Link: https://ilovecoding.org/blog/htmlcss-cheatsheet

CSS Cheatsheet

• Download CSS Cheatsheet (PDF)
• Star CSS Cheatsheet on Github
• Share HTML/CSS Cheatsheet Link: https://ilovecoding.org/blog/htmlcss-cheatsheet

Video Transcript

Lesson 3: Code Your First Web Page

Okay, okay, okay! In this video, we are going to create our first HTML page. So let's get started. I am going to go on my desktop. Create a folder, and I am just going to call it my first or first-page. Alright, I am going to drag and drop this folder, and VS Code is going to restart and put our folder over here.

I am going to minimize this so I do not have to see all that different text. So over here, I am going to create our first page. I am going to call it anything. I can call it home.html. I can call it aziz.html, and I can call it whatever. But for a standard for the web, the first page of a website is always called index, so I am just going to call it index.html.

Now, we are calling it .html because it is the extension of that particular file. Just like in the world of computers, when you create a file, which is a music file, you will have a song.mp4 or mp3. mp3 is for audio, and mp4 is for videos. For word documents, it is .docx. There are different extensions of the file that tell the computer that this is the file format. Similarly, when we are creating our HTML page, the extension for that page will be either .htm or .html. These are the standard for an HTML file.

So, I just created my first file called index.html. Hit enter and that file has been created. Now, VS Code has this handy feature that I can actually zoom in. So if I do command + + or just keep on doing +, it is actually going to zoom in. So I am going just to zoom in so it is easier for you to see. And I have a certain extension installed, so I am going to make it full screen, so it is easier for you to read.

I am going to close this welcome thing. Now, I am going to start writing some code. Actually. I am not going to write some code. I am just going to write some regular text. So I am going to say, ‘Hi, this is my first website.’ Alright, save, and now I want to see this page.

So, I am going to go to my first-page folder. This is my index.html page, and I am simply going to open it in Google Chrome. So I am going to drag and drop it. Or I can actually double-click it, as well. Alright, it does not matter. So that is open. And you see that our first page has been created. This is my first website. Now, I know this looks pretty simple, but that is the point I want to tell you is that HTML is a very forgiving language!

That means that even when we did not write any HTML, this is just text, and we open that file in the browser. The browser knows how to render that, which simply said, "okay, this is some text. I do not know how to interpret it, and I am just going to throw it on the page." And that is what it does.

I want to tell you is how to create your first web page, how to name the extensions. And also, if you simply write some gibberish text and you keep blabbering around. It is going to print it on the page. Simply save, and I go over here, and I refresh. It is going to put it on the page.

So with that said, you have simply created your first simple, little website. If you want to launch a website, you can just say ‘Coming Soon’ and launch it on the Internet. So every time you save, you have to come and refresh over here. And that is where you see your changes. So with that, you have created your first little web page. But in the next video, we are going to go official and start learning the actual HTML language and its syntax. Talk to you in the next video.