HOW TO MAKE A WEBSITE

Step-by-Step ABC Guide

  • No coding – we use WordPress
  • New practical skill for the future
  • Expert opinions from developer
Image
This guide has helped to launch 2000+ websites so far

Donald Christensen

    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

Getting prepared (calculations)1

Step 1

  • Estimated costs (calculations)
  • Selecting building platform (CMS)
  • Tips for picking domain & hosting

Setting up website (domain+hosting)1

Step 2

  • Sign up for your hosting provider
  • WordPress one-click installation
  • Selecting & installing (free) theme

Building & customization (wordpress)1

Step 3

  • Creating and building main pages
  • Adding content (images and text)
  • Customization tips & plugins

You’ll make a website which is:


Protected & secured


Optimized for search engines (SEO)

responsive layout


Modern & trustworthy


Mobile-friendly (responsive)

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:


  • Sydney theme
  • Optimizer

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


WordPress
58%
Joomla
7%
Drupal
5%
Others (including 90 CMS)
30%

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…


    Drupal

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.

  • Live websites: 741 000+
  • Applications (“Modules”): 37 000+
  • Templates: 2400+

Drupal has reached even to space. NASA’s website is created with Drupal


    Joomla

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!

  • Live websites: 2 196 000+
  • Applications (“Extensions”): 7800+
  • Templates: 4000+

Award for the most high profile Joomla website will go to Harvard University


    WordPress (recommended)

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.

  • Live websites: 18 680 000+
  • Applications (“Plugins”): 49 000+
  • Templates: 15 000+

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.
  • web hosting

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!




In order to move on with “STEP TWO”, you’ll need:


  Available domain name

  Decent hosting provider

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.


  • Step 1 – Select hosting package

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.
  • Select hosting plan

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.


  • Step 2 – Insert your domain name

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.
  • insert your domain name

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.


  • Step 3 – Welcome to the World Wide Web (online)

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.
  • welcome to WWW

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.


  • #1 – Find WordPress icon in cPanel

If your provider is offering WordPress one-click installation then I’m sure you can see it in cPanel/dashboard

WordPress 1 click install


  • #2 – Generate WP username and password

      1) Give a name/title for your site. 2) Insert your email. 3) Insert WP Admin username. 4) Insert WP Admin password

      Installing wordpress by one click

      Many providers try to aggressively sell you themes and other extensions after the installation.

      Remember, you don’t have to buy anything! It’s possible to create a website with a free theme.

      Anyway, congratulations, you have just created your own first website! Now use your credentials to get access to WordPress.

      Log in to wordpress2

        • #3 – Avoid spammy offers and complete installation

        www.yourdomain.com/wp-admin 

        …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:


        • 1. Insert local date and time settings

        Choose your local and correct: Time Zone; Time Format; Date Format!
        SettingsGeneral

        • 2. Insert your site title + tagline

        Insert correct title and tagline. Search engines want to know what your site is about!
        SettingsGeneralSite Title/Tagline

        • 3. Turn ON/OFF search engine visibility

        Make sure that your Search Engine Visibilty is checked! No point to show your site if there’s no content (bad for domain authority).
        SettingsReadingSearch Engine Visibility ➜ ✓

        • 4. Turn ON/OFF Mojo coming-soon page (Bluehost setting)

        Another way to be unvisible while your website isn’t finished yet!
        SettingsGeneralMOJO 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.

        • 1. Sydney
        • Modern choice for business sites
          Active installs: +100 000

          • Full width slider
          • +600 Google Fonts
          • Built-in construction blocks
          • One page navigation

           
          More info

        • sydney

        • 2. Optimizer
        • Multi-purpose theme
          Active installs: +20 000

          • Totally unique customization panel
          • Flexible for all type of websites
          • +600 Google Fonts

           
          More info

        • Optimizer

        How to install themes to your website?


        1. Find “Themes” in menu!

        Move in WordPress menu: Appearance ➜ Themes ➜ Add New Theme

        How to add new theme in wordpress


        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

        How to select a wordpress theme


        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.

        required plugins for sydney theme

        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




        In order to move on with “STEP THREE”, you’ll need…


        Successfully installed CMS WordPress

         WordPress admin credentials to log in

        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).

        • How to add pages in wordpress

        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.

        How to create new page in wordpress

        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

        • Selecting page template in wordpress

        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.

        How to build pages in wordpress

        • #1 – Visual

        You’ll see everything just as in Office Word. Maybe only some bloggers are using visual output for building.

        • #2 – Text

        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.

        • #3 – Page Builder

        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

        How to determine your front page


        Tips for managing pages


        • Every page on your website should include at least 300 words – easier to rank with longer content.

        • Free plugin called “TinyMCE Advanced” gives you a much better content editor.

        • Use builders like Siteorigin (totally free) for building 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.

        • Adding 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:

        How to add media on page


        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.

        Here’s a free tool for compressingOnline tool for compressing pics


        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

        How to crop images in wordpress

        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


        • Don’t forget to give images correct titles in your computer before uploading them to WordPress. Image file name and image title in WordPress should be the same!

        • Always delete unnecessary images from WordPress. None of your uploaded images in Media are anonymous.

        • Repeat your image title in Alt text form. This move will give Google more information about what’s on the picture!

        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)!

        How to create a menu in wordpress23

            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)

        How to create a menu in wordpress32

            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

        WordPress website menu


        Tips for website menu


        • Don’t use more than 7 pages in menu – visitors can’t grasp all the information. If you show less they see and grasp more. Good tactics is to show around 5 (+-2) pages in menu!

        • The simpler your menu structure the better. Multi-level and branching menus are so 90’s.

        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

        How to customize your website2


        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.


        Editing sidebar


        • 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!

        • How to edit sidebar

        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.
        • How to add logo and favicon in wordpress

        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.

        • WordPress plugins

        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

         6. Duplicator
        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! 🙂
        Don.




        How to make a website which truly sells…

        Continue with your self development and learn more about details and (content) marketing