Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

How to make a website from scratch: The Ultimate Guide

If you are planning to make your website it may seem overwhelming at first, especially if you are not familiar with coding.

But actually it is not that difficult these days.

In this free guide you will learn how to make a website from scratch step by step even if you don’t have any coding knowledge.

If you follow the steps outlined here I can promise you by the end of this guide you will have your first working website.

But if you do get stuck at any point just give me a nod here will be happy to help you out.

So are you ready for the ride? Let’s do this together…..

Contents

Chapter 1

Choose The Platform

Chapter 2

Domain And Hosting

Chapter 3

Build Your Website

OR

Don’t want all these hassle

Chapter 4

Website Builders

Chapter 1: Save your money and time by choosing the correct platform

Before getting started you need to choose the platform for your website.

You have two options

1Custom development

2Content management system (CMS)

1. Custom development: Custom development is where you have to use Html, Css and Php or any other server-side scripting language to build a website.

Pros:

  • You have no limitation in terms of design and feature only limited by your or developers skill.
  • You can use some frameworks like Bootstrap or Foundation to speed up the work flow.
  • There are some free and paid templates to get started.

Cons:

  • You have to learn html, css, php or any other server-side scripting language which can take months.
  • You need to learn entire web cycle including web security to keep your site safe from hackers which is not an easy thing to grasp at first place.
  • If you are looking to build a simple site with an admin backend it will generally cost you more time and money than a CMS platform would.

2. Content management system (CMS):  CMS or Content management system is a platform for managing your website and content without any coding like Html or Css.

Pros:

  • You don’t need to learn any coding to maintain your website.
  • Most of the CMS are FREE to use.
  • The content updating is very simple like copy paste work in MS Word.
  • Most CMS have some free themes but if you want you can use premium themes which comes with some additional features.
  • A simple website or blog would cost you far less money and time than a custom development.
  • Most CMS like for example WordPress has a huge community where you can get help for free.
  • In general a CMS platform is much more secure than a custom developed site.
  • Most CMS will have some additional plugins free and paid which will speed up the development process.

Cons:

  • Depending on the CMS platform you choose it may have some limitation in terms of design and features.

So it is advisable that you choose a CMS platform specially if you don’t have any development knowledge.

Which CMS is right for you?

When it comes to CMS’s you have a wide range of choices but based on recent stats there are three major players in this field

  • WordPress (48%)
  • Drupal (5%)
  • Joomla (3%)

WordPress:

As you can see Wordpress almost acquires half of the entire market share of the CMS and it is for a reason-

It is free:  WordPress is free, you can download and install it as many time as you wish it won’t  cost you anything, in addition you will get free updates from time to time which is very important from websites security perspective.

User friendly: WordPress is very user-friendly even a first time user can understand the workflow very quickly. It has a very intuitive backend where you can easily update your content even without any coding knowledge.

Highly customizable: WordPress is highly customizable and extremely flexible, almost any type of website can be built with wordpress.

Active community: One of the biggest reason why wordpress is so popular because of its huge active community which you may not get in any other CMS platform. There are many websites and forums where you can get answer to almost any question related to wordpress.

Suitable to almost all: From a small website to a large one wordpress is suitable for all, if you are wondering how big it can be then check these famous sites using wordpress.

Drupal:

It’s an open source platform like wordpress and is free too but its far more complex than wordpress and not suitable for beginners. Drupal  is generally more secure platform than wordpress and used by big companies for making complex websites to handling large traffic.

Drupal has its own themes and modules which can be used for making sites ranging from personal blogs to government sites. Drupal too has its own active community though it’s not as big as wordpress.

But since the framework is far too complex it’s not advisable for non technical users.

Joomla:

It’s not as complex as Drupal but not as simple as WordPress either. Joomla holds a major share of CMS market among top 1 million sites. Joomla too is an open source CMS and free to use.

Suitable for complex site: Joomla is suitable for making complex websites with complex navigation structure. For making community or membership based site you can choose joomla.

Making unique design: With joomla templates you can make each and every page of your site different, it’s an out of the box feature of joomla.

Multilingual: If you want your site to be available in multiple languages then joomla can do that for you by default. Where as in drupal and wordpress you need some additional modules or plugins to make them multilingual.

Support: Joomla too has a very active community where you can ask for any help.

But having said that joomla structure is still very complex for a new user, it will take some time to understand and properly use this platform.

For someone  just starting out and looking to make a simple website joomla and drupal are not for them.

So I highly recommend you to choose wordpress as your CMS platform because of what it offers with so much simplicity compared to other platforms.

But I will show you the installation and basic customization of joomla and drupal too so you can judge better which CMS is right for you.

Chapter 2: Give your website a name and a place with domain and hosting so everyone can recognize you

Now you have chosen your CMS platform whether it is wordpress, joomla, drupal or any other, you need to have a domain name and hosting server.

Domain name: Is the name or address of your website, this is the name people will know your website with (like: www.YourWebsite.com)

Web Hosting: Your hosting space is like your websites home in the internet where all the files are stored.

There are three types of hosting

1

Free Hosting: It sounds great that you can host your website for free, you can try wordpress.com, blogger.com or can search for free hosting on google you will get more options.

But in reality it’s not the best option if you are serious about your website, because the name you will get from these free hostings will in sub-domain like www.YourWebsite.wordpress.com which is not good for your branding.

Beside that most free hosting company will provide you few pre-designed templates at most with major limitations in design and features.

Most importantly you can’t have any backup of your site in case you want to shift to a another hosting provider.

So if you are planning to start with free hosting and then switch to paid later then it’s a bad investment in terms of time and effort for your website.

2

Shared Hosting: It is a type of hosting service where many websites are hosted in one server so a hosting company can distribute the overall cost of a server among many customers. Thus they can provide hosting service at an affordable price to an individual customer.

It is perfect for someone just starting a new website, it can cost you around $4-$12/month to get a good hosting service provider. It’s an investment you should make for your website.

3

Managed Hosting: In managed hosting you get a dedicated server on lease and the hosting provider looks after your website for speed, backups, security etc so you don’t have to worry about these.

Since the hosting company will managing your website on your behalf the costs are much higher than shared hosting. Generally managed hosting are available for CMS platforms like WordPress, Joomla, Drupal etc.

So I would suggest you to start with shared hosting and once your websites starts growing then you can look for managed hosting.

How do you get a domain name and hosting

I personally use SiteGround for domain & hosting. Here too at DesignTheWay.com I use their service and also recommend to my clients.

When I was searching for a hosting provider for DesignTheWay and found that SiteGround.com is recommended by wordpress itself (since my site is in wordpress), I thought they better be good to be recommended there and to be honest I’m not disappointed.

Here is my personal experience with SiteGround

  1. 100% uptime for my site
  2. Great customer support and prompt action
  3. Good technical support

What they offer is a reliable and high-speed hosting at an affordable price starting at $3.95/month(with 60% discount).

Click here to claim this SiteGround offer

They provide 1-click-installation for WordPress, Joomla and Drupal so you don’t have to get into any technical aspect of installation.

24/7 support to address any issue.

Most importantly they will activate your account instantly so you can start working  on your site immediately.

What type of domain name is good for you

The domain name you choose will be the identity of your website so you need to choose it carefully.

A simple rule of thumb is-

If you are making a personal website then choose something like www.YourName.com and

If you are making a business web site then choose it like www.YourBusinessName.com

There is a whole list of domain names extensions  you can choose from but you shouldn’t go too crazy about choosing one you better of sticking with .com, .net, .org because they are more recognizable to people.

Few more additional things to remember while choosing the name-

Keep it simple– Keep the name easy and simple to remember so a visitor can remember your domain name, try to avoid using “hyphen –” in the name because a visitor can easily forget to put the “” in the url.

Brandable– Try to use a name which you can use as a brand.

Now I’ll show you how to purchase a domain and hosting.

Disclosure: Some of the links here are referral/affiliate links that means if you decide to buy through those links I’ll earn a commission at no extra cost to you. This is how I keep Designtheway.com up and running.

Assuming that you have chosen SiteGround as your hosting service provider, let’s go to siteground.com and click on the SIGN UP button.

That will take you to pricing page where you have to choose a plan.

I personally advise to start with Start Up plan and as your site grows you can change the plan accordingly, however you can choose the plan which suites your requirement best and click on the ORDER NOW button.

Now you will be asked to choose your new domain name or if you already have a domain registered with other company you can transfer it for FREE.

Choose your domain name and click on PROCEED button.

It will take you to the order page where you have to fill in your personal information like name, email etc and payment details (credit or debit card).

Check your final order details and click on PAY NOW button. You will get a payment confirmation and hosting details on your registered email.

That’s it you have just booked your new domain and hosting.

Chapter 3: Build your website

Once you have your domain and hosting setup it’s time to build your website. As we have discussed earlier we will work on a CMS platform and show you how you can make your website.

I will show you three CMS platforms WordPress, Joomla and Drupal.

We have got lot to cover so let’s get started…..

Content management system (CMS)

WordPress

Best Choice For You

Joomla

For Complex Website

Drupal

For Large Website

WordPress

Make a website in WordPress

As I have said earlier wordpress is the ideal platform for a beginner to make his/her first website. I’ll show you everything needed to publish your first wordpress website.

So let’s do it…..

Install WordPress

I will be using SiteGround cPanel for these demo’s but you can use any other hosting company so interface may differ but look for the sections mentioned here and you will be good to go.

All good hosting company will provide you 1-click-installation option, if your hosting company doesn’t provide that then it’s time to switch your hosting because you might be working with a substandard company.

If you have signed up for the WordPress Hosting then on first login to your hosting account you will see a popup asking if you want wordpress pre-installed? select the option and click on PROCEED then follow the steps, you will have wordpress installed in your account.

But if you have signed up for normal hosting then follow the steps

  • Log in to your hosting account

  • Go to My Accounts tab and click on Go to cPanel

  • Look for WordPress Installer icon and click on it

  • It will take you to softaculous interface, click on Install there

  • If you want to install wordpress in the main domain leave the directory field blank but if you want it in any subfolder like “blog” just add the folder name there.

  • Don’t forget to copy the admin details as you will need that for your wordpress admin login (you can change the username and password if you want but keep the password strong)

  • Click on Install and you are done.

Manual installation

If your hosting company doesn’t provide 1-click-installation then you have to manually install wordpress.

Here are the steps to follow-

1

Download the latest version of wordpress from https://wordpress.org/download/

2

Unzip the folder on your local drive.

3

In the wordpress folder find the file named wp-config-sample.php and rename it to wp-config.php

4

Now open the wp-config.php file in an html editing software (Notepad ++,  Sublime text  etc) and do the following

  • define(‘DB_NAME’, ‘database_name_here’); – Your database name (ask your hosting provider for this)
  • define(‘DB_USER’, ‘username_here’); – Your hosting username (ask your hosting provider for this)
  • define(‘DB_PASSWORD’, ‘password_here’); – Your hosting password (ask your hosting provider for this)

Once the changes are done save the file.

5

Log in to your hosting ftp account using a ftp client, I use filezilla. Normally your ftp details will be like-  ftp.YourWebsite.com, username and password are the same that you have registered with your host.

6

Delete any file named “index” and then drag and drop all the file inside from your WordPress folder to your ftp server.

7

Once all the files are uploaded then go to the url: YourWebsite.com/wp-admin/install.php and you should see a page like this

Fill in the details and then click Install WordPress.

That’s it you are done!

Choose a theme to make your dream website

Now you have wordpress installed in your server it’s time make it look beautiful, you probably have a default wordpress theme installed like this

but you want it to look unique,  right?

Then let’s make it….

1

Go to your wordpress dashboard by typing  www.YourWebsite.com/wp-admin or YourWebsite.com/wp-admin

Replace “YourWebsite” with your domain name.

Login with your username and password that you provided at the time of wordpress installation.

2

Once logged in this is how your dashboard will look

3

Now in the dashboard go to Appearance > Themes and then click on “Add New“.

Here you can access thousands of themes for free. Go to the search bar and type a specific keywords to search themes.

Say you are looking to make a portfolio site

Type “portfolio” in the search bar and it will display themes suited for portfolio sites.

Hover on the theme you like and click on Details & Preview button to preview the theme, you will get a basic feel of that theme.

If you like what you see then click on the Install button on left top.

This will install the theme on your server once its installed then click on Activate.

Now the theme of your choice is activated.

Free themes are good and you should test them first but if you want more professional themes then you can buy from marketplaces like Theme Forest,  Elegant Themes where you will get 100’s of high quality premium themes.

The price of premium themes are generally not too high but they are loaded with features and theme support. So if you have the initial budget you can go for premium themes as it would save a lot of development time.

You can switch between themes freely it won’t delete your content.

Install a theme manually

If you have purchased a premium theme or downloaded a free theme from some other place than wordpress.org theme library then you have to manually install that theme.

To install a wordpress theme manually follow the steps

1

Go to Appearance > Themes and click on Add New.

2

It will take you to themes page then click on Upload Theme button at the top.

3

A new section will open then click on Browse button to choose your theme from local drive then click on Install Now button.

4

Once the theme is uploaded successfully you will see a success screen like this

Click on Activate and you’re done.

Pat yourself on the back. You have just manually installed a wordpress theme.

For premium themes you may have to authenticate your theme with some key to get theme updates and support.

Adding content to your site

Now you have your theme installed its time to add some content to your site. You can add content to a wordpress site through pages and post.

Creating pages

To create a page look for Pages at the sidebar of your dashboard then

  1. Pages > Add New
  2. It will take you to a new page where you need to add a title and content (including image and text).
  3. Once you are happy with your content then click on the Publish button.

Creating post

If you are looking to make a blog you need to create posts. Creating a post is similar to creating a page.

  1. Posts > Add New
  2. Just add a title and content then click Publish.

Add categories

While you create posts you can organize your posts by keeping them in different categories. Like for example all post related to wordpress you can keep them in wordpress category.

Now let’s see how to create a new category

  1. Posts > Categories
  2. It will take you categories page where you can create and edit categories.
  3. Go to Add New Category section, add a name and click on Add New Category button.
“Description” is an optional field while “Slug” will fill automatically according to your category name if left blank. Use “Parent Category” if you want to set a category as child of any existing category.

Assign a category to a post

You can assign a category to a post while creating or editing a post. Look for Categories section it will display all available categories, just check the categories you want to assign.

You can create a new category from this section too.

Once done then click on Publish or Update to save the changes.

Adding a featured image

A featured image in wordpress is an image that represents a post in a way that a viewer can get a brief idea of what the post is about.

Every post can have a featured image, to set a featured image while creating or editing a post look for Featured Image block on the right column.

Click on Set featured image and choose your image.

Editing content of your site

If you want to make changes to your content, you can do that very easily in wordpress. To edit a page or post in wordpress the steps are very similar

  1. Go to Pages > All Pages or Posts > All Posts for pages and posts respectively.
  2. Hover on to the item you want to edit and click on Edit.
  3. It will take you to edit page, edit the content and click on Update button.

Alternate option

A much simpler option is if you are logged in to your dashboard just go the page or post you want to edit from the front end and look for Edit Page or Edit Post respectively at the top of admin bar and click on it.

Creating and adding menu

Once you have created the pages or post categories you want to add important items to main menu so your visitor can access those pages easily.

Creating a menu in wordpress is very simple.

  1. Appearance > Menus
If a menu already exist and you want to create a new menu then click on “create a new menu” option
  1. Add a menu name and click on Create Menu button.

  1. Look at the left panel, you can add any items from there, say you want to add pages click on Pages it will display all pages. Check the pages you want to add and click on Add to Menu.
  2. You can drag and drop to rearrange the menu, in similar way you can create a submenu is well.

  1. Once you are happy with your menu choose the menu display location from Menu Settings then click on Save Menu.

More tweak and customization…..

Change your site name and tagline

Your site name and tagline is very important for your site as it tells search engines what your site is about. So choose it wisely.

You get the option to select your site name and tagline while installing wordpress, in case you want to change it or didn’t add it while installing then go to Settings > General

Once done save the changes.

Enable disable comments

WordPress has a wonderful commenting system built-in so you don’t need any extra plugin for this, that helps visitors to comment on your site easily.

By default commenting is enabled for posts and disabled for pages, but for some reason if you want to disable comments on a post or visa versa for a page then go to the edit page of that post or page.

Click on Screen Options at the top right and check on Discussion if unchecked.

Now scroll down the page where you will see Allow comments check it on or off to enable or disable comments.

Set a custom front page

WordPress by default shows latest post in the home page but you may not want to show latest post in the home page always.

You might want to set a landing page as your home page to collect emails or you want to show your products or services there, whatever be the reason you can set any page as front page in wordpress.

Go to Settings > Reading

In Front page displays section check A static page and select a page from Front Page dropdown and click on Save Changes button.

You can choose any other page to display the latest post from the Posts page dropdown but this is optional.

Now you can check the home page it will display your selected page.

Editing the sidebar

All themes generally have sidebars, be it left or right or some may have both sidebars. Sidebar is the section where some wordpress widgets are displayed.

To add or remove widgets from the sidebar go to Appearance > Widgets

Here you can see all the sections where you can add widgets,  you can drag and drop any element from left side to any of the widget area.

To delete open the widget by clicking on it and click Delete.

Add a logo to your wordpress site

Now with all the content ready on your site you need to add a logo for personal branding. Adding a logo in wordpress is very straightforward

1

Go to Appearance > Customize

2

Click on Site Identity

3

Click Select logo to upload your logo. Once done click on Save & Publish button.

Now you should see your logo in place of your site name.

In some premium themes this option may be disabled, for those generally logo upload option will be in the theme’s option panel or you can follow the themes documentation for the same.

Make your wordpress url more SEO friendly

For posts wordpress by default sets the url like this “YourWebsite.com/yy/mm/dd/post-slug” but this  is not so seo friendly url means your posts may not rank well in search engines.

A good seo friendly url will be like this “YourWebsite.com/post-slug” to change the url structure

Go to Settings > Permalinks  and choose Post-name option and click on Save Changes.

Now you will see your post url is much more simple.

Create your wordpress profile

Since everything is ready now you can create your personal profile in wordpress with your picture.

Go to Users > Your Profile and scroll down to

About Yourself section

Here you can add a small bio and picture of yourself.

To add a picture you need have an account with wordpress.com then you can sign in to gravatar account. From there you can upload or change your image.

Gravatar account is important because when you guest post on other wordpress blogs your image can be linked there easily.

Get things done quickly by using plugins in wordpress

Now if you want to add some additional features beyond basic wordpress features then you can use wordpress plugins.

What is a wordpress plugin?

WordPress plugins are a bunch of pre-defined functions put together to do a certain task in wordpress, these can add or extend wordpress functionality.

Plugins are great as they can perform complex tasks without you having to make it from scratch.

There are thousands of free plugins available in the wordpress plugin library, you can find plugins for almost anything for free but for complex tasks you may have to look for premium plugins.

You can try codecanyon it’s a market place for high quality premium plugins.

How to install plugins?

Installing a plugin is very similar to installing a wordpress theme with just a few minor tweaks here and there.

1

Go to Plugins > Add New

2

Put your keyword in the search bar to search through plugins

3

Once you find the required plugin check the Last Updated status it is important for your sites security.

If you see a plugin is not updated for years it’s probably not maintained anymore and it can cause security issue.

4

Once done click on Install Now

5

Once installed click on Activate button and your plugins is installed.

Some plugins will require you to configure some settings to work properly.

Install plugin manually

If you have downloaded a free or premium plugin from some other place then you have to manually install that plugin. The process is similar to manually installing a theme.

1

Go to Plugins > Add New

2

Click on Upload Plugin button at the top.

3

A new section will open then click on Browse button to choose your plugin from local drive.

4

Then click on Install Now button.

5

Once the installation is finished click on Activate Plugin.

Bravo! you have just manually installed a wordpress plugin.

There are thousands of plugins you can try but to make things easy for you I have listed out few plugins you should install.

W3 Total Cache: This plugin will reduce your websites load time by caching your files and better load time will help your google rankings is well.

Yoast SEO: It is one of the most popular plugins that will help you to optimize your site for seo so it can rank better in google.

Contact Form 7: It’s a popular but a simple plugin for creating contact forms, so your visitors can contact you easily.

Akismet Anti-Spam: This plugin helps filtering spam comments, if you have commenting system on in your site it’s a must have plugin in fact this plugin comes pre-installed with wordpress so you just need to activate it. It will ask you to set up a API key you can get this for free just follow this guide.

Congratulations! you have just created your first wordpress website

If you have followed the steps properly, you should have a working wordpress website now.

It wasn’t too tough was it?

But we have just scratched the surface here, there is whole lot of things can be done with wordpress.

So keep learning.

Do you want more customization in your wordpress theme ?
Hire Me!

With this we have come to the end of- making a website in wordpress guide, you can leave the guide here if you wish.

But if you are interested in learning other cms platforms then keep reading…..

Joomla

Make a website in joomla

As I have said earlier joomla is used for making complex sites and suitable for membership or community sites.

Joomla as a cms is much more complex than wordpress and hard to get around for basic users. But we will look at few basic things here so you can get started with joomla.

Let’s start…..

Install Joomla

Like wordpress guide I will use SiteGround cpanel 1-click-install feature to install joomla.

Let’s do it…..

You have the option to choose Joomla Hosting that will make joomla installation even easier.

On your first login to your hosting account a popup will ask if you want joomla pre-installed? select the option and click on PROCEED then follow the steps, you will have joomla installed in your account.

It’s that simple.

But if you have signed up for normal hosting then follow the steps

  • Log in to your hosting account

  • Go to My Accounts tab and click on Go to cPanel

  • Look for Joomla Installer icon and click on it

  • It will take you to softaculous interface and click Install

  • If you want to install joomla in the main domain leave the directory field blank but if you want it in any subfolder then just add the folder name there.

  • Check the admin details like username, password and email properly. Don’t forget to add a correct email id as it will be required to reset the password when required. Once done click on Install. That’s it!

You have successfully installed joomla on your server.

Manually install Joomla

For some reason if you want to install joomla manually then

Here are the steps to follow-

1

Get the latest version of joomla from https://downloads.joomla.org/

2

Extract the zip on your local drive (ideally in a folder )

3

Log in to your hosting ftp account using a ftp client.

4

Delete any file named “index” and then drag and drop all the files from your extracted folder to your ftp server.

5

Now go to your website url: YourWebsite.com you will see joomla configuration window.

6

Fill in the basic details like site name, description, email, username, password etc and click Next.

7

Now you will see Database configuration page here you need to add

Database type (ask your host what type of database they support)

Database username, password and database name. If you don’t have these details then ask your host for the same.

Once done then click Next.

8

You will be taken to Overview page, here you can choose if you want to install any sample data or not, it is advisable to choose Default sample data. Remember you can delete all these sample data anytime you want.

Scroll down the page it will show pre-installation checks, make sure there is no error.

Then click Install.

9

Once the installation is over you will see a congratulation window, now you need to remove the installation folder sounds bit odd but that’s how joomla works.

Click on Remove installation folder.

That’s it! you have successfully installed joomla.

Installing a template

Much like wordpress themes we have templates in joomla which will decide how your website will look.

You can find free templates for joomla too but unlike wordpress joomla doesn’t have its own templates library you need to find by searching yourself.

If you want more professional templates then you can look for premium templates in ThemeForest.

Now to install a template follow the steps

1

Download the template on your local drive.

2

Log in to your admin panel by typing YourWebsite.com/ administrator.

Once logged in go to Extensions > Manage > Install from the top menu.

3

Now just drag and drop your template zip folder here. Once the template is uploaded you will see a suc



This post first appeared on Design The Way, please read the originial post: here

Share the post

How to make a website from scratch: The Ultimate Guide

×

Subscribe to Design The Way

Get updates delivered right to your inbox!

Thank you for your subscription

×