Have you wondered how to make your own website for your small business or a personal blog?

You have come to the right place!

Are you scared of coding and other technical stuff? Don’t worry, I will teach you the basics of HTML so you can launch your first site.

I will also teach you how to make your very own WordPress site. Don’t know what WordPress and HTML mean? Keep reading and you’ll find out!

In this post, I will teach you the super basics and give links to great learning material for you to watch and read.

Let’s get started!

Table of Contents

Why Make Your Own Website?

Here are some facts about the internet:

“Website promotes you 24/7: No employ will do that.”
- Paul Cookson

Daily statistics for

The Internet

0

Google searches

0

Blog posts

In the age of Facebook, Instagram, Pinterest, and all of the free blogging sites, why do I need a website?

That is a great question. For me, having my site means having freedom. I can publish all kinds of content in ways that I want. I can fully control the visuals and every other aspect. 

Here’s a quick list of reasons to make a website:

  • Get to choose the presentation of your content.
  • Can publish all kinds of content including articles, videos, photo galleries, your very own blog, etc.
  • It makes you look professional.
  • Can make money from your content.
  • Allows you to communicate with your audience.
  • It gives you valuable experience in content creation and marketing.
  • Shows that you are passionate about your subject.

Creating a website has never been easier. There are thousands of articles, videos, and books about the subject.

Probably one of the most compelling reasons to make a website is the possibility to make some money from it. 

Whether it be reaching more customers for your business or monetizing your blog, there are multiple ways to make money. 

Let’s focus on the individual side. 

A blogger can make huge amounts of money. 

Making money from your website is easy

The top bloggers can make millions of dollars per year. You don’t even have to be the biggest to make blogging your living. 

Having your own website means you can monetize it the way you want and can even sell products or courses to your fans. And if you have your own business, a website that gets good traffic is one of the best ways to improve your sales. 

Recommendations for getting started

This page will expand over time and I’m going to be linking to the best resources I find.

If you are more into the technical side and would also like to learn how to code I recommend FreeCodeCamp and The Odin Project. These are free courses that will teach you pretty much anything you need as an up and coming web developer.

If coding isn’t your cup of tea then don’t worry, I have resources for you too! For those of you who are interested in using WordPress, this book is great for learning the basics and building a good looking site. 

For all the visual learners check out this YouTube video by Tyler Moore. He has great WordPress videos which I highly recommend.

Way to go!

You made it through the first section! Now when you know why you need a website, let’s figure out how to build one. The next section will teach you basic HTML and after that, we’ll look into the magic of WordPress!

Keep learning

Building a website the old fashioned way

The next part of this guide will show you the basics of HTML and you will be making your first website!

I’m going to first explain a few things and then it’s time to get your hands dirty.

If you are not interested in the manual way of creating a website you can skip to the WordPress part below. However, I recommend at least learning what HTML is as it’s the foundation of every website.

What is HTML

Designing good looking websites is important

HTML or “Hypertext Markup Language” is the building block of websites.

After reading this post you will have the skills required to build and launch your own HTML only site. 

This being said only using HTML won’t make your site stand out. Or maybe it will but not in a positive way.

But that doesn’t mean this isn’t an important step in your learning path to web design wizardry!

Back to HTML, the alphabet soup acronym you’ll learn to love.

All websites in the World Wide Web are built from HTML elements. These elements are represented by little angle brackets <> which are called tags.

Even pages that use content management systems (CMS) like WordPress or Joomla are made from HTML elements. The benefits of using a CMS come from not having to do the HTML by hand. Later I’m going to show you how you can make your own WordPress site so keep reading.

List of common HTML elements:

  • <h> tags which go from h1 to h6. Meant for headers.
  • <p> tags are meant for paragraphs, the normal text on pages. 
  • <ul>, <ol>, <li> tags create list like this one. UL stands for unorganised and OL for organised lists.
  • <div> tags mark the basic divisions of a website. 
  • <span> tags are an inline containers of text. 
  • <img> tags represent where images should be embedded.
  • <a> tags or anchor tags define hyperlinks. 

Example of HTML in action

Now when you are officially overloaded by new information let’s see an example of basic HTML in action. Below you will see the actual “code” and the end result of looking at it in the browser. (Don’t worry if you don’t know how to do this yourself, I’ll show it to you shortly.)

<h1>My very own Website!</h1>

<p>Creating websites is the best!</p>

<h3>What I like the most: </h3>
<ol>
    <li>Building Websites</li>
    <li>Coding</li>
    <li>Arttu</li>
</ol>
Basic website showing h tags and ordered list HTML elements.

Cool! It isn’t the prettiest site but it gets the job done.

There was a time when only using HTML would have cut it but I’m pretty sure nowadays people want something a little more pleasing to the eye. That’s were CSS or Cascading Style Sheets comes in.

CSS isn’t covered in this guide but there are great resources on the web. There are links to some good ones at the end of the HTML section.

Making your first site

Now that you’ve seen all the code you need for your first site I will show you how to implement it. 

For this, you’ll need a text editor. Don’t worry you already have at least one installed. 

If you are using a Windows machine you can use Notepad or Notepad++. Press the little search button on your toolbar and search for either of those. 

I recommend using Notepad++, but if for some reason it’s not installed (older operating system) Notepad will do the trick just fine. 

Mac users can use TextEdit. Use the search icon located at the top of your screen and search for TextEdit. 

I’ll be showing you the steps using Notepad++. If you are going to keep learning more I recommend downloading another IDE. Popular ones include Visual Studio Code, Sublime Text, and Atom. Do a quick Google search to find the best one for you. I usually use VS Code and can recommend it. 

Step #1 - New file and the groundwork

First, make a new file by choosing the file tab and then pressing “new” or by pressing Ctrl+N.

View of new notepad++ file
Your new empty file should look like this

Then we will add the basis for the web page. This means we have to tell the browser that our document is actually an HTML-document. 

The way to do that is by actually telling the browser that the document type is HTML. Add “!DOCTYPE html” inside brackets at the top of the file.  (You can copy the HTML required for the first step below.)

Next, we are going to tell the browser that this specific part of the document uses html. This is done by adding the <html> tags to our file. 

Next up we are adding the <head> and <body> elements inside the <html> tags.

The <head> is were the page’s metadata is located. Things inside the <head> aren’t shown on the page but they are important. It’s the place where you define links to your style sheets, scripts, and other important metadata. I’m not going to focus on it in this tutorial, but I encourage you to learn more. 

Finally, the <body> tag is where the content of the page is located. It’s where we will add our headings, paragraphs, and all other elements. 

After this step, your code should look like the image below. 


<!DOCTYPE html>
<html>
    <head>

    </head>
    <body>

    </body>
</html>
How your document should look like after step one.

Step #2 - Adding the title and content

Now when we have solid foundations we can start adding things to our page. 

First, we will add our page title inside the <head>.  The title is added inside the <title> tags. 

When you search something in Google the first thing you see is the page’s title. When you launch your site SEO becomes an important factor. For now, this is just a way to get some experience in HTML. 

After you have come up with an awesome title like “Best web page ever!”, we can move to the next part. 

Creating quality content for your website is a time-consuming task. Fortunately, we are not focusing on it today. You can check my recommendations at the bottom of this page. 

The content of your page is placed inside the <body> tags. It can be made with different HTML elements that I showed you before. For this page, adding a heading and a paragraph is enough. 

There are six different types of headings and they are represented by <h> tags.  H1 is the biggest and H6 is the smallest. You can use different heading types to make your page more understandable for screen readers and search engines. 

The <p> tags represent paragraphs. You should put your basic body text inside these tags.

Below is an example of a typical heading and paragraph in HTML. 


<!DOCTYPE html>
<html>
	<head>
		<title>Best web page ever!</title>
	</head>
	
	<body>
		<h1>Hello world!</h1>

		<p>This page is super cool!</p>
	</body>
</html>
The basis of the HTML document of a web page
This is how your finished document should look like.

Congratulations, the “hard” part is over! Next, you will see how to check your website inside a browser.

Step #3 - Running your page on a browser

This is the final step to creating your first web page! 

Now, open the file tab and choose “Save As…” or press Ctrl+Alt+S. 

Choose the file type of “All types” and change the name to whatever you want. Now put .html to the end of the file and press save. 

You just created your first HTML file! The view on Notepad++ probably changed a little but it’s all good. 

First HTML file
How your file should look after saving it as .html

Now the one last step and we can say we are done. 

Find where you saved the file.

Double click it and it will open in your default browser.

You can see the heading and paragraph element as well as the title in the opened tab. 

That’s it. You did it. You created your very own website from scratch. Congratulations!

 

Browser view of the website
Browser view of the page.

Recommendations for further learning

Learn more about HTML and the styling of the web also known as CSS from W3schools. There are lots of examples and  it’s easy to follow along. 

My earlier recommendations for FCC and The Odin Project still stand. All of these are excellent sites to learn from. The interactive lessons at FreeCodeCamp make it the best starting point.

For the few book lovers, I recommend the HTML QuickStart Guide by ClydeBank technology.  You can check the prices on Amazon.

If you still yearn for more, check out the ultimate free HTML and CSS video course below.

WordPress - the easy way

The site you are looking at right now was made using WordPress. One of my goals for this year was to create my own website. Thanks to WordPress it was pretty simple.

As I said earlier, WordPress is a Content Management System. It was first developed as a tool to create blogs easily, and it’s still super popular in that market. Nowadays, WordPress can be used to make pretty much any type of website. 

Unlike the HTML site, the WordPress site is going to be live. Meaning it’s going to be online. This means that you need to have your own domain. 

If you are interested in setting up an offline WP site but you can check out this article by WPBeginner on how to do it. 

If you are looking for an in-depth guide with a video, check out the tyler.com website. 

Step 1 - Domain and Hosting

If you are a student, go check out this awesome pack from GitHub and you can get domain names and plenty of other great benefits for free. Otherwise, you can search for “domain name” on Google. 

If you are interested in fast hosting located in Europe check out  Webhotellit.com. 

If you are Finnish, check out Zoner for a great web hosting experience. 

Make sure that no matter what hosting service you get is that they use cPanel. cPanel is where we are going to install WordPress. Some hosting providers pre-install it, and they will inform you if WP is already installed. 

Step 2 - Install WordPress

It is super simple! If your web host uses cPanel and Softaculous you can download it from the bottom of the dashboard as shown below. 

Installing WordPress from cPanel-min


If for some reason, you want to download it yourself, maybe you want to host it locally or run it from your own server, I recommend the official tutorial from WordPress.org. 

Step 3 - Choose a theme

This is probably the most important part of your website’s visuals so take some time going through different themes. You can see picture instructions on how to change a theme below. 

Hover over the Appearance tab and choose Themes
Next up choose the Add New button
You can filter the results, search for themes or upload a theme that isn't in the standard directory


Now when you know how to change themes, here are the 5 most popular themes of all time:

  1. Divi
  2. Genesis Framework
  3. Avada
  4. Astra
  5. GeneratePress

Feel free to choose one of those or try another one from the thousands of different possibilities. There are a lot of free themes to choose from, or you can splurge a little and by a premium theme. 

Step 4 - Start writing!

That’s it! You can customise your WordPress experience by changing the theme or downloading different plugins. I recommend trying things out. 

Please remember that plugins that aren’t updated regularly can be a potential security threat. So don’t always download the first one and remember to keep them updated. 

Try out different themes and plugins, and most importantly, have fun! But remember that the more plugins you use the slower your site becomes. 

Resources

If you have made it this far you must have a thirst for web development/design knowledge! Or maybe you skipped to find the best tutorials and guides. Anyway, here they are. 

This is where I will link the best resources I can find. If you know some other good learning content, leave a comment and I will add them here. 

Best Resources

If you need more resources for HTML and CSS here are my top picks. 

WordPress is the most popular CMS in the world. It's easy to learn and here are the best ways to do it. 

The ones mentioned in the HTML and CSS tab are all great for coding and so are these:

Now, when you have created your website you need to make content for it. Here are the top picks.

You have made your website and also content for it. Next up is making sure people find it. Here's where you can learn more. 

Twitter

Phew! This guide took me quite the long time to make so any comments about it are more than welcome!

Did you like the content? What about the visuals? Do you want me to make a more in depth version on some of the areas introduced here? 

Tell me in the comments! You can also follow me on Twitter! @ArttuPyykonen
If you are more interested in doggy pictures, you can check out the @happytweetbot1 that retweets all tweets containing the hashtag #dogsoftwitter.

Thank you for reading and being awesome. 

Until next time. -Arttu

Similar Posts

My Top Goals for 2020

My Top Goals for 2020

ByArttu

Hello reader!  Below you’ll find my goals for 2020.  These were written on the tenth of May during the self-isolation period. I hope you’ll find them interesting!  Who knows, maybe my goals will even become yours or at the very least make you ponder and revaluate your own goals. 2020 GOAL #1: Building a 1000$…