The foundation to create a professional website, blog, online store or marketplace.

Free 5 Steps Website Setup Tutorial

In this tutorial I’m going to show you how you can create websites fast, low cost but fully professional.

You are not relying on expensive or crappy website builders (it’s always one or even both).
You are not restricted by their limitations. You are using an open system with many free and paid extensions and the biggest community of all similar systems. You are using the top notch solution to make your website.

This tutorial gives you all the tools needed to make your next online business a huge success.
In the following chapters I show you exactly how to setup your own website for ready to roll.

This tutorial is for you if

  • You are just about to start your own business.
  • You don’t have a clue about how to make a professional website.
  • You don’t want to pay 1000’s of dollars to expensive agencies to make a website for you.
  • You don’t want to struggle with low cost freelancers.
  • You don’t want to rely on expensive website builders.
  • You want freedom.
  • You want professional results.
  • You want them as fast and as low cost as possible.

This tutorial contains

  • The main reasons WHY it’s so important to have a professional website nowadays.
  • Insights on how people determine a company’s or person’s value solely based on their website.
  • Hints about several web hosting options and best choices.
  • A step by step tutorial on how to set up your professional website right from the beginning.
  • Pro tips on handling WordPress as your system of choice.

About me

I’m Arian and during the past years everything revolved around professional websites. I needed outstanding websites for my own projects and I made top notch websites for my clients.

Nowadays websites are great tools to get your ideas and projects out there. You need one even if you don’t want to market your project online. A website is mandatory for nearly every businesses. Websites convey trustworthiness and expertise.

For other projects a website is the actual product which is offered as a service to clients. Think about Amazon. Amazon without a website? Would not be Amazon as we know it.
Online Marketplaces, Ecommerce Shops and other web based services all operate around their websites. Also think about Facebook, Twitter, Soundcloud, Dropbox, Evernote, Pinterest and Instagram. And these are only the biggest of businesses that grow around their websites. There are hundreds of thousands more.

For me this meant that learning the skills to create at least simple websites is a big benefit for all my future projects and businesses. Therefore I started my first project all on my own and acquired my skills on the go. However the process was not easy, the sources of knowledge distributed and I had no expert to directly answer my numerous questions.

This tutorial is an expression of thanks to all my friends and like-minded entrepreneurs who supported me on my path. And it’s an appreciation for your effort to create something of value in this world too.

Alright, let’s get started!

(Or download the complete tutorial as PDF)

Let’s Start With WHY!

Why should you care about your website’s design, you might ask? Well, that would have been a great question in 1997, when simply having a website was enough – you were already ahead of the game with that. However, it’s now 2016, and everyone and their dog – literally, probably – has a website of their own, and things are a little bit more advanced now in the website world. You’re going to need a lot more than just plain white text on a black background to stand out from the crowd and achieve success with your site.

There are all kinds of reasons why you should care about your website’s design. Some of the reasons are obvious, of course, and some are a bit more surprising, but all of them are important. Now, before reading all of the reasons below, keep in mind that you don’t have to be a superstar to create a well-designed website. If you’re serious, however, there are advanced web design tutorials out there that are definitely worth the investment and can help give you the edge in the market.

The Pizza Story

With that said let’s start with a prime example of how websites determine our feelings on the websites owner (whether it’s a company or a person).

Imagine you want to take out your hot flame for dinner. You don’t want to go to your usual restaurant this time, you want something new. Luckily pizza is always a good fit for you both, so you decide to look up a new pizza restaurant. Without hesitation you grab you iPhone, open Google and type “Pizza Restaurant MyCity”.
Kabow! Google reveals restaurant after restaurant.
You look at the first top 10 and then you know which one you will be going to.

What happened?
While you looked at these 10 restraurants you unconciously evaluated them solely based on their website. You don’t even know which has the nicest staff and offers the best pizzas. You just crowned one restaurant winner and 9 others loser, without even visiting them.
One will earn good money from your visit and may even make you a loyal customer who spends all hard earned cash the next years at their place.

This happens all the time on the internet.

In 2016 people are evaluating businesses and people based on their web presence more than ever.

So you surely do well to put your nicest suit on your website and add your best pair of shoes.

The Car Dealer Comparison

Another comparison that shows you the power of websites (in a drastic way)

Let’s say you saved some money and want to buy a car now.

Which dealer will you choose?

Ling WebsitesJaguar Webseite

Ok, maybe you want to be fancy here and pick the left one. But let me tell you this: 99% will choose the right one solely based on both websites’ look and feel.

Websites convey quality, trust, likability and a lot more values.
Even more we decide in the matter of seconds if we like a website or not.

Be sure to stay on top with your websites!

Some General Information Before We Go Into Tech Detail

A website consists of a couple of aspects. Let’s discover them right now.

AESTHETIC APPEAL

First of all, of course, you need your website to look good. An aesthetically-appealing website can be the difference between someone getting to your site and leaving, or actually reading the content, sticking around for a while, and ideally making some purchases of whatever product or service that you’re selling with the website.

Aesthetic appeal of a website is a lot more than just shiny colors and fancy logos, though. You really need to make sure it’s usable above all else. If you’re sacrificing usability for the sake of appearance, you’re doing it wrong. Those two things need to work closely together and be friends rather than enemies.

You can also use your website’s appearance and aesthetics to trick your readers as well. Spaces, fonts, and images can be used to draw peoples’ eyes where you want them to go, and to get them to click on what you want them to click on. A good-looking website looks way more professional and will give you a lot of legitimacy right off the bat, creating some trust with your visitors, and causing them to take action. Remember, though, that sometimes, less is more. Simplicity is not a bad thing.

ORGANIZATION

Another important aspect of your website’s design is its organization. You can have all the information in the world, and the best product or service out there, but if your website is a mess, not only will people not be able to find what they need, you’re going to scare people away right off the start. Think of it as if you ran a restaurant. If someone walks in and the place is a mess, with dishes everywhere, staff not where they’re supposed to be, and a general sense of panic happening, those customers are going to leave and go elsewhere.

There are a few key things to keep in place when it comes to your website’s organization. You need your site’s navigation pane or menu to be in a consistent place where it can be found on every page. You need to emphasize your key content, and minimize your secondary content, again, on every page. Everything on each page needs to have a purpose and not just be thrown out there for the sake of it. Keep things organized and you’ll end up with a much more successful website.

BRAND CONSISTENCY

A big part of your brand’s professionalism is its consistency. This extends directly to your website. If your business was a bricks and mortar store before the internet age, your website would be the front door to your business. It’s the first point of access for most people, and you want it to reflect your brand in a way that makes you look good.

When it comes to your website’s design and your brand’s consistency, first of all, make sure that your logo is used consistently throughout your website. Get high-quality versions of your logo and use them in the same places, and with the same style throughout your site. Use your logo’s colors consistently, as well. You want people to associate everything on your website with your logo and your branding, so do it right.

SEO AND READING PATTERNS

In the English language, as you know (we think), the normal reading pattern is from left to right, and top to bottom. When designing your website, you can keep this in mind, so that your readers get the most important information first, where their eye is most likely to take them on your page.

It’s more than just your readers, however. You need to trick search engines into finding your website, as well. Search Engine Optimization, or SEO, is well known now, but there are techniques that you can use in order to make sure your SEO is more effective than your competitors. Search engines such as Google will read your website a lot like a human will, so you can get attention for the keywords that are most important to your business by putting them in the right places on your website.

CONTENT

When talking about web design, people often forget what can in many cases be the most important component: your website’s content. Make sure that you take a great deal of care in writing the best content, or hiring the best copywriter in order to do so. The content of your site is communicating your brand position and promise, so take care of it. Pick the voice, tone, and message to ensure that your website is memorable to your readers. Your brand is important to your success, after all, so make sure your content is great.

Ok, let’s dig into the tech now and launch your website as fast as possible!

1. Choose Your System

Creating a website free of cost is not easy… if you do it the traditional way. Gladly there are other options out there (e.g. this tutorial), to make it a walk in the park. You just have to know and use them. Back in the days websites were written with HTML and CSS from scratch. As you can imagine these were time consuming tasks and people started to save their foundations (“templates”) to reduce their time needed for building multiple websites. Out of these templates emerged whole management systems, called CMS “Content Management Systems”. So no matter if you want to create a blog, create a business website or a website from scratch for your private passion, you will always be the fastest and have the most professional results in a reasonable amount of time if you choose a content management system. To save you the time of going through the different CMS providers I will write a brief overview. Following list contains the 4 major players.

  • Drupal: A good solution for your website. However I found its usability lackluster compared to other options.
  • Joomla: Has some success in Europe but overall only a small market share.
  • Typo3: Outdated with the worst usability of all. I heard Typo3 developers complain about working with Typo3.
  • WordPress: The most used CMS worldwide. Period. Best usability I found. My system of choice for my own and my clients’ websites.

This is also backed up by statistical data (the graphic below). Of course you can choose whatever system you like. In this tutorial and in my blog posts I’ll always use WordPress as reference system.
Content Management Systems Statistic

2. Choose The Right Host

In this section I’ll describe why it’s crucial for your website’s success to choose the right hosting company. You can either get your very own server (high performance solution) or buy a shared server (far less expensive). I recommend buying a shared server to start. It’s more than enough. Typically hosting providers have their shared server offers in categories called “Webhosting”. Regarding performance… Have you ever clicked a site away because you were waiting several seconds? I do this pretty regularly when I only want to skim articles which might be interesting. And millions of other readers do the same. I don’t even want to think of how many sites are clicked away right at the moment. Just because they were too slow (or utterly ugly). SSD Webhosting vs traditional HDD Webhosting SSDs – Solid State Drives operate much faster than traditional HDDs – Hard Disc Drives. I measure high speed differences when measuring my own websites which are partly on HDDs and partly on SSDs. The bigger and more complex the project, the more you should select a SSD Host for your website. In terms of pricing they are about 100% more expensive than traditional hosts. But if you work a lot on your sites you will get your money’s worth pretty quickly. If you want it fast, you want SSD servers. Here are some recommendations! Here is a list of offers I recommend. If your target audience is not located in the U.S. you might want to use hosts from your target audience’s location. If the server is too far from your target audience, their loading time increases. Choose a host located near your target audience. For my preferred U.S. located host list download the complete tutorial. IMPORTANT RULE OF DUMB: Always choose a shared hosting offer and stay away from dedicated WordPress hosting offers. They are often very limited.

3. Install Your System

You have two options to install WordPress on your server: the easy way and the traditional way. Let’s go through the easy way first.

Installing WordPress the easy way

Many hosts provide an easy way to install WordPress. Inside your host’s admin menu search for a link called “Apps Installer“, “Common Applications” or similar. You will be provided with a selection of tools. As WordPress is the most used content management system it’s nearly always included (in fact it was always included for me).

CPANEL
Now you just need to follow the onscreen instructions.
Select the directory you want your WordPress installed into. If you want your site to be reachable like yoursite.com then leave the field blank. If you want it to be reached like yoursite.com/wordpress (or some other term past the slash) then use “wordpress” as your directory.

You are now ready to go.

Installing WordPress the traditional way

Installing WordPress traditionally takes a bit longer but is still not complicated.
Your first step is to install a database for your WordPress system. Click on MySQL Databases (or similar) inside your host’s admin menu. CPanel is a prominent admin menu used by many website hosts.

Installing WordPress
Create a new database and write down the name, your username, your password and hostname. Your hostname is also provided by your host. Sometimes it’s localhost but not always. Ask your web host if you are not sure!
You are now searching for your FTP access to your web server. If you haven’t received an email with your FTP credentials, go to your host’s admin menu and search for “FTP Accounts” or similar.

Setting Up FTP Access

Once you are in your FTP menu progress to creating your FTP account and access. After you set it up, you can continue to download your FTP client of choice. I prefer to use WinSCP. WinSCP is a free tool to access your server space through FTP, SFTP and SCP. If you have the chance use SFTP or SCP, as these methods are far more secure than FTP. But FTP will do too.
Download the newest WordPress version from wordpress.org. Extract the archive on your computer and create a copy of the file wp-config-sample.php and name it wp-config.php. Open the file with a text-editor (I prefer notepad++) and include your database name, username and password. Refer to https://codex.wordpress.org/Editing_wp-config.php if you are not sure how to edit the file correctly.

If you want your website to be accessed like http://www.yoursite.com/wordpress/ then create a folder called “wordpress” inside your website’s root folder and upload your files into this folder.
Now you can run the WordPress installation script. Access the Setup URL in your internet browser like http://www.yoursite.com or http://www.yoursite.com/wordpress/.
Follow the instructions on screen.

Congratulations, you have set up your first WordPress installation!
Optional Pro Tip: If you want to get the most out of your WordPress installation include following two lines before the line define(‘WP_DEBUG’, false); inside your wp-config.php.

define( 'WP_MEMORY_LIMIT', '256M' );
define( 'WP_MAX_MEMORY_LIMIT', '256M' );

Save the file. The 256M represent your web host’s PHP Memory setting. This is specific to your server. Google it or look it up in your web host’s admin menu to receive the accurate value – or even better: ask your webhost support (this is important!).

Optional Pro Tip: Create a child theme. This will make your life so much easier if you are designing your site and using advanced techniques which I’ll teach you on the fly soon.

This is why:
When you download a theme for WordPress and install it on your server, you will have a file called style.css. To customize every inch of your theme you will have to edit this file. No problem with that. But when you update your theme you will also need to update the theme’s style.css (well you don’t need to, but you won’t get the file’s specific updates otherwise). Now if you don’t copy and paste your customization entries, all will be lost. And believe me, this happens faster than you think.
Additionally your theme’s style.css most likely has lots of entries inside. It’s much easier to have your own style.css. Plus you will have a great overview on your changes which saves you even more time. Side note: Style.css is just one of many files you can store in your child theme and therefore make update safe. Most themes even got specific template files which you can store in your child theme to make them update safe.

This is how:
Creating a child theme is done in a couple of minutes. Some themes even contain a child theme folder within their download package. If not you can create it with these steps:
1) Create a folder and call it whatever you want (“mytheme”).
2) Create a text file inside your new child theme folder and name it style.css.

The file should contain following information:

/*
Theme Name: My Child Theme
Theme URI: https://arket.io
Description: Twenty Fifteen Child Theme
Author: John Doe
Author URI: https://arket.io
Template: twentyfifteen
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, beautiful-sidebar, topnotch-layout, accessibility-ready
Text Domain: twenty-fifteen-child
*/

However the only important information is your Themes Name and the Template line. Fill in your own data there. Next you want to import your parent theme’s styles. You can do this with the @import command like:

@import url("../parenttheme/style.css");

Just put the @import in the line after “*/” – this will do. If you want to do this step the perfect WordPress way you can instead create another text file and call it functions.php. Inside this file add the following code:

<?php // Opening PHP tag
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
?> // closing PHP tag

However the @import method is still pretty common. Additionally you can also include a file called screenshot.png. This screenshot will be shown as you theme’s logo. The recommend screenshot size is 880×660 px.

4. Use Your System

Now it’s time to learn WordPress. One big benefit of content management systems like WordPress are templates called “Themes”. Themes give you a great foundation to build your website on, as they provide pre made designs to a certain degree. There are themes which have nearly every pixel pre designed and there are themes which only take care of fundamentals like responsiveness (the ability of your website to align its contents for mobile devices and tablets). The more advanced you get the more freedom (which equals customization accessibility) you will want from your theme. You can find free WordPress themes here: https://wordpress.org/themes/ Premium (paid) Themes offer different extra functionality and are usually very well coded, tested and have great usability (for beginners). You can find premium WordPress themes here (sort them by sales to get approved quality): themeforest.net One more premium theme vendor I recommend is elegantthemes with their Divi theme: http://www.elegantthemes.com/ You can either install your theme by uploading the main theme folder called “ThemeName” through ftp into “…/wp-content/themes/”. Or simply install it in your WordPress Admin Menu (called “Backend”): “Appearance” -> “Themes” and upload your zip file. If this is your first website I strongly recommend you spend 50 bucks on a premium theme. It offers A LOT of value in return (a couple of thousands of bucks if you would develop it all by yourself). Most of the available premium themes also offer a simple drag and drop page builder. These tools enable you to make magnificent websites without coding knowledge (even though I recommend attending one of my web design courses to learn the most important coding sequences, so you can create even more outstanding websites! Just drop me a line if you are not sure how to continue to get better after this tutorial). To get my theme recommendations for beginner (themes I work with myself) download the full tutorial as pdf.

Understanding how WordPress works

Content management systems consist of two parts:
The Frontend (your website – what visitors see) and the Backend (the admin menu).
Wordpress shows your Pages and Posts and Archives in the frontend.
Pages are static sites which don’t change much. Like your “About” site.
Posts can be seen as your daily news bits. They are the core elements of your blog.
Archives are places where your posts are stored and accumulated. E.g. categories, taxonomies and tags are archive types.
So if you want to create a static website for your business, describing your services and products, you will only need pages. If you want to include a news ticker too, you will also include a blog with posts.

Create your website
First you will need some pages for your website. In your WordPress Backend navigate to “Pages” -> “Add new”.

Page Title: Give your page a title. This can be seen as your main headline for your page and important for search engines to know what your site is all about (I will go deeper into this another time).

Permalink: Select your permalink. This is the last part of your URL (www.mysite.com/permalink)

Text-Editor: The text-editor below contains the content of your site. Many premium themes offer an optional drag and drop page builder. These are great if you want to style your pages easily. You can drag and drop images, sliders and other elements onto your site.
If you finished your page click on “Publish” in the right upper box. Your page can now be reached on www.mysite.com/permalink.

Add a new page in WordPress
You can just create a couple of empty pages for now and fill them later. Commonly used pages are

  • “Home” page with Title “Your Service Description”
  • “Service or Product” page with Title “Your Service/Product Title”
  • “About us” page with Title “About us”
  • “Imprint” page with Title “Imprint”

If you don’t want the titles to appear as Menu Names (because they are too long) you can go back into the “Menus” Menu (Backend -> “Appearance”) and edit the displayed menu text there.

Of course you want to have a menu, so your visitors can navigate through your site without much hassle.
Go to “Appearance” -> “Menus” and create a new menu called “mainmenu”. From the left box select the “Pages” Tab and drag and drop all your important pages to the right box. Select this menu as “Primary Menu”. Click on “Save Menu” to your right.

Add a menu to your WordPress website

Finally set your front page (your “home” page) in your WordPress settings. Navigate to “Settings” -> “Reading” and select your desired home page as “Front page”. You don’t necessarily need to select a blog page.
Cheers! Your website is now set up and functional!

5. Design Your Website

Designing your website professionally is such a crucial part in making it stand out, convey quality and trust. Structure Do you know exactly how your website should look like? If not I recommend you start with drawing a mock up. Think about where you want your menu to be. Should it be on the top like on most modern websites? Or do you want it to be slightly different and have it on the left side of your screen? If you want to save paper and pen (yay! trees!) you can use online mock up tools like balsamiq (recommended!). Content Prepare your images and texts. Use placeholders like the prominent lorem ipsum (Generator Link | HTML Elements Generator Link) to get an idea how your site is going to look before you have your content ready. Colors There is a nifty trick if you have no idea which colors to choose: You can look at different popular websites. Google “beautiful website color schemes” or similar. Here are some examples: dtelepathy.com There are a couple of tools I use to choose and match my website colors. They can be found in the download version of this tutorial.
Fonts Good fonts for websites are fonts that are easy to read. Google has a great database of fonts which includes many great and often used web fonts. You can access them here: https://www.google.com/fonts. 1. Browse through the available fonts and select one or more by clicking “Add to Collection“ 2. In the tab that opens at the bottom click on “Use“ 3. Scroll down to point 3) and select @import in the tabs menu 4. Copy and paste the code into your style.css. To open your style.css through your WordPress backend go to “Appearance” -> “Design” and make sure the style.css is opened. After pasting the text from the Google font site you should have a line like this in your style.css:

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

To use this font called ‘Open Sans’ in all paragraphs on your website also add the following to your style.css

p{ font-family: 'Open Sans', sans-serif; }

Done! All your paragraphs are now written with the Open Sans font. The sans-serif is called a fallback font, in case Open Sans couldn’t be loaded. There are cool fonts sold on font marketplaces like dafont.com, fonts.com, or 1001freefonts.com. But be aware. Many so called free fonts are only free for personal use. As soon as your website is commercial you need to pay. Always check the licenses attached. If you need more information on fonts you can find them in this blog post on Website Fonts. I also highly recommend reading my advanced tutorial on WordPress CSS and HTML so you fully understand what you just did.

Extra Tip: Most Important WordPress Plugins

Of course you don’t want to leave your WordPress website naked as it is now.

One of WordPress’ strengths is its big ecosystem of plugins and extensions, that make your website really powerful.

Following three plugins are must have for each of my sites.

Wordfence

Wordfence WordPress Plugin

No matter if you use Wordfence or one of the many other options. You always want to make sure your website is secured from being hacked. Else you might wake up one morning and look at your completely destroyed website (or even worse).

Download Wordfence here.

Yoast SEO

Yoast SEO WordPress Plugin

Yoast SEO was the de-facto standard for onpage Search Engine Optimization (if you have never digged into that topic, don’t worry I have got you covered: An Introduction to SEO).

Then Yoast released its Version 3.0 which is a prime example of how not to evolve a plugin. 1-Star ratings were pouring in like rain and Yoast did good to revert back and care about a great user experience again.

With it’s current version I use Yoast SEO again and recommend it for everyone starting out too.

Why do you need it?

Beside a couple of sneaky SEO stuff options it’s your main choice for creating headlines (“title”) and descriptions for your pages, to tell Google exactly how you want your page to be listed:

Google Search Result

Download Yoast SEO here.

WP Spam Shield

WP Spam Shield WordPress Plugin

If your website gets popular you will also receive a lot of bot visits. Bots are software programs that automatically execute some tasks. Like writing you comments on your blog posts and include some links to their websites. WP Spam Shield is an easy option to prevent this, without sacrificing on your user experience.

Download WP Spam Shield here.

More Info

I focused on the important parts to keep this tutorial short and on point. You can find additional information to above chapters in my blog. Search for the respective blog topic for a bit of extra information. Blog Alright, that was it! Hope you enjoyed this tutorial and got all the info needed to start your first website! Remember that I included a couple of extras in the PDF version you can download right now for free.

Cheers,
Arian