How To Build A Website From Scratch

Disclosure: this page contains affiliate links. An affiliate link means that we may earn advertising/referal fees if you make a purchase through a link, without any extra cost to you .

Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp
Share on telegram
Share on email
Share on print
How To Build A Website From Scratch

How To Build A Website From Scratch

The easiest way to build a website from scratch is to use a CMS (Content Management System). The most popular content management system is WordPress. Here I’m going to tell you step by step what you have to do to build your website using WordPress.

I’m a web developer and can create some cool websites from scratch by custom coding. Our team of graphic designers comes up with a great custom web design and then we make it come true using the magic of PHP, Javascript, MySQL, etc. But it takes a lot of time and a lot of work which translate on some very expensive websites.

I was one of those programmers who didn’t like using CMS like WordPress or Joomla. But one day I got a job. I had to work as a frontend developer for a company on a project for another company, but it had one condition, the site had to be made using WordPress, I was running low on money (not many clients for expensive websites on my country) and couldn’t say no. So I took the job and learned how to make custom coding for WordPress. Well… I just fell in love with it. For its simplicity, and how fast I can make most of the work without writing a single line of code. After that I decided to make almost every website using WordPress, it’s a lot easier, faster and for the client… CHEAPER without loss on quality.

After a while, I decided that I wanted to teach people without knowledge in coding, how to make their own websites because not everybody can afford to pay for it. As I said earlier, the easiest way to create a website is by using WordPress. You just need to know how things work and what the process is.

Here I will teach you:

  1. How to select good hosting services.
  2. How to select a good domain name.
  3. How to buy hosting and domain services.
  4. How to configure your hosting.
  5. How to install WordPress.
  6. How to use WordPress.

Of course… If you don’t have the time to learn or are just looking for an expert to do it for you, stop here, contact us and tell us what you need. We will do it for you.

Siteground Banner

How To Select Good Hosting Services?

How to select good hosting services should be an article by itself, and if you are reading this probably you are just starting in this world of website making. So I will give you just these 2 tips:

  1. Choose a service that is recognized: there are a lot of services around, with different specs, right now you just want a service that is reliable, easy to work with and that gives you good customer service. Most of the popular ones are going to be enough for you (at least at the moment) and you will have the opportunity to upgrade your services or change providers in the future.
  2. Pick one you can afford: at this point the cost of the service also is key for you, if you are just starting a project, finance is an important thing to consider.

Below is a list of hosting providers from where you can choose from. In this course, we will use Siteground because we like their price/value offering. Any of them will be good but maybe some steps of the course are going to be a little different if you don’t use Siteground. So I recommend you use it if you are going to follow the entire course.

ProviderPrice/MonthRating
Siteground$2.654.6
Bluehost$3.954.2
A2Hosting$2.964.6
GoDaddy$5.993.9

How To Select a Good Domain Name?

The selection of a good domain name is very important, the domain is your identity on the web. You want people to remember it forever while it fits perfectly with your business. So we prepared a list of tips that you should take into account.

Tips for choosing a domain name:

  1. Keep it short: it is hard to find short domain names that are available but try to make it the shortest possible, so it is easier to remember.
  2. Make it as close to your brand as possible: if the name of your brand or company is available you should use it.
  3. Make it obvious: In case your brand name is unavailable. Try to choose something that describes your services and niche the best way possible. Ex. carwash.com
  4. Make it easy to write: While using derivatives from your company name with some spelling variations could be a good idea, it also could lead to confusion. Ex. karwash.com instead of carwash.com.
  5. Avoid using numbers: When people hear your domain name, they won’t have a clue if they should spell the number (ten) or just use the numeral (10).
  6. Be original: if your domain name is like someone else’s maybe you will lead traffic to that website instead of yours. (it could work the other way around though)
  7. Differentiate yourself from others: if your domain name has to be similar to another add something that will make a difference. For instance, you could add the location of your business if it’s local. Ex. carwashmiami.com
  8. Use the right domain name extension: some extensions have a meaning. And you should respect that to some point. But the reality is that everybody will remember a .com domain name easier than anything else. If a .com extension is not available there are lots of extensions that could fit perfectly with your business or niche. Also, some of them are new so a lot of domain names with this new extension are available. Ex. carwash.pro could be available.
  9. Use catchy domain names: sometimes is almost impossible to find a good obvious domain name, so it is the moment to be creative and find something that will stick in people’s minds. Ex. letswashyourcar.com
  10. Be quick: as soon as you pick an available domain name BUY IT, maybe it won’t be available tomorrow, thousands of domain names are sold every day.
Namecheap Banner

How To Buy Hosting And Domain Services

There are a lot of providers of domain and hosting services, you can even buy a domain from a provider and hosting from another. The easiest way to go is to get both from the same provider, you can even get discounts if you do it that way.

In general, hosting services and domain names are paid yearly, some providers let you buy monthly hosting services though. In my opinion, the best you can do is to get the longest contract available and get discounts, that way you will save some money. Usually, it means a 3-year contract but it depends on the provider. Later if you need to upgrade your hosting services, you can do it at any time and they will charge you a fee for the difference in the price of the remaining time of the contract.

Let’s start with the process!!!

If you follow the link for Siteground you will get the following page. Choose Web Hosting so you can have a variety of options that can be useful for you in the future.

Web Hosting

Then on the next page, you have to pick the contract you want to get according to specs and price. Usually, we avoid the StartUp contract because it limits us to scale without changing hosting plans in the future. But in this case we are going to explain to you how to buy and configure the StartUp plan, there are no big differences with the GrowBig on how to use your panel so choose whatever you want.

How To Buy Hosting Services

Once you have picked the specs of your hosting service you have to select if you want to get a new domain, which you do. Using the tips I gave you before, try different domain names until you find the perfect one that is available.

How To Buy Hosting Services

After you find an available domain name that fits your project, you have to add some required personal data.

How To Buy Hosting Services

Then, you have to pick the duration of your contract, as we said before the longer the better, at this moment you can buy as many years as you want with discount prices, now that means $5.95 each month. Usually hosting services charge you the regular fee when you renew your contract, it means $19.95 for each month at the moment. So do the math.

Siteground gives you the possibility to add a couple of services that are not mandatory, like Domain Privacy and Site Scanner. Usually, I skip those 2.

Domain Privacy: what it does is to hide your personal data like name and email on the whois services, that way you avoid spamming on your email account. If you configure well your email account and don’t pay attention to any weird email that passes through it won’t be necessary.

Site Scanner: this is just an antivirus service. If you do things right in your WordPress site, it won’t be necessary either.

How To Buy Hosting Services

Finally, you just have to click on Pay Now and fill the payments form. Use the payment method of your preference. Credit card, PayPal and more are available.

How To Buy Hosting Services

How To Configure Your Hosting

When you first enter your hosting account you will see the different options you have to configure and use your hosting. If you chose to get an account from Siteground with a Startup Plan you will get the following view. Notice that there is an Important Message with a View button, click on it.

How To Configure Your Hosting

You will get a page that will allow you to create or transfer a website, also it gives you the possibility to enhance your account. Select Start a new website and leave blank the other options (unless you want to add features to your hosting account). Then click on Confirm.

How To Configure Your Hosting

You will get another page with extra features to Start a new website, here we are going to select WordPress to install it, and you will have to add info to create your Administrator’s account for the WordPress. You need to add an email address, it has to be an active one, WordPress is going to use it for different things in the future. You have to give a username and a password. Then click on Confirm in the Set up Your Website box.

How To Configure Your Hosting

Now click Confirm on the Enhance Your Account box.

How To Configure Your Hosting

Now you have to read the Terms of Service and Privacy Policy (is not mandatory), click on the square beside the message to confirm that you agree to them and then click on Complete Setup

How To Configure Your Hosting

Well… You have installed WordPress to your hosting and created an Administrator’s account.

How To Configure Your Hosting

You will be redirected to your hosting panel. There you’ll see the info of the WordPress you just installed. The address of the installation that should match the domain you bought and the version of WordPress installed.

Click on Go to Admin Panel to go to the WordPress panel.

How To Configure Your Hosting

The first time you access your WordPress panel, Siteground will offer you to install a theme and some plugins that could be useful for your website. You can refuse to install them and install them later, or you can install them and erase them later if you are not going to use them. The advantage of installing them in this step is that maybe they will come with full features that only come with the paid versions of them.

Click on Start Now.

How To Configure Your Hosting

First Siteground allows you to pick a theme.

A theme is a predesigned and programmed way to show your data, is how your website will look. Themes are created so you can easily customize them to create your website.

Check the Themes that Siteground offers you and pick one.

How To Configure Your Hosting

After you pick a theme Siteground will ask you if you want to install Elementor. Elementor is a great tool to customize your theme or to create them. In this course, we are not going to show you how to use Elementor but we recommend you to install it so you can use it once you learn how to do it. It’s very easy and intuitive.

How To Configure Your Hosting

After you selected your theme and if you wanted to add Elementor you will be asked to choose to install some plugins that will help you create things you want to show to your visitors:

  • Contact Form: if you choose this a plugin named WPForms will be installed. We prefer to use “Contact Form 7” but is a personal preference.
  • Shop: If you want to build an online store you want to add this feature, it will install WooCommerce which is the number one plugin for this.
  • Calendar: this will install The Events Calendar plugin. If you want to handle events info on your website, this is the plugin to go.
  • Jetpack: if you want to protect your website against unwanted intrusions Jetpack is a great option.
How To Configure Your Hosting

Finally, you will be asked to add some plugins that will help you with some tasks that your visitors won´t see but are important and useful to you.

  • Google Analytics: it gives you statistics about your site. How many visitors, where they come from, demographics of your visitors, and much more info. You will have to use Google Analytics at some point but first, you should register, get your track code and learn how it works. The plugin that Siteground offers you is Monster Insights.
  • Optimize for SEO: SEO means Search Engine Optimization. It’s a series of strategies you have to take to position your pages and posts in the first places of search engines like google, yahoo or bing for specific queries. Siteground is going to install the Yoast SEO plugin, it is considered the plugin with the best tools for SEO.
  • Grow Subscribers List: This will give you 30 days free trial of the Optin Monster plugin, An advance way to transform visitors into costumers on your site. It helps you collect user’s data to use it in marketing campaigns.

You need to learn about Google Analytics, Google Search, SEO, and marketing online before any of these plugins are useful. It is up to you if you want to install them or not.

After you make your selections ready click on the Complete button.

How To Configure Your Hosting

Congratulations!!! At this point, you ended the configuration of your hosting and installation of your WordPress.

You can click on Go To Dashboard and this will lead you to your WordPress admin panel. Or you can click on View Site and take a look at the theme you installed with some fake info on it.

How To Configure Your Hosting

Your Dashboard

Wordpress Dashboard

Your Site

Wordpress Site

How To Use WordPress

Learn how to use each feature of WordPress is something that will take you a long time to do, not to mention that each theme and each plugin has its functionality. So here I will teach you the main things you need to know to start your WordPress website.

  1. How to install or change a theme.
  2. General Customization of your theme.
  3. How to create Pages.
  4. How to create Posts.
  5. How to create a Menu.
  6. How to install a plugin.

Themes

To install or change a theme in WordPress you have to click on the sidebar in the Appearance button and then in Themes. You will get a view like the one below.

If you hover over a theme that is not active it will give you the possibility to activate it, that way you change the actual theme for the one you just activated. But if you want to get a new theme just click on the Add New button.

Wordpress Themes

To add a new theme you have two options. Select a free theme from the hundred that WordPress has available for you, or upload one from another source.

If you want to use a free theme from WordPress just write a key of what you want on the search bar to get the themes that fit that word. You can hover over each one and you will get 2 buttons: Install and Preview. You can check each one of them until you find the one you like, then click on Install.

Wordpress Themes

After you installed the theme you wanted, you have to activate it. Hover over the theme you installed, and click on Activate.

Activate WordPress Theme

Now we have to customize your theme. There are 2 ways to get to that page. Hover over the active theme and click on the Customize button or just click on the one located in the sidebar.

Customize WordPress Theme

You will get the following view that will allow you to customize everything that you can change from your theme. Some things are common to every theme and some are available just on the theme you installed. The main things you want to change are the header and footer of your site.

As you can see WordPress gives you a sidebar where you can select and modify item by item. Each time you modify something, click on the Publish button located on top of the sidebar. Everything you modify on the sidebar changes visually on the page view in the right, changes won’t have any effect on the frontend of your site until you click on Publish.

WordPress also gives you the possibility to change things by clicking on the edit buttons that appear beside each editable item on the page view on the right. Right now let’s click on the button beside My Blog to change the title and logo of the site.

Customize WordPress Theme Panel

Here you can change or upload your logo, change the title of your web and add or change the tagline if you have one. Once you change things don’t forget to click on Publish. If you upload an image of your logo the header will adapt in size to that image, so try to upload an image with the proper dimensions so it looks good on your site.

In this article, we won´t teach you about CSS, but in case you have CSS knowledge you can change some additional visual features of your site, like the logo dimensions no matter the size of the image you uploaded.

To change your footer or any other editable thing just look for it on the sidebar or in the right side view.

Don’t be afraid to experiment and see what things do. You can always go back to how things were or just reinstall your theme.

Customize Theme Header

Pages

Once you change the aspect of your site, you will have to add the info you want your visitors to see. Some of this info is fixed, it can change over time to add or remove things, but it doesn’t change too much or too often, thinks like Bio, Contact Page or My Services fit this kind of info. For this WordPress gives you a type of publication named Pages. In the sidebar you can find the Pages button, click on it and you will get the view below.

If you click over an existing page on the list you will get Edit, Quick Edit, Trash, and View buttons. The Quick Edit button will give you a few options to change on the page, while the edit button will allow you to edit everything that’s available for changes on the page.

Also, there is an Add New button beside the page’s title, click on it.

Wordpress Pages View

When you create a Page you have to add a title to it and then all the content you want. WordPress gives you the possibility to add format to that content; you can align it, change the type of text, etc. Also, it lets you add different types of data like images, links, and more. The actual version of WordPress works with what they call Blocks, and each block can be a text, image or other types of content.

In the right sidebar of the page, you can change some attributes to the Page or Block, you can even add a Featured Image to the document, this image is the main image of the page, and it will be shown according to the configuration of your theme.

At the end of the configuration of the document you have some options that you can change that modifies the way the page looks.

Once you have entered the whole info and have configurated the document you have to click on the Publish button, located on the top of the right sidebar, it will ask you to confirm to publish the document, so it will ask you twice to click on it.

Wordpress New Page

Posts

Posts are another kind of publication that gives WordPress the quality of a Blog. You can publish different documents that are organized chronologically and that can belong to a category. Depending on the kind of info you publish it can be recipes, news, articles, and more.

You can create your categories and can assign each post to one or more categories.

The way you create or edit a post is similar to the way you create or edit a Page. The main difference in the process is that you can assign categories to posts.

Wordpress Posts View

Wordpress New Post

Menu

Another important thing that you need to change and adapt to your needs is your Menu. In the sidebar under Appearance is a button named Menus, click on it.

WordPress gives you the possibility to change the main menu and to add more menus. Usually, the menu located in the header of your site is the primary menu, but it will depend on how the theme you are using was created. On the top of the menu page, locate the menu that says (Primary) and Select it.

In the Menu Structure section of the view, you can see the items that belong to the menu you are editing. When you click on any of them it allows you to edit or remove them. Remove the ones you want and then you add the ones you need from the Add Menu Items section. It will give you the possibility to add Pages, Posts and Categories, as well as some additional custom links.

Wordpress Menus View

Plugins

There are some functionalities that you need on your website but WordPress doesn’t have on its own, those features can be added with some custom coding provided by third parties using plugins. There are millions of plugins around, you need to search and install them according to your needs.

Click on the Plugins button located on the sidebar. You will see a list of the installed plugins. You can access their settings, deactivate them and other functions. And as usual, you can Add New plugins by clicking on the button beside the page title.

Wordpress Plugins View

When you click on the Add New button, you are redirected to a page where you can search for a plugin by name, WordPress searches its database and gives you a list of all Plugins that meet the search criteria. Some plugins are not available this way, you will have to look for them at the creator’s webpage, download them to your computer and then Upload Plugin here.

If you find the plugin you are looking for here, click on the Install Now button.

Wordpress Coctact Form 7

Once installed you have to Activate the plugin.

Wordpress Plugin Activation

The Result

At the end of this process, you will have an operative site. You just need to add your final touches and input the whole data you want to show to your visitors.

Customized Theme

Congratulations!!! You now have a working site.

If you need help with your site we can offer you our consultation services.