You want to create your own website? Well, that’s a great idea. I’m sure you already have your reason behind this, but let me give you some of the pros for creating your own website from scratch using HTML and CSS.
But first, you should know that there are lots of tools online that let you create a website for free. Entirely for free, yes. Something that most people who use these services consider to be a great bonus is the fact that you don’t need to have a lot of technical knowledge to get things done. That’s true.
Most of such services give you a platform that works as a drag and drop tool. The idea is that you have many pre-created modules that you can just drag and drop onto the website layout. This way you can see in real time how our website will look when somebody visits it. When everything is in place, you just save it and hit publish. All done.
But there’s a huge minus with these types of platforms. What is that, you might rightfully ask. Since these services use prebuilt layouts, they don’t give you a lot of freedom in designing a personal dedicated website. If you choose to go with a template they offer, there’s a high chance that you’ll find online another website that looks almost the same as yours.
This is why in this article I’ll give you one of the most efficient methods to create a personal website, that can be customized as much as you want. But what are some of the pros in creating a personal website? These really depend on your own situation.
For example, maybe you want to expand an already working business idea. If that’s the case, then a website can be a major asset on your end. Just think about the possibilities: you can get new clients from all over the world and make your business worldwide. This takes some work, but it’s an achievable goal.
Something more personal, that a lot of people find to be more accessible is a blog. I’m sure you already visited on or two. The basic idea behind a blog is that you, the creator, will write articles about a topic that interests you a lot. You don’t necessarily need to have a degree in that field, just be interested and passionate about the subject.
No matter what your reason behind it is, creating a website is one of the most efficient ways to do something better online. And the method that I’m going to show you here is an efficient one, that can be used to create any type of website: business site, personal blog, directory website (like Yelp) or any other.
As you already saw from the title, we’ll cover how you can create your own website using only HTML and CSS. For this you don’t need any sophisticated hardware, just an internet connection and Notepad (Notepad++ is even better, it’s a free software you can download online). After this, I’ll give you some info on how you can publish the site online without much difficulty.
Quick reminder: This is not a tutorial on how to create a fully personalized website. It’s only a small introduction to what you can accomplish if you choose to work with HTML and CSS to create your own website. Now that you know this, let’s move on and talk about the first thing that you should know when creating a new website using HTML and CSS.
What is HTML and CSS?
First, let’s see what are HTML and CCS used for? HTML stand for Hypertext Markup Language. Yes, it’s easier to just say HTML. The idea of this language is to help its user create a markup of the website. Think about it as a skeleton. Everything else is built upon this foundation. A bit later in the article you’ll see how this language is used to build a website.
CSS means Cascading Stylesheets. This language is used to style the created website. In other words, CSS will help you make your website look good. It can be used in many ways, but in this article, we’ll have it style some parts of our website.
Now, let’s start off with the first thing you need to do. For things to go easier, just create a new folder on your desktop called ‘’website’’. We’ll put all the site’s files in this folder for an easier handling. Once you have the folder created, open it and create a new file called ‘’index.html’’. It’s important that you put the .html extension at the end of the name. This will help us preview the website in a browser window later on. If you’d like to, you can save the file we create as an HTML document later as well. This really depends on your preference.
Since you’re already in this folder, create a new file again and name it ‘’style.css’’. Just like before, don’t forget to put the right extension: .css extension at the end of the name. In this file we’ll have to write all the styling for our simple website.
Now that you have both files created, open the first one, the index file. Open it in Notepad or Notepad++, it doesn’t matter. Next, we have to create your first HTML website. Just write the code that I have here below, or copy and paste it in your file:
[code]<!DOCTYPE html>
<html>
<head>
<title>My First Website</title>
</head>
<body>
</body>
</html>[/code]
Everything that you just wrote is HTML code. The parts that look like this <example> are called tags. Most tags are made up of 2 sides: opening and closing tags (<example> and </example>). Basically, these are different parts of the website. The first tag that you’ve written is just to let the computer know that this is an HTML document.
Next are the <html></html> tags. Everything that we’ll write in HTML code will sit in between these tags. Put simply, this is the HTML document itself. The first tag that comes after this is the head tag. This is where the title of your website goes. For this example, I just wrote ‘’My first website’’. When you open a website in the browser, the title is what will be displayed as the tab’s name. There can be other elements inserted in the head tag as well, but for our simple site this is all we need.
The most important section is the next one, the body. This is the place where all the content of the website goes. From now on, everything we’ll write will be put in between the body tags. At this point if you save the file and open it in the browser, nothing will be displayed because there is no content added yet.
For that to happen do the following step: add this code inside the body tags:
[code]<p> You can add here your first paragraph </p>[/code]
All this will do is to add a new paragraph to your website. Now if you save the file and preview it in the browser, you should see the sentence: You can add here your first paragraph
The basic idea here is, that you need some kind of content to be able to display it in the browser. The tags themselves without any content won’t do much. In this simple example, we’ll create a website separated into 4 sections: a header, a footer and 2 columns. Right now, you can delete the previously added paragraph tag. The next step is to write between the <body></body> tags the following HTML code:
[code]<div id=”container”> <p>Here comes the container for header, sidebar, main content and footer </p> </div>
<div id=”header”> <p> Here comes the header of your site </p> </div>
<div id=”sidebar”> <p> Here comes the sidebar area</p> </div>
<div id=”main content”> <p> Put your main content into this div </p> </div>
<div id=”footer”> <p> Here comes the footer of your site </p> </div>[/code]
Like I already mentioned, the code that I just wrote goes inside the <body></body> tags. Let’s recap what we’ve done until now: first, you created 2 files, 1 called index.html and 1 called style.css. The next thing was to open the index.html file and edit it in the way we did above. So, your HTML code should look like this for now:
[code]<!DOCTYPE html>
<html>
<head>
<title>My First Website</title>
</head>
<body>
<div id=”container”> <p>Here comes the container for header, sidebar, main content and footer </p> </div>
<div id=”header”> <p> Here comes the header of your site </p> </div>
<div id=”sidebar”> <p> Here comes the sidebar area</p> </div>
<div id=”main content”> <p> Put your main content into this div </p> </div>
<div id=”footer”> <p> Here comes the footer of your site </p> </div>
</body>
</html>[/code]
Check everything to be correct. Now, if all is good, let’s move on. If you preview your HTML file in the browser window, you won’t see anything spectacular. This is where the style.css file comes into the picture. Before opening it, we need to link it to our existing HTML page. To do this, write the code you find below inside the <head></head> tags:
<head> <link rel="stylesheet" type="text/css" href="style.css"> </head> – All this will do is to link our styling file to the HTML file we already worked in. There are other ways to style a website using CSS but this is the most common and efficient way, that we’ll use as well.
Adding the CSS Rules
Now, you can open the CSS file in Notepad and we’ll begin styling the website. To be able to add the styling, we’ll reference the ids of our already created sections: container, header, sidebar, main content and footer. The code for your CSS file will look like this:
[code]body {background: white; margin: 0; padding: 0;}
a {color: #2b2bf6;}
#container {width: 1000px; margin: 0; padding: 0; background: #dddddd;}
#header {width: 1000px; height: 150px; margin: 0; padding: 0; border: 0; background: #3bcce1;}
#sidebar {width: 300px; height: 400px; margin: 0; padding: 0; border: 0; float: left; background: #fff600;}
#main content {width: 700px; height: 400px; margin: 0; padding: 0; border: 0; float: left; background: #d7f7fd;}
#footer {width: 1000px; height: 70px; margin: 0; padding: 0; border: 0; float: left; background: #261c69; clear: both;}[/code]
You’re maybe thinking that this is very complicated, but that’s really not the case. Once you understand what all this code means, you’ll feel much better. For start, you can notice that every new CSS code starts with a reference to the HTML index file. For example, the first line starts with the word body, referencing the body tag in the HTML file. In this line we simply make the background color of the body white and tell the browser that it has no margins and padding.
The ‘a’ stands for the links we will add in the index.html file. We change the color, so the user can know that he clicks on a link.
The other elements starting with #, represent the div tags we added as our different sections. Since we have 5 div tags, we can’t style them separately by referencing the word div. To do this correctly, you have to name the id for each of the div tags: container, header and so on.
You can see that all the sizes of all the sections are set by using pixels as the width and height. You can use mm or cm if you want, but the standard measure is pixels. You can play around, and change these measures, so you see how that affects the webpage.
At this point, if you save both the files and preview the HTML document in the browser, you’ll see a nicely separated page, that resembles a website’s layout: the header at the top of the page, a sidebar to the left, the content that is the main part goes on the right and takes up the most space, down at the bottom there’s the footer of the site.
Let’s make something clear about a tags in HTML. These are used to add links to a website. We didn’t add any links to our page but you should know how that’s done. The format for links is the one below:
[code]<a href=”https://example.com”>This is a link</a>[/code]
The href attribute is mandatory. Without it properly completed the links won’t work because they are not linked to anything. As default, links are colored blue in any HTML file. But if you want to, you can change that, like we did above in our CSS file. Just mention the a tag in your CSS file and give it a new color, whatever you want.
This was just a small introduction to how you can create your own website from scratch using only HTML and CSS. Of course, this was just an example, but if you want to, you can tweak this to look even better and add some more content to it: an article about something you like or some images or something else that is found on a website, this really depends on what you want to create.
Going Live on the Internet
But now that you know how a website is created using HTML and CSS, you should know as well how to make it go live on the web. After all, for now you are the only one who can access what you create. To be able to go live with any website, you first need a domain name and later a hosting plan.
We’ll talk about both of these, right now. Let’s start with the domain name.
You probably already know that any website must have a domain name. This is basically the name itself of the specific website. For example, Google has the domain google.com or YouTube has the domain youtube.com. Any domain name is displayed in the address bar of the specific website.
For your website to go live you need to figure out what it’s going to be called and what subject you’ll cover on it. To help you get this easier think about this next example: let’s say you want to create a blogging site about movies. Of course, your site will need a name that’s related to movies. But to be more precise, you need a name that relates exactly to your site’s subject. If you’ll talk about sci-fi movies, you want to name it accordingly, not just movies.com. The idea is that you have to come up with a name that fits your website’s theme really well. A site about sci-fi movies could be called: Sci-Fi For All. The domain for this could be scififorall.com.
When you choose your domain name, it is best if you go with the .com or .net extensions. Possibly your country’s extension. But leave out the weird ones like .xyz or .blog. They’re not very efficient if you want to get traffic on your website, and a .com or .net domain looks much more professional.
If you have the idea for your site’s name, then you must look for a hosting plan that works best with your needs. A hosting package is basically a service that allows you to upload your website’s files (all of them) and let others access the website online.
You can find many hosting companies on the internet, but in this article, I’ll give you a quick overview of one of the most popular and efficient choices you could go with. The hosting company we’ll talk about is called BlueHost.
This is an American hosting company that powers websites all over the globe. It comes with many services. For instance, some of the hosting possibilities they make available are shared hosting, VPS hosting, cloud hosting, dedicated hosting and WordPress hosting. In our case, the shared hosting is the best choice, so we’ll cover that one right now.
Like most hosting services, BlueHost’s shared hosting also comes in 3 separate plans. These are:
- Basic for $3,95 / month
- Plus for $5,95 / month
- Choice Plus for $5,95 / month (it’s no error, that’s the price)
Basic Plan
The Basic package is for those who are just starting out with a new website. In your case, this can be a good choice. What is it offering for this price? Let’s see! For start, you get 50 GB of SSD storage instead of traditional HDD storage. This is a great pro, because your site will load much faster when a visitor accesses it.
They also add unmetered bandwidth and 5 professional email accounts (email@mynewwebsite.com). These emails can prove to be an important asset when you improve the site further. The visitors will know that they deal with a professional in a certain field.
If you choose to pay ahead for a whole year, then BlueHost will give you a free domain name for a whole year. Yes, you don’t have to pay anything for your first domain name. And to top this even more, they will give you a free SSL certificate to use on your website.
An SSL certificate is a tool that will encrypt the communications made between your site and the users, thus giving them a secure online experience. Every website should have an SSL installed, and BlueHost will give it away for free.
Plus and Choice Plus
These 2 plans come for the same price. Compared to the first Basic package, you will get some more bonuses if you choose one of these plans. For instance, any one of the 2 will grant you access to unlimited websites for hosting. That’s right, you can host an unlimited number of websites for this price.
The storage also goes up to unlimited SSD space. To make it even better, BlueHost will give $200 of ad credit to use for marketing purposes. To grow the site faster, this can be of great help.
But what’s the difference between these 2 plans? The only difference is that the Choice Plus plan will also give you 1 domain privacy and CodeGuard Basic for backing up the website.
If you look for a more complete package, the Choice Plus plan could be your best bet for success.
No matter which plan you choose, when you finish the sign up, you can easily upload all the website’s files to the server, and it will go live in a matter of minutes.
Besides BlueHost, there are countless more web hosting companies that are worth looking at (SiteGround, InMotion Hosting, A2Hosting, HostGator, Hostinger, GreenGeeks etc). One of the best alternatives for BlueHost is Hostinger. They have very low prices with lots of features included for all of their plans.
But since you’re only just starting out, I recommend BlueHost. It’s by far the most user friendly among most of the competitors and they give you everything that’s needed to make sure your website is online all the time.
In this article we covered how you can create your very first website using only HTML and CSS. I think you agree that it isn’t as complicated as some might say. Of course, if you choose to create a fully functional website with HTML and CSS, you need more information and a full tutorial on how to customize it to the highest level. This article gave you a good introduction to what website creation is and how you can publish any website online using only Notepad (to create) and an internet connection.
