Website

How to Create a Website

One of the first steps in building your digital identity is creating a website. With the advancements in website development, we now have many ways to create a website; we can use a content management system, or we can use a website builder or we can go about it the old way and build the website from scratch. In this tutorial, we will talk about all of the ways above and show you how to create a site.

Don’t worry if you have never developed a website before because in this tutorial we will walk you through the whole process.

Step 1 – Choosing a Platform

As we mentioned earlier, there are 3 main ways to create a website:

  1. Go the CMS way: Imagine content management systems as advanced development tools that can be used to build and manage websites and the content that makes them up. When it comes to CMSs, the three real market leaders are WordPress, Drupal and Joomla! All 3 of the tools are free and open-source but WordPress is hands-down the most frequently adapted CMS. All three of the systems have been developed using PHP, all three make use of templates/themes for visual customization and all three are driven by the community. Even though Joomla! and Drupal can’t compete with WordPress when it comes to usability, simplicity, maintainability, size of the community and the availability of free plugins and themes etc. For somebody who lacks development experience, WordPress is the obvious choice.
  2. Using website builders: The world of automation reached a new height when website builders came into existence. At first, the customization options regarding functionality and design were limited, but now, there is a lot more that you can achieve by dragging and dropping on a modern website builder. Compared to CMSs and coding websites from scratch, website builders are very fast, efficient and arguably perfect for people who lack development experience and don’t want to spend a lot of time on the development process.
  3. Code a website from scratch: The third option available at our disposal is to build a website from scratch. This process should ideally intrigue users who have at-least basic development experience. The technologies used in this tutorial to build a static website will be HTML and CSS.

Step 2 – Getting Hosting and Domain Name

Your website is like a building and just like any building, it needs to have an address via which users can access it and a place to reside. In order for you to publish your website on the internet, you need to get web hosting, and to give it an accessible address, you need to get yourself a domain. Let’s look at both one by one:

Choosing Web Hosting

A good web hosting service provider will go a long way in ensuring that your website meets the desired standards of quality, efficiency and availability. Hostinger provides web hosting at astonishingly cheap rates while maintaining the aforementioned standards (and a lot more). Here are some of the many reasons why you should join the millions of customers who have already chosen Hostinger:

  • Hostinger hosting is optimized for WordPress (e.g. WP CLI, WordPress caching etc.)
  • You get a super-easy website builder which lets you drag and drop your way to a perfect website.
  • PHP website will run with ease on Hostinger hosting. And it is very developer-friendly. You can run Laravel, CodeIgniter, integrate seamlessly with your GIT and get SSH access to your servers.
  • SSL certificate is also provided by Hostinger.
  • A free 30-day trial to let you get a hands-on experience of all the services before you make a purchase.
  • If you opt for the premium or the business package, you will get a free domain name.
  • You can have as many email addresses as you want (Yes-unlimited!).
  • If your website is having some issues or you just have some queries, the support team will be available 24/7/365 to help you out.
  • With one click, you can install all the famous CMSs including WordPress, Joomla!, Drupal, etc.

Choosing a Domain Name

Put simply, a domain is your website’s name. It’s the thing that you put in the address bar of your browser and hit enter to visit your website. Google.com is a domain and so is Facebook.com.

Choosing a good domain name is also fundamentally important and because it’s something that your users will refer to your website by, you can’t get it wrong. Here are a few tips that you need to know before you choose one:

  • Keep it short: Nobody wants to visit Googlebutwithabiggerdomainname.com.
  • Be brand-specific: Your domain name should give people an idea of what your business does.
  • Choose the correct domain extensions: Domain extensions are the part of the domain that come after the period/full-stop (.). A .com domain is a universal choice but depending on your needs or nature of your website, you might have to choose a different option.
  • How does it feel when you pronounce it? Your domain name should be easy to pronounce so that it’s easy to bring up in conversations.

Just like hosting services, Hostinger also provides domain name registration services. You can use this neat domain name checker to pick a domain name.

Domain name checker tool

What’s even better is that if you choose a business or a premium hosting plan, you get the domain name for free (Yes-completely free!). We also sell next generation .xyz domains at an unbelievable price of $0.99 per year.

Step 3 – Creating a Website

So the groundwork is done and now the fun bit begins. Now that you know where your website will be hosted and what domain name you will be using, you can start creating your very own website. We have explained all 3 methods (using WordPress, using a website builder and building a website from scratch) below; choose your pick and have a go.

Option 1 – Creating a Website with WordPress:

If you are reading this, then you have chosen the best CMS to build your website – we think that it’s safe to say that you made a right call. Let’s get started with the steps.

Installing WordPress

Installing WordPress is as simple as making a few clicks. The auto-installer does all the heavy lifting for you; although we have also added a manual way to install WordPress using FTP.

Installing via the auto-installer:

  1. Login to your hosting account and from the control panel, click on the auto-installer icon.
  2. In the search field provided, type WordPress. When you see the latest version in the search results, click on that.
  3. Enter the URL (The address of your website. You can leave it blank in case you want to set WordPress up on the root of the domain name), Language, username, password, email, WordPress Title, WordPress Tagline (your website’s slogan) and hit the Install button.Install WordPress with Hostinger Auto-Installer

And that’s it! WordPress is now installed.
It’s highly unlikely that the auto-installer won’t work for you but if it doesn’t, or if you like doing everything manually, then you can also manually install WordPress using FTP to transfer files. Follow these steps:

Installing via FTP

Looking for a better way to host your website?

Transfer your website to the fastest web hosting platform with 24/7 dedicated support.

  1. Download all the latest version of WordPress from the official website and unzip the archive.
  2. Make use of a FTP client to upload the files to your hosting account. A recommended choice will be FileZilla but you can use any other client too. All the FTP details you might need will be found in the FTP access section on your account. If you need help with anything related to FTP, see this tutorial.
  3. Once done, login to your control panel to create a MySQL database which will store all the information that your website will need. From your Hostinger control panel, move over to the MySQL databases section. Once prompted, enter the following details: Database name, Database username and password. Click on Create and you are done.Create MySQL database and user on Hostinger
  4. As a fourth step, you need to run the 5 minute installation wizard. All the previous steps are prerequisites for this step so make sure that all the files have been uploaded and the database has been created before you proceed. You will have to perform the following 6 steps to complete the installation:
    1. Select your language and press Continue.
    2. You will now be asked about the database details. As we have already created the database, click on the Let’s go! button.
    3. Here you will write the MySQL database credentials and the hostname. To check your hostname click on the same MySQL databases section present in the Hostinger control panel.
    4. Once everything has been entered, hit the Submit button.
    5. WordPress will now test the connection with your database and if all is well, you can click on the Run the install button.
    6. Now enter the site title (your website’s title), the username (of the administrator), the password (of the administrator), the email (of the administrator) and click on Install WordPress.Install WordPress Button

And that’s a wrap! WordPress is now installed on your hosting and you can login to access the admin area. If you are looking for more ways to install WordPress, you can have a look at this comprehensive tutorial.

Configuring WordPress

Now that we have put the installation behind us, we can talk about configuring our newly created WordPress website. Let’s take a look at some of the configurations you should get started with:

Delete the default page, post and comment:
  • A default “Hello world” post should be created after installation. It’s a good idea to delete it right away. To do so, go to Posts -> All posts and delete it.
  • Now go to Pages -> All pages delete Sample page.
  • Finally, go to the Comments section and get rid of the default comment.
Time zone and site language settings:
  • Go to Settings -> General and configure your timezone and language.
WordPress comments

All the settings related to comments can be found under Settings->Discussion from the WordPress admin panel. Depending on your needs, you can:

  • Allow or disallow people to post comments on new articles.
  • Decide whether you want to manually approve comments or not.
  • Configure email notifications for comments.
  • Show avatars or not.

Pro Tip:
You can also disable comments for specific pages or posts. To do so, follow these steps:

  1. Click on all posts/pages from the wp-admin area.
  2. Now click on Quick Edit for the pertinent page.
  3. Underneath Tags, you will see an option that says Allow comments. Simply disable it and you will be done.

Tweaking media settings

Once you are done with this step, your WordPress website will have better image handling. By default, after you upload an image, multiple versions with different sizes will be created which is a very inefficient practice. To change this follow these steps:

  1. Go to Settings -> Media. 
  2. In thumbnail size, put 0 against both width and height. Keep the “Crop thumbnail to exact dimensions (normally thumbnails are proportional)” option unchecked.
  3. In medium size, put 0 against both width and height.
  4. Finally put 0 against width and height in large size too.
  5. Check the “Organize my uploads into month – and year based folders” option and click on Save Changes.
Disabling directory browsing:

This is one of the more technical configuration tweak that will go a long way in enhancing the security on your website. To disable directory browsing, you will have to edit the .htaccess file. Follow these steps:

  1. Connect to your hosting account using any file client (e.g. FileZilla)
  2. Locate the .htaccess file and download it.
  3. Open the file and at the end of it, add the following line of code:
    Options –Indexes
  4. Click on save.
  5. Now re-upload the file using the FTP client.

Customizing WordPress

The visual aesthetics of your website are as important as the content itself. WordPress themes allow you to customize the design and outlook of your website according to your needs. On the other hand, WordPress plugins allow you to make your website more functional. We will look at both the entities, one by one.

Installing WordPress Themes

WordPress has a huge contributing community so the number of free and paid themes available is tremendous. A vast majority of free WordPress themes can be found here. Websites like ThemeForest are home to a multitude of free and paid themes as well. If you cannot pick the right theme for your website, check out this list of the best free WordPress themes.

Installing themes on WordPress is pretty straightforward. Follow these steps:

  1. Click on the Appearance section from the administrator area.
  2. Hit Add New button.
  3. You can search through the available themes and select the one you like. Click on Install and then Activate to shift to the newly selected theme.Installing new theme on WordPress website

If you want to add a new theme that you have purchased follow these steps:

  1. Go to Appearance and click on the Add New and then Upload Theme button. 
  2. The theme file should be in zipped form. Once prompted, you browse and upload it.
  3. Once the upload completes, click on the Activate button and your theme will then go live.

If you want a more detailed tutorial on installing themes, you can check this one out.

Customizing WordPress Themes

If you know your way around editing code files, then you can also customize the installed themes manually. This involves the modification of code written within a CSS (cascading style sheet) file which is responsible for enforcing the layout of your website. To do so, follow these steps:

  1. Go to Appearance from the WP dashboard and then click on Editor.
  2. Now click on style.css and the editor for the file should open.
  3. You can make as many edits as you want here, depending on your needs and desires and then save the file by clicking on Update file.

You can also customize your themes by modifying the contents of the functions.php file. By doing this, you can add/delete/modify features, functionality and design aspects of your theme. The functions file handles theme functions and by adding PHP code, the theme can be customized. You can read more about functions.php here.

Installing WordPress Plugins

Plugins make the life of a website owner easier and are very beneficial in the short-term and the long-term for your website. By the simple installation of a plugin, you can add functionalities to your website without having to write a code or changing configuration files. Just like themes, there are thousands of free and paid WordPress plugins available. Here are a few that are must-haves for your website:

  • Wordfence security: This plugin will keep your website safe, secure and away from the reach of potential hackers. From firewall to threat defense to security scans, this plugin has it all.
  • Google XML Sitemaps: Google’s official plugin for automatic generation of XML site maps will help you in better search engine optimization.
  • Yoast SEO: One of the most popular SEO plugin for WordPress, Yoast SEO has over 5 million active installations. Be it meta-tags or page analysis, with Yoast SEO, you won’t have to look anywhere else for your SEO fixes.
  • Contact Form 7: A simple WordPress plugin to make a contact form. It is very easy to install and you can create responsive contact info and lead generations form with it.

Installing WordPress plugin is equally easy as installing themes. Follow these steps to install:

  1. Hover on Plugins from the main menu.
  2. Click on the Add new button.Install WordPress Plugins
  3. In the search field that appears, enter the name of the plugin you want to install.
  4. Now click on Install now.
  5. Once the installation finishes, click on the Activate button.
  6. However, if you have purchased one of the premium plugins, you will not find it in the official directory and will have to manually upload the files. To do so, follow these steps:
    1. Click on the Add New button after hovering near plugins.
    2. Now click on the Upload plugin button at the top.
    3. Click on browse and select the archived plugin file.
    4. Once the upload completes, install the plugin as before and then activate it.

A more comprehensive guide to installing plugins on WordPress can be found here.

Adding Content to WordPress

On WordPress content can be added in two ways: you can either create a new post or a new page. The difference between the two lies in the fact that posts can be divided into categories and they can be tagged and/or archived. Posts are normally blog entries or articles that are displayed in chronological order on your website and can be referred to as time-sensitive content. On the other hand, pages are static. Examples of pages can be about us or contact us pages.

Adding a new post or page on WordPress:

To create a new post on your WordPress website, follow these steps:

  1. Hover over to Posts or Pages depending on what you want to create and click on Add new.
  2. Now you will have to provide the details of your post/page. The content of the post will come in the giant box below. You can format your text or add images using the toolbar available.WordPress Add New Post
  3. You have the following meta-boxes available at your disposal towards the right of the screen:
    • Publish: You can either save the post as a draft or preview it before publishing it. You can change the visibility and the status of your post and as soon as you hit Publish, your post will go live.
    • Tags: Using tags, you can add tags to your post. This option is not available for pages.
    • Featured image: This allows you to add a featured image to your post. The position of the image can vary depending on the theme.
    • Categories: Assign your post to a category using this section. If you want to create a new category, you can do so by clicking the + Add new category button. This option is not available for pages.
Adding a static front page:

When you add your posts to WordPress, by default, it will show the most recent ones in reverse chronological order on your website’s front page. It’s often desirable to have a static front page to your website that greets the user instead of a list of posts. Creating a simple static front page is easy; follow these steps:

  1. Login to your WordPress administrator area.
  2. Go to Pages -> Add new page.
  3. Title the new page as home.
  4. It’s possible that your current theme allows you to change the aesthetics of your front page; if so, choose the templates from the page attributes panel box.
  5. You can add the desired content in the content box and hit publish.
  6. Now go to Settings -> Reading.
  7. Choose the A static page radio button and then from the dropdown menu select Home.
  8. Click on Save changes.

There is a lot more that you can do with WordPress and we tried to cover a lot of fundamental topics that should be enough for your to get familiar with the CMS and create your first website. To know more, visit the official WordPress codex or check out this comprehensive WordPress tutorial.

Creating a Website with a Website Builder

Yet another way to create a website on Hostinger is to use website builder. It’s perfect for people who don’t want to mess with code or install CMS.

Drag and drop feature makes it extremely simple to use – you can place any kind of information: text, images, tables, galleries or forms on your website easily.

Hostinger site builder comes with more than 100 awesome templates, it’s search engine friendly and responsive by default. It means that your website will look awesome on desktop and mobile devices without any extra effort. Follow instrutions below to make a website using website builder.

Login to Hostinger control panel. Now from the dashboard, scroll down to the website section and click on Website Builder.

You will now be presented with a list of templates. They will be categorized for your ease on the left-hand side.

Ceating a Website With Website Builder Choosing a Template

You can click on Preview button to get an idea of how the website will look with the template or click on Select to move on.

For your help, a Steps to do panel will appear on the right-hand side. You can follow the recommended way of getting started. You can also press on the green question mark to see the explanation of site builder menu.

Website Builder Legend

The template should have some default dummy content loaded on the website. The first thing you should do is change it to depict what your website is about. You can do so by clicking anywhere on the website where the text is written. You can also change the color, formatting or size of the text by using the editing toolbar.

To add new text, you can click on the Text option from the menu and drag it anywhere on the canvas.

To add a new picture, you can click on Picture and then drag on the canvas. As soon as you release the cursor, a window will open, via which you can choose the picture. Once uploaded, you can drag it around to cater to your desires.

You can add a new menu using the Menu option from the toolbar. Once created, you can modify the different menu items.

You can also add maps or social media integrations using simple drag and drop.

With the Advanced selection, you get options like Skype, Music, HTML, Calendar and AdSense etc.

Commerce section will find tools and most popular payment gateways. Use them if you want to create an e-commerce website.

The Auto-layout button at the top of the page will help you in aligning all the elements on the canvas automatically and saving you from manual designing. If however, you don’t like the result of pressing the button, you can always undo it by clicking on the Undo button.

When you have made all the changes, additions and tweaks that you wanted, you can publish the website by clicking on the Publish button at the top left. You can also save the website as a draft by clicking on Save draft.

Creating a Website from Scratch

In this section, we will show you how you can build a static website from scratch, using the powers of HTML and CSS. A static website is one that doesn’t change depending on the accessing user and has a fixed content. It can have its advantages and its disadvantages; let’s have a look at some of them:

Pros:

  • Static websites are fast.
  • Static websites don’t link to any databases.
  • Considerably easy to setup compared to their dynamic counterparts.

Cons:

  • Takes more time to manage and update content.
  • There is no way to display any content dynamically to a user.

All you will also need code editor. Some of the best code editors are:

  • Notepad++
  • TextWrangler
  • Sublime Text

Starting with a basic HTML page

Hypertext Markup Language (HTML) is a markup language for creating web pages.

Open the code editor you are using and paste this into the empty file.

<html>
<head>
<title>Your website’s title here</title>
</head>
<body>
<p>
This is where the content comes.
</p>
</body>
</html>

Now click on save as from your code editor and save the file with a .html extension (e.g. website.html).

Open the saved file in your browser. Obviously, the page looks ridiculously ugly and nothing like what you thought your first website would look like but this is all it takes to make a basic webpage. Let’s carry on.

Adding CSS to make things look better

CSS stands for cascading style sheets and allows you to design your website and implement styles consistently throughout it. With it, you can use fonts for specific areas of your website, change colors for some sections or change the background of your website etc.

To make a style sheet, open a new text file and save it with the name style.css. It should be saved in the same directory that has your homepage HTML file. To make the index file read design cues from the CSS file, establish a link between the two by adding this line within the <head> tag:

<link rel="stylesheet" type="text/css" href="style.css">

By now, all we have done is link the CSS file and the HTML file. Let’s now divide our website into 5 sections and two columns using CSS. Insert the following code in your CSS file:

body {background: #F6E7E7; margin: 0 auto; padding: 0;text-align: center;}
a {color: #310909;}
#container {width: 1000px; margin: 0 auto; padding: 0; background;}
#header {width: 1000px; 	height: 180px; 	margin: 0 auto; padding: 0; border: 0; background: #f346e1;}
#sidebar {width: 300px; height: 410px; 	margin: 0; padding: 0; border: 0; float: left; background: #E83535;}
#content {width: 700px; height: 410px; 	margin: 0; padding: 0; border: 0; float: left; background: #8be0ef;}
#footer {width: 1000px; 	height: 70px; 	margin: 0; padding: 0; border: 0; float: left; background: #000000; color:#eee; clear:both;}

The background values can control the color of the different sections and you can change them according to your own wishes. So, we have five sections in the page: container, header, sidebar, body and footer. The names of the sections indicate their functions; the container area basically covers the entire website. Its width can be changed from 1000px to anything else if desired but you have to ensure that you change the dimensions of the other sections as well to make everything aligned. You can configure the width, heights and colors of all the sections according to your own desires and once done, update your homepage file to this:

<html>
<head>
<title>Your website’s title here</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container">
<div id="header"><p>Header Goes Here</p></div>
<div id="sidebar"><p>Left Navigation Goes Here</p></div>
<div id="content"><p>Content Goes Here</p></div>
<div id="footer"><p>Footer Goes Here</p></div>
</div>
</body>
</html>

Here, as you can see, we have used the <div> tag to divide our website into different sections and by setting the id, we set specific design considerations for them as well which will be read from the CSS file.

Creating a simple website with HTML and CSS

There is a lot more that you can achieve by using just CSS and HTML.

Playing around with fonts

If you don’t add any font specifications in the CSS or HTML file, you will be displayed text in the default font type of your computer (normally it’s Times New Roman). Using CSS however, you can change the font styles to be in tune with your desires or needs.

#content p {font-family: Open Sans; font-size: 18px}

When you add the above line of code to your style sheet (after the #content section), it will make the paragraph text use the Open-Sans font and the size of the text will be maintained to 18px.

Adding hyperlinks

While making a website, sometimes you need to link to an external website or to a different part of your own website. This link that, when clicked, takes you to a different section on your own website or to an external one is called a hyperlink. The “href” specifies the link’s destination whereas the <a> tag defines the links. Don’t worry, we will share an example:

Add this <a href=”https://www.google.com”>Go to Google</a> tag to your website’s body, it will appear as Go to Google and when a visitor clicks on it, they will be taken to Google’s homepage.

Adding images

With HTML, it’s as easy as using a tag and referencing to your image. The <img> tag allows you to add images. Here’s how to use it:

<img src="cat.jpg" alt="Cute Cat">

Within the quotation marks following src, you will add the location of the image. In this case, the image should be present in the same directory as your index file. The string following alt will only get displayed on the browser in case the image was unable to load.

Creating tables

Organizing information often becomes a design or functional requirement and in HTML, you can also do so by using tables. You can do so by using the <table> tag. To specify a header in the table, you use the <th> (table header) tag and for a row you have to use the <tr> (table row) tag. For the table data, the <td> tag is used.

<table>
<tr>
<th>My Header 1</th>
<th>My Header 2</th>
<th>My Header 3</th>
</tr>
<tr>
<td>Data 1 for header 1</td>
<td>Data 1 for header 2</td>
<td>Data 1 for header 3</td>
</tr>
<tr>
<td>Data 2 for header 1</td>
<td>Data 2 for header 2</td>
<td>Data 2 for header 3</td>
</tr>
<tr>
<td>Data 3 for header 1</td>
<td>Data 3 for header 2</td>
<td>Data 3 for header 3</td>
</tr>
</table>

After applying the above code, your website should look like this. Final Result of Website Created with HTML and CSS from scratch
When you are working with HTML and CSS, the possibilities to play around and make your website more functional and more aesthetically pleasing are endless. We just covered some of the most fundamental concepts that you should be aware of to get started and make your very own website from scratch. The Internet is full of great tutorials and interactive tools which will help to learn coding:

Final Word

In this tutorial, we intended to help newbies get their hands on a canvas with website builders and show how they can build a website using WordPress or even from scratch. Whatever pathway you might have chosen to create your website, we hope that you got it right and wish you the best of luck in running and maintaining it.

2 Comments

Click here to post a comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  • Hello Domantas, Fantastic post. You have touched almost all corner of website development. You have mentioned all three processes in depth. No one can deny that developing website with WordPress CMS has enormous advantages over others. However, sometimes, you are not a tech guy, there are some security and speed issues which can not be solved by yourself. So, if you are not having much technical knowledge about the coding, you should go with the website builder which is a much safer option.

More in Website
How to Create Classes for a Responsive Website on a CSS File

Close