How to make a website from scratch: The Ultimate Guide

how to make a website

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

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

choose-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%)
cms-market-share

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 an 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

domain-hosting

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.

siteground-plan

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.

siteground-domain

Now you will be asked to choose your new domain name but 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).

siteground-payment

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

build-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…..

WordPress

build-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

siteground-ac-panel

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

cpanel-wordpress-installer

  • Look for WordPress Installer icon and click on it

softaculous-wordpress-installer

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

softaculous-wordpress-installer-details

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

softaculous-wordpress-installer-admin

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

softaculous-wordpress-install

  • 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

wordpress-ftp

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

7

wordpress-install-details

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

wp-theme-default

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.

wp-login

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

2

wp-admin

Once logged in, this is how your dashboard will look

3

wp-theme-add

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.

wp-theme-search

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.

wp-theme-install

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

wp-theme-activate

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

Remember 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

wp-theme-add

Go to Appearance > Themes and click on Add New.

2

wp-theme-upload

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

3

wp-theme-browse

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

4

wp-theme-activate-manually

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

wp-add-page

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.

wp-add-post

  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

wp-add-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

wp-assign-category

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.

wp-add-category-alternate

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.

wp-featured-image

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

wp-edit-page

  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

wp-edit-page-alternate

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.

wp-menu-create

  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.

wp-menu-add

  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.

wp-menu-save

  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.

wp-site-title

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.

wp-screen-options

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

wp-comment-option

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.

wp-front-page

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 and 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

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

wp-widgets-delete

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

wp-logo-upload

Go to Appearance > Customize

2

wp-logo-site-identity

Click on Site Identity

3

wp-select-logo

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

wp-permalink

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.

wp-profile

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

wp-plugin-add

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

wp-plugin-activate

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.

wp-plugin-upload

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

wp-plugin-activate-manually

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 plugin 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 are whole lot of things you can do with wordpress.

So keep learning.

Do you want more customization in your wordpress theme ?

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

build-website-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

siteground-ac-panel

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

cpanel-joomla-installer

  • Look for Joomla Installer icon and click on it

softaculous-joomla-installer

  • It will take you to softaculous interface and click Install

softaculous-joomla-installer-details

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

softaculous-joomla-install

  • 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

joomla-ftp

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

joomla-configuration

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

7

joomla-database-config

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

joomla-overview-config

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

joomla-remove-installation

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.

joomla-add-extension

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

3

joomla-extension-upload

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

You can add a template from direct web url is well.

4

joomla-extension-style

Now go to Extensions > Templates > Styles

joomla-extension-setting

Here you will see the list of templates and click on the “star” icon to choose a template.

With that you have installed a joomla template, give yourself a high-five!

Adding content by creating article page

You can add content to your site by creating article pages

Here is how

1

joomla-add-article

Go to Content > Articles > Add New Article from admin panel

2

joomla-article-content

You will see an interface like ms word where you can add your text and images, once you are happy with your content click on Save & Close button.

But your content won’t display in the website yet, for that follow along…..

3

joomla-article-menu-setting

Now go to Menus > Main Menu

By default you will have a “Home” menu and click on it.

4

joomla-select-article

It will take you to edit menu page, click on Select on Menu Item Type

joomla-article-type

A pop will appear, click on Articles and then Single Article

Save the menu and now you can see your page in the site.

Adding a menu in joomla

Now your content is ready need to add them to menu, but adding a menu in joomla is bit complex.

So follow along carefully

1

joomla-add-menu

Go to Menus > Manage > Add New Menu

2

joomla-menu-title

Add Title and Menu Type

Menu type is what type of menu it is like primary menu or footer menu etc.

Click on Save & Close button.

3

joomla-menu-module-add

Once done then you will see all the menus including your new menu. You will see a button beside your menu Add a module for this menu click on it

You need to add module unless your menu will not be visible.

4

joomla-menu-module-edit

Now you will see add a module popup, here you can do a lot of things but two fields are most important Title and Position

Add a title and assign a position for your menu, remember available positions will depend on the template you are using.

Now click on Save & Close.

5

You still won’t see the menu in the front end yet, you need to add at least one menu item to your menu.

joomla-add-menu-item

For that go to Menus > Your menu > Add New Menu Item

6

joomla-menu-item-details

Add a Menu Title

and then on Menu Item Type click on Select

joomla-article-type

In pop click on Articles > Single Article

joomla-menu-item-select

Now on to Select Article click on Select

joomla-menu-item-select-article

A pop will open, choose the article you want to link with this menu item.

Then click on Save & Close

Well Done! now finally you can see your menu in the front end.

Adding logo in joomla template

Now you want to replace the default logo provided by the template with your own logo, to do that

1

joomla-logo-setup

Go to Extensions > Templates > Styles

Click on the template you are using

2

joomla-logo-upload

Now you will see template customization options look for Logo section and upload your logo. The panel options and look will differ from template to template.

If you are looking to add a logo in one of the joomla default templates then you first you need to duplicate the template and then work on that duplicate template, because joomla doesn’t allow you to override the default styling in those original templates.

Extend joomla even more by using extensions

Joomla has a lot of functionality built-in but you can add to that by using extensions. You can find many extension here extensions.joomla.org.

Installing an extension

1

Download the extension zip file.

2

joomla-add-extension

Go to Extensions > Manage > Install

3

joomla-extension-upload

Simply drag and drop your extension zip here.

4

Activate the module and you are done.

Some extensions may provide additional instruction on installation you need to follow those.

Excellent! You have just created a basic joomla website

If you have followed the steps by now you should have a very basic working joomla website.

We have covered very basic things here, but hope this guide will help you get started with joomla.

So keep learning…..

Further read

Drupal

build-website-drupal

Creating a website in drupal

Drupal is a very safe platform compared to other CMS that is why big companies choose drupal. But again like joomla drupal is a very complex cms perhaps even more than joomla, so not easy for beginners.

We will learn installation and few basic things to make a simple drupal website.

Install Drupal

Like wordpress and joomla siteground hosting has one click installation for drupal too.

Follow the steps

  • Log in to your hosting account

siteground-ac-panel

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

cpanel-softaculous-installer

  • Look for Softaculous and click on it

softaculous-drupal-installer

  • Now on the left menu click on Portals/CMS > Drupal.
  • Click on Install

softaculous-drupal-installer-details

  • Choose the drupal version you want to install and leave directory blank if you want to install drupal in the main domain.

softaculous-drupal-install

  • Check the admin details like username, password and email properly. Change the site name to as you wish.
  • Click on Install

Now you have installed drupal on your server.

We will use drupal 8.3.7 for all our demos so interface and steps may differ from older version.

Manually install Drupal

Though every good hosting company will provide one click installation but you should know manual installation process too as a backup.

Here are the steps

1

Get the latest and stable version of drupal from https://www.drupal.org/download

2

Extract the zip on your local drive

3

Log in to your hosting ftp account using a ftp client (filezilla).

4

drupal-ftp

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 drupal installation window.

6

drupal-language

First choose the language, we will stick with English here and click on Save and continue.

7

drupal-profile

Now to installation type, choose Standard and click on Save and continue.

8

Verify the requirements, make sure there is no error and click on Save and continue.

9

drupal-database

Now you need to set up database, choose the database type we will choose MySQL.

Fill in other details like database name, database username and database password, ask your host for the same.

Click Save and continue.

10

drupal-config

Now you will see an installation progress bar, once done a configuration window will open. Fill the profile and click on Save and continue and that’s it.

Cool! you have successfully installed drupal on your server.

Adding a modules in drupal

Before we start adding content or do anything else on this drupal website we will add a very useful module Admin Toolbar that will help you navigate the admin panel better.

Drupal admin panel menu can give you a hard time but this module will convert the menu in a dropdown menu and in the process we will learn how to add modules in drupal is well.

You can find thousands of modules in drupal’s module library.

1

drupal-module-search

First go to https://www.drupal.org/project/project_module

Search with a keyword, for this instance we will search with “admin toolbar

2

drupal-module-download

Scroll down to find the module you are looking for and click on it to check which version of drupal it supports.

If it supports your drupal version then download it.

3

drupal-module-installer

Now go to Extend and click on Install new module.

4

drupal-module-upload

You can install a module via direct link or you can browse it from local drive.

Once selected then click on Install.

5

drupal-module-enable

It will start to install once done it will show a success message then click on Enable newly added modules.

5

drupal-module-install

Now it will take you back to extend page, scroll down the page to find your module click the check box (for admin toolbar there will be two modules ) and scroll all the way down the page then click on Install.

Now your module is active and you admin panel has a beautiful dropdown menu.

Manually installing a module

Manually installing module in drupal is bit easier than through admin panel, just follow along

1

Log in to your hosting ftp account using a ftp client (filezilla) and navigate to your drupal installation

2

Look for modules folder and open it

3

drupal-module-ftp

Now drag and drop the downloaded module (after extracting) to your server.

4

Go to Extend from admin panel

5

drupal-module-install-manually

Scroll down the page to find your module click the check box and scroll all the way down the page then click on Install.

That’s it!

Install a theme in drupal

Themes will make your development process faster. There are thousands of free themes to choose from drupal’s own library you should try them once but if you looking for premium themes you can try themeforest.

This how to install a drupal theme

1

Download the theme on your local drive.

2

Log in to your drupal admin panel YourWebsite.com/admin.

3

drupal-add-theme

Go to Appearance > Install new theme

4

drupal-browse-theme

Now click on Browse and locate the downloaded theme from your local drive or you can upload theme by direct url, then click on Install.

5

drupal-theme-install

Once the theme is uploaded a success message will appear, then click on Install newly added themes

6

drupal-theme-activate

Now you will see all available themes, look for your uploaded theme and click on Set as default.

And now your new theme is activated.

Setting and configuring home page

Now you theme is ready its time set up home page but first we need to create a page

1

drupal-add-page

Go to Content  > Add content > Basic Page from top menu

2

drupal-page-details

Now you will see add content page with a WYSIWYG editor, add your content with title.

You can click Save and publish button here but to set this page as home page DON’T hit Save and publish yet.

3

drupal-home-page-setup

Go to right panel and click on PROMOTION OPTIONS then check Promoted to front page

Now hit Save and publish button and you have just set your home page.

Creating other pages and url modification

For this you can repeat Step 1 and Step 2 from above mentioned steps once done if you hit Save and publish at this stage you see a url like this YourWebsite.com/node/2 but this type of url is not seo friendly.

To change the url

drupal-page-url

Go to right panel of add content or edit content page and click on URL PATH SETTINGS

add your custom url here ideally it should correspond to the page title like if it’s an About us page then you should add “/about” or “/about-us” then click on Save and publish.

And now your url should be like this YourWebsite.com/about.

Adding a  menu in drupal

Once you have created the pages you want to add those pages to menu for easy navigation.

To create a menu in drupal follow the steps

1

drupal-add-menu

Go to Structure > Menus  > Add menu from top

By default drupal adds a “Main navigation”  you can either edit that or can create a new menu.  If you want to edit an existing menu then skip to “Step 3”.

2

drupal-menu-title

Add a title and click Save.

3

drupal-add-menu-link

Now you will see an Add link button click on it.

4

drupal-add-menu-link-details

Add the Menu link title and Link then click Save.

Repeat this step for each menu item you want to add.

If you are editing Main navigation menu your menu should display in the front end now.

But if you are creating a new one then need to do few more things

5

drupal-block

Go to Structure > Block Layout

6

drupal-place-block

Click on Place Block

7

drupal-menu-place-block

A pop up will open, scroll down to find your newly created menu and click on Place Block

8

drupal-block-config

Another pop up will appear, look for Region and choose a location from the dropdown. This will decide where your menu will appear in front end.

Click Save block and you are done.

Now you can see your new menu in the front end.

Add logo in drupal

Now your theme, content and menu is ready its time to add a logo.

1

drupal-logo-setup

Go to Appearance > Settings  > Your theme

2

drupal-logo-upload

Now scroll down the page and look for LOGO IMAGE section, uncheck the checkbox you will see logo upload option. Upload the logo and click on Save configuration.

Great! Your basic drupal website is ready

If you have followed along you should have a working drupal website now. As you may have guessed it we have just touched the tip of the iceberg there is whole lot more to learn.

The purpose of this guide was to give you a basic idea of drupal. So keep exploring and learning.

But if you find all these CMS’s bit confusing and want a more simple solution then I have got good news for you.

Keep reading…..

Chapter 4: Build a website with website builders

webbuilder

If you don’t want to get into the hassle of domain, hosting, installation etc then website builders are perfect for you.

What is a website builder?

Website builders are an all in one solution to set up a website without any coding. They provide almost everything you need to create a website from hosting to design.

Pros:

  • Website builders are an all in one solution for a website.
  • You don’t need any coding knowledge.
  • They are hassle free you don’t have to worry about domain, hosting etc.
  • They will have many templates to choose from.

Cons:

  • Website builders are not free you need to pay a monthly fee.
  • Limited customization.
  • All your files are hosted in their server so switching platforms are a problem.

When to choose website builder over CMS?

If you don’t have time to learn a cms or don’t want to get into the hassle of creating a website or need a small website quickly then choose website builders over a cms.

Choose the right website builder to avoid mess later

Website builders are a growing and popular trend in web industry now, so more and more companies are getting into this. You have many options when it comes to choosing a website builder but not all website builders are same in terms of features, service and support. So you need to choose them wisely.

Here in this guide I will show you features of thee of the most popular website builders going around today.

I won’t go into the details of how to use each one because these website builders are self-explanatory and easy enough for anyone to use. But if you get stuck at any point don’t hesitate to contact me.

Now let’s look at each one

Wix

webbuilder-wix

Wix is probably the most popular website builder in the market. It is the go to website builder for many.

Let’s quickly look at the features

What do you get in Wix

Free version:  Wix has a free version you can try that out, once you are happy with your site you can publish your site but it will be in a sub domain. To get your own domain you need to upgrade to premium version.

Price:  Wix has different plans ranging between $4.50 – $24.50per month, it includes 14 day trial.

wix-pricing-table

Free Templates: Wix has 100’s of templates most of them are free and can be a good starting point for your website.

wix-templates

Easy editing Interface: It has a very easy editing interface even a first time user can work  around easily. You can simply drag and drop elements here it’s like working in an image editing software.

wix-editor

Easy customization: Wix has a lot of customization options virtually you can customize everything you see in template. Just click on an elements you will see options to edit that element.

Many built-in apps: You will find many built-in apps for SEO, Marketing etc, which will help in the progress of your website.

wix-apps

Good support:  Wix has a huge knowledge base of articles and videos so if you ever get stuck you can check them. Wix has an active forum too where you can ask for help.

Final thoughts on Wix

The kind of flexibility you get at such a price is definitely worth trying especially for small websites (personal & business). Since you get to access to a lot of things in free version which should give you an idea if wix is right for you or not so go ahead and try out Wix you have nothing to lose .

Useful Resources

Squarespace

webbuilder-squarespace

Squarespace is another popular website builder that you can try. It is not as intuitive as wix but is very good and secure website builder.

What do you get in Squarespace

Free Trial: You get 14 day free trial to test out squarespace if you are not happy you can cancel the trial.

Price: The price is bit higher than wix it ranges between  $8 – $18 per month (annually billed).

squarespace-pricing

Free SSL: You get free SSL with any plan, generally a SSL certificate costs around $60 per year. You get it for free with squarespace subscription.

Free Templates: Squarespace has around 80+ templates, you get to access all even in trial version. All templates are beautiful and professionally designed.

squarespace-templates

No drag and drop: It has a very clean interface for editing but doesn’t offer any darg and drop feature like wix. First time users may find editing bit difficult because it has a bit of learning curve (simple).

squarespace-editor

Limited customization: One down side of squarespace is that it offers limited customization on templates. You just can’t make any design out of any template.

Not suited for all: Squarespace templates are generally image rich, you need to have lots of images to get the best out of a template so may not suit in all type of websites. Ideally suited for creative fields like photography, design etc.

24/7 support: You get 24/7 support on any plan which is good.

Final thoughts on Squarespace

As you can see it is not as flexible as some other website builders but if you want a portfolio site with lots of image squarespace can be a perfect fit for you.

Useful Resources

Weebly

webbuilder-weebly

Weebly is another option you can try, this one too is very simple and user friendly.

What do you get in Weebly

Free version: Weebly too offers a free subscription version where you can try out weebly to get the feel of things.

Price: Weebly price ranges between $8 -$25 per month (billed annually).

weebly-pricing

Free Templates: It has around 50+ free templates to choose from. Templates are decent in design.

weebly-templates

Easy editing interface: Weebly also has a very easy to access drag and drop editor so new user can easily work around.

weebly-editor

Easy customization: You can customize a template very easily just click on an element to see editing options.

Final thoughts on Weebly

I would suggest you to try out weebly for free first and see how it works for you, then decide if you want to stick with it or not.

Useful Resources

Which web builder do I recommend ?

To be honest with you it depends on your requirement and  I would suggest you try all three first hand (free version) and then decide. But if I have to pick one from the three I would go for Wix because of the flexibility it offers at a very competitive price.

So which one is better a CMS or a Web builder ?

This debate will always be there and it is one’s personal preference. Likewise mine is CMS (WordPress) being a front end developer I have never liked website builders over a cms wordpress in particular. I feel like bit restricted in website builders where as in wordpress I feel I’m in control and I could do anything with css, html, js etc.

That’s my point of view only not a general one. So if you are looking to make a website super quick and are on a tight budget you should go for website builders because CMS’s generally have a bit of learning curve and if you want to scale the website, there will be additional expenses on development.

But if you are serious about your website and its growth then defiantly go for a CMS preferably WordPress because it’s easy for beginners and you can scale your website easily.

Conclusion

Whether you have chosen a CMS or a website builder hope this guide has helped you in creating your first website. If you have any question or any problem in following this guide don’t hesitate to contact me.

If you find this guide useful please do share and leave your comments, that motivates me to keep producing useful contents.

He is a front end developer and an enthusiastic blogger. He loves playing with css and founder of www.designtheway.com

You may also like

Leave a Reply

Your email address will not be published. Required fields are marked *