HOW TO MAKE A WEBSITE
Step-by-Step ABC Guide
Author: Donald Christensen – a developer
So you’re on my website because you want to create a website by yourself. You’re definitely on the right website. And it’s true that every beginner can create a website and save money at the expense of agencies. So let’s get to it.
Creating a website has 3 main steps:
- Find hosting provider and pick domain name
- Install building platform (I recommend WordPress)
- Actual creating and customizing
– Selecting template
– Adding pages
– Final customization
- Estimated costs (calculations)
- Selecting building platform (CMS)
- Tips for picking domain & hosting
You’ll make a website which is:
Protected & secured
Optimized for search engines (SEO)
Modern & trustworthy
Last updated on May 18, 2017
1. Getting prepared
Which is the best building platform for beginners? How to generate a catchy domain name? How to find a decent hosting provider?
You’ll get answers after reading my first step called “Getting Prepared”. So, follow my tutorial and you’ll get the know-how on how to make a website.
How much it actually costs?
In a nutshell, the ballpark figure for creating a website is around $100. If you compare it with few grand that agencies are cashing in for website creation, then it’s not so significant amount, equivalent to a pair of sneakers.
Domain registration for 1 year…………………..$10-12*
Simple hosting package for 1 year…………….$50-70*
Building platform (WordPress?)………………..Free
Website template (theme)…………………………Free
* Generally you’ll get a free domain name for the first year! Also it’s possible to buy 6 month or even 3 month hosting packages (depends on the provider)!
Creation is super easy thanks to templates!
Creating a website is getting easier and easier every year. One of the reasons for that is the opportunity to install templates aka themes on websites.
It means that professional web solutions and framework of the design are already developed and waiting for you. Just insert your own content and no more worries. Here are some examples of themes:
Also thanks to themes we can create websites without coding. I will continue talking about themes widely and openly after installing the building platform. Now, let’s move on and see which platform is the best for website building.
1.1 Select a building platform!
In the old days, website creation was literally coding (HTML, CSS) but nowadays, things have evolved and we can use capable and automated programs for building.
Website creation platforms are called content management systems (CMS). They make creating a website hundred, if not thousand, times easier.
Marketshare of content management systems
Others (including 90 CMS)
2017 statistics from: W3techs
Quick review – which platform is the best for beginners?
There isn’t a world’s best Content Management System, but in a sec, I’ll tell you which one is the most popular.
Every one of the main CMS has its own pros and cons. Every one of them has its own specialty. And they all – WordPress, Drupal and Joomla are totally free of charge! Of course, there are more CMS-s available, but this 3 crop all the market share and are the best ones.
Let me introduce you to the TOP3 CMS of website creation world…
Hardcore CMS for developers who enjoy coding. Creating a website is like playing with a puzzle. Drupal can do almost everything. Paradoxically their biggest pro is also their biggest con. In other words – Drupal is capable, but not the best choice for beginners.
Drupal has reached even to space. NASA’s website is created with Drupal
Plain CMS which has a very logical user interface. I think Joomla wins in the interface comparison. The biggest con is being in the middle of the spectrum. You don’t get the wow-effect while using Joomla. There’s a saying: if you try to be liked by everyone you will be liked by nobody!
Award for the most high profile Joomla website will go to Harvard University
The favorite of all the beginners and hosting providers. Also, WP is the most popular CMS. Maybe the biggest con will be the issue with low-profile plugins. They may get conflicted after updates. BIG thumbs up is simplicity – we can easily create a website – be it a blog, business website, online store and so on.
Check out 40+ most notable big brands that are using WordPress
April 2017 statistics from: Builtwith
1.2 Find hosting & domain name!
- We need hosting because it gives a website access to the World Wide Web. That’s why website URL starts with WWW.
If you buy web hosting you also get your new domain name, generally, they go hand in hand. Frankly, this is the only forced expense which you cannot skip if you want to create a website!
Foolproof rules for selecting a web hosting
– WordPress one-click installation availability!
– They should offer WordPress specific live-chat!
– Servers must be custom built for hosting WordPress websites!
– Free auto-made backups from provider!
It’s important to do a decent research before selecting a provider. Bad hosting choice may harm your website’s health (frequent disconnections, slow upload time, no auto-made backups)!
www.bluehost.com – one foolproof provider who satisfies above-mentioned rules. (I’ve mainly used their services and can vouch for them. They have a good quality-price ratio. Hosting starts at $2.95/mo.)
Tips to get a catchy and professional domain name
I suggest to pick a domain name which includes your keyword and is related with your business or service. For ex. carrental.com or flowers.com
If all favorable domain names are taken then do this: pick your favourite keyword and add one letter or letters to it. For ex. backlinko.com (”backlink” is a keyword and added letter is ”o”).
- Avoid long-tail keyword in domain name (for ex. www.howtocreateawebsite.com). That kind of low-value optimization was removed from Google algo almost 5 years ago
- Try to pick a domain name which is shorter than 12 characters
- Forget hyphens, accented characters, and complex letter combinations
- Make a “radio test” for your candidates. Domain name should be: easy to hear, spell and remember
- Make sure your preferred domain name has no trademark issues. Check your candidate in trademark247
- If your website is going to be international, then make sure that your domain name has no double meaning in foreign languages or slang. Check double meanings in urbandictionary
NB! Don’t forget that at the end of the day domain names are meant for real people (your target audience and market) not for search engines!
2. Sign up for provider!
For you guys, who love in-depth guides and want everything plain and simple, here’s my detailed hosting tutorial “Setting Up a Website with Bluehost”.
Other guys, who have selected different hosting provider, just continue reading my guide. Next step is signing up.
1) Go to your provider’s website and start the sign up process. Usually the right button (Let’s get started now; Sign up or smth) jumps into your face immediately.
- 2) Now you need to pick your hosting plan. I recommend to forget all exclusive offers and start with the most basic plan because we can easily create a technically good website with a simple hosting package.
Remember! You can always upgrade your plan but it’s reasonable to start with the cheapest plan because when your website is not getting a huge traffic from Google then you don’t need an advanced performance package.
3) Insert your domain name! Congratulations, if your favorite domain name idea is available and you didn’t spend all day to brainstorming!
- 4) Last important thing is the length of your plan. It’s all up to you but you should know that a longer period will save more money per month. Normally basic plan for 1 yr. costs 50-70 dollars.
Pro tip! Unselect all add-ons because you don’t really need them. If you really want to buy some extension then you should take only domain privacy (around $10 per year). With that add-on nobody can spy on you.
5) Fill in the forms with your personal information and finish the payment. After the purchase you get an email from your provider with your personal cPanel credentials.
- 6) In order to install the platform or create email accounts you have to login to your web hosting cPanel (provider’s website). The control panel of your web-server is where all important settings are located.
NB! I bet you found a lot of passwords in provider’s email, like FTP information or even database name and password. Don’t get confused, the two things you’ll need are: hosting username and password. With these two you’ll get access to cPanel.
2.1 Install the WordPress!
I remind you that WordPress is a content management sytem (CMS) that makes website creation possible, in other words, we’re creating a website with WordPress. It’s free of charge for everybody.
Basically, you just have to generate your admin username and password – that’s it. In the old-days, installing WordPress was much more complicated but nowadays we can do it with just a few clicks.
If your provider is offering WordPress one-click installation then I’m sure you can see it in cPanel/dashboard
…is access URL for logging to WordPress!
Your hosting provider doesn’t offer WordPress one-click installation? Or there are some other technical issues and you’re stuck? No problem, here’s the solution – install WordPress manually!
First important WordPress settings:
Choose your local and correct: Time Zone; Time Format; Date Format!
Settings ➜ General
Insert correct title and tagline. Search engines want to know what your site is about!
Settings ➜ General ➜ Site Title/Tagline
Make sure that your Search Engine Visibilty is checked! No point to show your site if there’s no content (bad for domain authority).
Settings ➜ Reading ➜ Search Engine Visibility ➜ ✓
Another way to be unvisible while your website isn’t finished yet!
Settings ➜ General ➜ MOJO Coming Soon
2.2 Select a template!
Make a few clicks and BOOOM…. your website is about 50% completed. You just need to add your content and do a little customization. Can it be easier?
The market for WordPress themes is huge… it means we have options. We can use totally free themes, semi-free themes (not fully unlocked, but still useful) and expensive premium themes (cost is around $60).
My tutorial focuses on free themes, so I’m gonna show you how to make a website without expensive theme – so you don’t need to buy a theme.
Some decent free themes
For your knowledge, WordPress offers 15 integrated free themes and over +5000 semi-free themes.
But before you start discovering themes, check these two below. These are the best and most popular semi-free themes. We can perfectly use them without unlocking the premium version – in other words – we can use them without paying for them.
Both of them are responsive (mobile-friendly), SEO-friendly and offer flexibility. Yes, I recommend them for You.
- Modern choice for business sites
Active installs: +100 000
- Full width slider
- +600 Google Fonts
- Built-in construction blocks
- One page navigation
- Multi-purpose theme
Active installs: +20 000
- Totally unique customization panel
- Flexible for all type of websites
- +600 Google Fonts
How to install themes to your website?
1. Find “Themes” in menu!
Move in WordPress menu: Appearance ➜ Themes ➜ Add New Theme
2. Pick a theme and install it!
Just select the theme you like! Also you can check preview and read about details. For installing just hit: Install ➜ Activate
3. Activate required plugins (if needed)!
Some themes may need additional plugins in order to function normally. If you selected theme called “Sydney” then you need to install “Page Builder by SiteOrigin” and “Sydney Toolbox” plugins. Install them – they’re free of charge.
Just click on Begin installing plugins in the alert box! After installation (it takes a few seconds) check your website.
Best marketplace to find premium themes
Go to www.themeforest.net and click on the then find a filter called Sort by: Best Sellers. There you can find a multifunctional and popular themes for creating a WordPress website.
Almost all premium themes are offering theme variations. It means that if you buy, for example, ”X theme”, you’ll get 24 different variations of that theme. Also you can screen theme demos, to know for sure, how these themes will look on live websites.
In case you bough a premium theme from Themeforest – don’t forget to use my step-by-step guide: how to import a theme from Themeforest
3. Creating pages
- If you want to add any content (text, gallery, contact form et cetera), then you’ll need a page. Pages are the foundation of your website. Just as artist needs a paper, web developer needs it too.
Also, you need pages to create a menu because you can’t create a menu without pages (except one page navigation – mostly used for landing sites).
Creating pages for your website
Pages ➜ Add New ➜ Title: “Home page”➜ Publish
Please create 5 sample pages now, because after the next topic I’ll show you how to create a navigation menu. In order to create a menu we need pages, like I said. Don’t worry about the name of the page, you can always change it.
If you have no idea what pages to create then create common pages like:
Home; Services; Portfolio; Blog; Contact Us
Choose page template (with or without sidebar)
- More capable themes (even “Sydney” which is free) offer us to select page templates. If you are also creating a website with theme called Sydney then you can select between 3 templates. Most important templates are:
Default Template – page with sidebar
Full width – page without sidebar
3 different options to build pages
I bet you want to know how to build pages, add colorful design elements, buttons, widgets, sliders, contact forms and so on. WordPress offers naturally 2 outputs (visual and text) for building.
Additionally, to the aforementioned outputs, we can use drag-and-drop builders. Builders come along with a theme and they are basically just plugins which will provide us with a simple output where we can use drag-and-drop building elements.
I recommend to use a builder while creating a website because its easy as playing with Lego’s – just put bricks together.
You’ll see everything just as in Office Word. Maybe only some bloggers are using visual output for building.
Everything will be converted into HTML language and you can add shortcode snippets if needed. For your knowledge, many plugins give us just the shortcode and you have to place it in the right place, but don’t worry, no coding for you – it’s just an option.
Your new bestie. With integrated builders we can make pages in a drag-and-drop style. Basically the whole building is through builder.
Very important to know!
If you start creating pages with a page builder then you can’t edit these pages anymore in Visual or Text output. Builders have their own integrated content editor!
For example: if you want to paste a shortcode then you’ll need to do that in builder’s own Text output. Otherwise, you will brake the code and have to delete that page or restore your website from a previous backup!
Setting up your front page
Select which page you want to display as front page:
Settings ➜ Reading ➜ Tick on: “A static page” ➜ Select page ➜ Save Changes
Tips for managing pages
3.1 Adding media files
- All your media files (PNG, JPG, GIF, PDF, DOC et cetera), will be stored in Media. Remember that if you add files to Media it will be automatically public for everyone.
Your web-server will not be like a cloud, where you can store all kinds of stuff without it being public! So, always delete unnecessary files from Media.
NB! Don’t store big-size videos in WordPress! Create a YouTube channel and play videos on your website via embed code or simple YouTube link. Otherwise, videos slow down your website and it’s bad for page speed and ranking.
Adding media files (JPG, GIF, PDF) directly to page
You can also add media files directly to page which is a much faster way. Just find Add Media button in content editor while you are editing pages. All your files will be stored in Media as usual:
What is the recommended file size?
The smaller the better, but also important is the image quality. Don’t ruin your main (hero) image quality by compressing too much.
In my opinion, we can maintain high image quality with size around 0,2MB (200KB). Illustrative images and buttons should be even smaller, for example ~50KB.
Editing pictures in WordPress
You can also edit pictures in WordPress. WordPress photo editor is quite simple and plain tool but all the basic attributes are there.
To edit pictures in WordPress follow this:
Media ➜ Choose file ➜ Edit Image
To be honest, I really don’t use WordPress for image editing. I suggest free photo editing software called GIMP if you don’t have Photoshop or something similar.
Tips for managing your media files
3.2 Creating menu
If you don’t have an idea how your menu navigation should appear, then for training purposes, try to create the menu I’m showing you below.
I created ordinary menu pages: Home, Services, Portfolio, Blog, Contact Us. I will then use these pages and create a simple website menu.
Step-by-step guide how to create a menu
Step 1 – Move in WordPress:
Appearance ➜ Menus ➜ “Give a name!” ➜ Create Menu
Step 2 – Checkmark pages to menu from the column on the left and click on Add to Menu button (no. 1-2). Also checkmark Primary Menu for display location (no. 3)!
Step 3 – Drag and drop items and set your preferred order to pages!
Visitors are used to seeing Home page on the top of the left side (first place) and Contact page on the top of the right side (last place)
Final step – Edit labels if it’s needed. Menu labels must be short and clean. If it’s done then Save it and visit your site!
Here’s more detailed guide how to create a menu in WordPress
Tips for website menu
3.3 Final customization
The customizer is a cool and beginner-friendly tool for building and customizing your site, before you publish it. You can navigate to different pages on your site within the preview.
For adding a logo or changing fonts, colors, background image, widgets and many other cool stuff on your page you, select:
Appearance ➜ Customize or just Visit Site ➜ Customize
Every theme has its own functions and widgets. Right now I’m using quite a powerful semi-free theme called Sydney. Unfortunately, its not 100% unlocked but still, Sydney offers quite a many options and we can create a good-looking and professional website with it.
- Firstly, to see live sidebar editing: open a page which includes a sidebar. You can turn ON/OFF sidebar by selecting page template (select: Default template in Page Attributes).
Secondly, go to: Appearance➜ Customize ➜ Widgets ➜ Sidebar and start editing
On the left-side is your list of widgets which are currently planted in your sidebar. Use drag-and-drop technique to set order.
For improving your sidebar with new and cool widgets click on Add a Widget button. Pick it from the list on the right-side and add it!
Don’t forget to adjust/check settings of each widget and lastly, when your sidebar is finished, click on Save & Publish.
Add your site title, logo and favicon
Where do get a logo? You can design it by yourself or pay some guy who can handle Adobe Illustrator.
- Anyway, human eye is used to start reading from the top left corner and detects logo as a quality symbol. So, don’t forget to add a professional logo!
1. Add site title + tagline
Search engines are indexing every word on your website. Tell them more about your website. 2. Upload your logo
I recommend to use PNG format which allows to create an image without background. 3. Upload site icon a.k.a favicon
This is the small icon on the internet browser. You can crop favicon from your logo.
If you can’t find anyone who can design a decent logo, then try this out: Designmantic logo generator. It may be the fastest way to get a logo.
Plugins – extensions that will help to create a website
- Next important thing to master is plugins. Creating a website is remarkably easy because we can download and use applications a.k.a. plugins.
As apps improve smartphones, plugins do the same with websites. For example, if you want to create an online store then just download and install “WooCommerce” plugin.
I’m not exaggerating if I tell you that there are plugins for almost every web solution. WordPress.org states that nearly 50 000 plugins are available, at the moment, and overall download count of plugins is 1.4 billion (BILLION!).
Can we download plugins free of charge?
Yes and no, it depends on the developer. Usually, they are using a strategy in which the basic version is free and pro version costs.
So at the moment, we can get the most important plugins for free! But it seems that basic versions are getting more and more basic and limited every year.
My experience is that sometimes is way more reasonable to pay 10-20 dollars for some premium plugin instead of spending all day struggling with a free version.
How to install WordPress plugins
1. Login to WordPress
2. Select Plugins ➜ Add new
3. Insert “Contact Form 7” to search bar (Its the most popular plugin for creating forms. You may need it)
4. Click on Install now and Activate it
5. Label (“CF7”) of the new plugin will appear on the main menu in WordPress
7 must have plugins while creating a website
Here’s a list of useful and free of charge plugins that you may need:
1. TinyMCE Advanced
By: Andrew Ozz; Active installs: 2+ million installs
Gives you a much better and wider options for content editing
2. Contact Form 7
By: Takayuki Miyoshi; Active installs: 3+ million
Build any kind of forms and place it as a shortcode wherever you want
3. Yoast SEO
By: Team Yoast; Active installs: 3+ million
Insert custom Google snippets into the search engine results page (SERP)
4. Shareaholic share buttons
By: Shareaholic; Active installs: 100 000+
Be modern and add socialmedia buttons on your website
5. W3 Total Cache
By: Frederick Townes; Active installs: 1+ million
Increase your website upload speed to get better position on SERP
By: Snap Creek; Active installs: 900 000+
Create website backups after every important change
7. Google Analytics by MonsterInsights
By: MonsterInsights; Active installs: 1+ million installs
Connect your site with Google Analytics and you’ll see how many visitors your site has
Congratulations, you’re not a beginner anymore!
I hope you learned how to create a website and you made it! If this guide was useful and you would like to thank me – share it! I don’t expect nothing more.
Buona fortuna! 🙂