In this blog post, am going to show you how you can build a very simple website from scratch. If you have ever wanted to learn how you can build your own website, don't stop reading.
I just won't end there...once we finish making our website, we will make it go live on the internet and you will be able to share it with friends and family.
Making a website is not as hard as you might think. I would actually argue that...If you have a computer and are able to use Microsoft Word, then you're capable too of making your own website from scratch.
Now let's begin our project. Here is what you need to be able to make a website:
- Text Editor (This is like our canvas/playground where we'll be making our website)
- Web Browser (And this is where we will be viewing the results of what we made)
It really doesn't matter if you use a Mac, Windows or Linux computer.
I am going to try to make this process as simple as possible. Initially I wanted you to pick the default text editor that come with your computers but that might make it a bit tricky since you won't be seeing exactly the same things as I am showing here.
So to make sure you can easily follow this short tutorial please download the following text editor, Brackets
And one more final thing we're going to download, is a web browser, so please go ahead and download Google Chrome
We will use the text editor (Brackets) to write our code (don't be scared, code is just text), and we will use the browser (Chrome) to see how our website looks like.
This is a short tutorial, so I won't bombard you with everything I think you need to know when it comes to making websites. I will actually try to use the Pareto principle here, and give you the 20% you will need 80% of the time.
Let's get our feet wet! Remember when I told you if you can use Microsoft word, then you can build a website? I am going to show you exactly that:
Make sure you have already installed both Brackets and Chrome after downloading them.
Step 1: Make a New Folder on your Desktop or Documents
Go to your Desktop or Documents and make a new folder and name it mywebsite - this will be the folder where our website files will live.
Step 2: Open Brackets
The first time you open Brackets it will look like this (see below), it comes with a default folder with an open HTML file (More on HTML later).
For now, you can just ignore that open file. I want you to go where it says File on Brackets menu bar and click where it says Open Folder... (See below), then locate your folder which you named mywebsite
Select that folder and you will be greeted with an empty page like this, and your folder will be on the left panel.
Step 3: Make your first website file
Let's make our first website file. Right click on that empty area under mywebsite folder (see below) and click where it says New File
As soon as you click New File, a blue text holder place will pop up named untitled-1, omit those words and write the name of your file. We will name this file homepage.html (See below)
You may be asking yourself why homepage.html? ...The name itself 'homepage' doesn't matter, you can name it whatever you like. But what follows after that is what it's important the '.html', .html is the file extension that shows that this is a website file. Just like when you create a word document, it can be named as newdocument.doc or newdocument.docx to show that those are Microsoft Word files, we use .html to indicate that this is a website file.
Step 4: Edit your website file
If you look to your right pane which is an empty white space, this is where we will be making our website. You will see that there is number 1 written that indicates that is the first line on our text editor (code editor).
Type the following words, "This is my first website! Exciting." See below
Hit Ctrl + S on your keyboard to save the file. On Mac it's Command + S
Believe it or not...That's our first website. Actually, why don't you try to go to your mywebsite folder and open that file by double clicking. If you've followed all the steps above, the file should open in a browser window. Did you see that? How exciting.
No matter how simple it is, that is your first website and if you want it you can even upload it to the internet for all the world to see. However, we're not going to do that yet, our website is still way too basic.
Step 5: Spicy it up
I told you previously that the .html extension is used to tell that the file named is a website or a web page to be more specific. Now HTML itself in case you're wondering stands for HyperText Markup Language. Believe me, right now you really don't need to know what exactly that means. All you need to know is that HTML is used to make websites!
Now HTML itself has a set of rules of how a website should be made. See what we did above by just writing "This is my first website! Exciting." on the code editor...that was not proper HTML. I just wanted to show you how easily and fast you can get a website going. But now we're done with that part, we're going to follow a few set of rules to make this simple website.
The first rule we have to follow is by showing that all the text that we're going to write in our text editor is HTML. And we do that by enclosing all our text in something called the HTML tag. It looks something like this <html> - that is an HTML tag. Almost all HTML tags come in pairs...you have an opening tag, like the one I just showed you...and then you have a closing tag. This is how an HTML closing tag looks like </html>
So that's how we will be writing our HTML code by using HTML tags. HTML tags are sometimes called HTML elements. And there are a lot of those to use for different cases. For example the sentence we wrote on our text editor was a paragraph, so using HTML tags we could have used these tags: an opening paragraph tag <p> and a closing paragraph tag </p>
Congratulations! You now know two HTML tags...But you will be surprised to know that there are a lot of them...I actually don't even know the exact number. The good thing though is that you don't have to know them all, and that's why in this tutorial I will only show you a few. As you continue with your journey in other advanced tutorials you will learn a lot of others.
Before we go back to write more code, I wanted to share a few more HTML tags. Body tag <body> and its closing tag </body> are used to indicate all the things inside those tags that we will see on our main browser window.
Step 6: Back to the Editor
Now you have learned about HTML tags, let's us go and write them in our editor. (See below)
See! I have used all the HTML tags I just talked about. I would like you to do the same by looking at the example above. You'll also note our beautiful Brackets editor does a nice job of completing the closing tags for us so that we don't have to write everything. Thanks Brackets!
Now, save again that file and go to your folder and open it again on your browser. What do you see? The same, right? Though nothing has changed so far, the introduction of HTML tags will give us so much power on how we want to present our information.
Let's keep playing with more tags now you got the hang of it. The other tag I would like us to know is known as the title tag, <title> - this is used to contain information about the title of our website and normally this appear in the title bar of your browser window. I will show you what I mean...
Add the title tag just like above and any words you want in between the two tags, save the file and see how it will look on your browser. This is how my website looks now, pay attention that what we wrote in the title won't appear on our main browser window. Because the only content that appears there is the content that is inside our body tags.
Please note that though the title tag worked perfectly, it's usually placed inside another tag called the head tag <head>, so am going to do that right now. I will place all our title tags and their content inside the opening and closing head tag.
Step 7: Finishing Our Website
Are you excited to keep on going? This is our final step
Now let's move a bit faster, there are a few more HTML tags I would like you know.
<h1> tag is used for headings, this will be your heading one. Then we have <h2>, this is your heading two. Also we have <h3>, <h4>, <h5> and <h6>. Try to play with those inside the body and see what you get.
I have added the following tags to our website, and also I removed our initial paragraph. Be free to change the content to your liking:
Let's look how that content will appear on our website:
You have made your first website and learned about HTML! This is a life changing moment believe me!
If you thought I would leave you like that, you're mistaken. I wanna see this thing go live today as we're talking. So we're going to publish our website on the Internet. And guess what? It's FREE!
The service we're going to use is called Netlify Drop. So click that link, and you will be directed here:
Now before you proceed this is very important, go to your website folder and rename your file from homepage.html to index.html so it looks like this:
Through Netlify Drop we can easily upload our website on the Internet for free. And the process is super simple. All we need to do is to go to our website folder and drag that folder to the Netlify Drop website, where it says Drag and drop your site folder here
So that's exactly what I am going to do, am going to my Desktop and drag the whole folder to Netlify drop just like you see here:
And Voila! Website is LIVE!
If you click the link, you will be directed to your website on the browser, please take note of your address bar where it will now show that link.
Now I don't want to kill the excitement but make sure you sign up for Netlify account, it's all free, don't worry. That way your website will be stored under their server forever. But if you don't sign up and get an account it will only be for 24 hours, then they will take the link down. So make sure you sign up!
Ok...enough for now
Please stay tuned for another tutorial where we will be looking at another technology used to make websites. This is called CSS, and through CSS we will be able to style our websites, add colors, align it properly and so forth. Hope you enjoyed this HTML lesson.
Your time is limited, so don't waste it living someone else's life. Don't be trapped by dogma - which is living with the results of other people's thinking