There are tons of articles and good reads out there that help you create your first website as a beginner. The problem with many of them is that they assume you have basic knowledge of domains, hosting, or basic html and css. If you don't have this basic knowledge then these tutorials become not very useful.
So today i'll be sharing the clear and simple steps necessary to go from asking what is a website, to deploying your very own one online!
1. Find a domain name
The first thing you want to do is head over to namecheap.com or godaddy.com and find the domain name you want. A domain name is your website address like www.facebook.com, www.google.com. Let's say you want blob.com. In namecheap's website run a search for blob.com. Let's imagine its available, you buy it (cost around a few bucks) and you're done with step 1.
2. Get a hosting account
The second phase is buying a "house" for your website. This is called hosting. On your newly created namecheap account is active, purchase a hosting plan (you can get one for as low as 2$ a month!). Your domain name will be automatically connectible to your hosting account, otherwise doing so is extremely easy, you can also get a namecheap chat agent to do it for you. Once that's done you can move on to step 3.
3. Create the HTML file
From your hosting account, find the cpanel app and click on file manager to access your website files. There should be a folder called public_html, click that and then select from the navigation bar "new file", name it index.html. You need to create another file and name it style.css. Now edit the index.html file and add the following code inside it.
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Blob Website</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>My First Website</h1>
<p>Check out my new website</p>
</body>
</html>
This is a standard starting template of html code. We start with the doctype tag and add the html tag, along with a head tag (contains the title of your website: blob), as well as a line to "link" the stylesheet. The html file is what creates the text, images and other information on the page, usually without styles (colors, size of elements, etc) and the stylesheet or CSS file is what defines the styles of the text, images and other elements we create in our html file. The body tag "
" is where we start to add content. Here we added a title tag h1 and wrote inside it "My first website" and then a p tag with the text "Check out my new website". We save this file, and now we can style it.4. Add the CSS file
Back in our public_html folder we open the style.css file we created earlier and we can add the following styles to our website:
h1 {
font-size:40px;
color: blue;
font-weight: 500;
}
p {
color: black;
font-size: 14px;
width: 300px;
}
The code above specifies that our h1 title should have a size of 40 px (pixels on screen), a blue color and a font weight of 500. Our p tag, or plain text, should be black and be 14 pixels large with a width of 300 pixels. Nice.
We can save the file and close it.
5. Viewing our website
That's all we need to create a most basic form of a website. Now open a new tab in your browser and type in blob.com (or the domain name you chose) and you will see your code come to life.
We can add images of course and more text, videos, lists, tables, create containers and style them with advanced positioning and gradient colors, but that will be for another post!
I encourage you to add basic content like text and images and check out this website that will help you create anything you want for your website: https://www.w3schools.com/html/default.asp
I hope this makes it clear for you on how to go from computer illiterate (nothing wrong there!), to releasing your first website online with ease.
Top comments (0)