What the heck is going on guys? Today we are going to learn how to make a very basic website for free. I must repeat ‘very basic’ and upload it somewhere so that the whole world can see your website/art.
Creating and Starting a website consists of 2 parts –
- Coding the website
- Launching the website on the internet so the whole world can see it.
Now why am i stressing on ‘very basic’ part because the focus of this post is going to be more on teaching you soon to be badass Web Developers on how can you upload the files/website you have made on a server on the internet so that people all over the world can view your website.
Note : Server is basically a place on the internet where you can upload your website, so that the whole can see it.
For example, Facebook is a website but it does have to store/host it’s codes somewhere so that everybody can access it. You will have a clearer understanding as we go further into the tutorial.
Coding the website
Starting website is not a big task and firstly you need to understand that a website basically consists of 2 parts –
HTML – It stands for Hyper Text Markup language. Lets compare our website to our human body. In human body we have a skeleton on which we have skin,hair and other stuff which makes us look beautiful. Similarly HTML is a coding language which forms the skeleton of the website which is useful and forms the base of making our website but looks ugly as fuck.
CSS – It stands for Cascading style sheets. It is like the skin and hair on human body. It covers the skeleton and makes it look beautiful. So CSS beautifies the HTML and makes our website look awesome.
As we are going to code a very basic website our focus is just going to be on HTML coding language. Now chillax if you don’t know HTML not a big deal i am going to cover it from scratch over here anyways.
1) Make a new folder on your desktop and inside it make a new txt file ( right click -> New -> Text Document)
2) Open the text file paste the this code.
<head><title>This is your title</title></head>
<h1>This is the heading if the article</h1>
<p>This is the content of the article. It is being written on date 30th.This article contains absolutely. I am surprised you are even reading it. </p>
3) Now press CTRL + S or simply save the file.
4) The file name must be “New Text Document.txt” rename it to “index.html”
Note : Renaming it to index.html and not anything else is important because after you upload your files to a server and a person visits your website the browser automatically starts searching for the file called “index.html” and displays it on the webpage.
5) Now open the index.html file. It should display something like the image below. This is our very ‘basic website’.
All the code that is written in html is enclosed in tags, that open and close. Any tag that is opened must also be closed.
Example – Open tags – <html> Close tags – </html>
<html> tag- These tags explain to the browser that, what we going to write is actually html code.
<head> tag- The browser first executes the head tag and then the body tag. In it we write the code that browser is supposed to parse first such as title tags.
<title> tag – It forms the title of the webpage as shown in the image above.
<body> tag – It contains all the actual content of the webpage.
<h1> tag – Heading, <h3> -Subheading
<p> tag – This tag is to tell the browser that we are going to write a paragraph.
So in coding part we learned that web development can be easily done by just a notepad editor. It requires the help of HTML and CSS and we should save the file as “index.html”
Starting the website
Ok now that we have finished our basic website we need to upload/host it to a server. Now there are two types of hosting providers –
1) Paid Hosting
2) Free Hosting
As this post is about making a website for free so we are going to have a look at free hosting. To host our files we are going to be using the website www.1freehosting.com ,this is the one is i use to host free website that i make.
We need to follow a series of steps before we can upload our sweet website over there. It’s pretty easy you can go ahead and do it on your own if you want. But for other people ill walk you through it.
1) Go to www.1freehosting.com and register (register button will be bottom-left saying “Get free hosting-No joke”)
2) Enter your details (It’s captcha is a pain in the ass so you might have to try a few times)
3) If you did everything fine you will get a screen like the image below now go to your email and confirm that you want to register. ( You will get 2 emails one for confirm and another for your login details )
4) Once you click on confirm link it will take you to a screen where it will ask you what kind of plan you want. We want 1Freehosting that is already selected so just click on the select button. (Alternately you can also reach this screen by logging in to your account and then click on ‘create new’ )
5) On the next screen you will be asked to enter a subdomain. Now domain is the name of the website you would like to have. For example this website’s domain name is www.hackstories.com . As we are doing free website building we are going to have a subdomain which basically means that part of the name of your website will according to you and the other half your hosting provider will decide.
6 ) After entering your details click on ‘Create’ button.
7) Wait as the account is being created (You might have to refresh your browser after some time)
8) Now click on the switch button
9) Now you are in the Cpanel ( Control Panel ) . Scroll down the Folder called ‘File Manager’. Using this File Manager we are going to upload our website on to the server.
Note : Sometimes the file-manager might not work saying your “Your domain is not pointing to our nameservers ” Then just go back and select a new subdomain name.
10) Now let the option be English ( change it to any other language if you speak it) and click on install.
11) The file manager has opened and there will be a file called ‘default.php’ . Right click on and delete it.
12) After that click on the upload button (it will be on the top-left corner with the image of a floppy disk with a plus sign on it ).
13) Now browse to your index.html file, that we made in a folder on your desktop and double click on it. This will upload this file on 1freehosting server.
That’s it your website is done! Congratulations. No go to the link of your website using your browser and you will be able to see your website in action.
That’s All Folks
If you are confused in any of the steps above, you check our video titled “Starting Website” below.
If you liked this post on “how to start a website” make sure you tell your friends about it. Because hey it’s all about giving back to the community and if you help you friend on learning how to start or create a website for free, i am sure he would owe you one.
If you’re into hackstories, sign up for the hackstories email list and we’ll send you the new posts right when they come out. It’s a very unannoying list, don’t worry.