One of the first steps to configure your digital identity is site setup. Thanks to the developments in website development, “How to make a website?” There are many answers to the question. We can use a content management system, we can use a website builder, or we can opt for old methods and install sites from scratch. In this guide we will talk about all these methods and show you how to make a website.

If you’ve never set up a website before and don’t know how to set it up, don’t worry. In this guide we will explain all the processes.

  • Step 1 – Platform Selection
  • Step 2 – Hosting and Domain
    • Choosing Web Hosting
    • Domain Name Selection
  • Step 3 – How to Make a Website
    • Option 1 – Site Setup with WordPress
    • Option 2 – How to Build Website with Website Builder?
    • Option 3 – How To Make A Website From Scratch

Step 1 – Platform Selection

As we mentioned before, there are 3 main ways to setup the site.

  1. Using CMS – Content Management System: You can think of content management systems as advanced developer tools that can be used to publish the content that creates websites and websites. When it comes to CMS, the real leaders of the market are WordPress , Drupal and Joomla. All 3 vehicles are free and open source. But definitely WordPress is the most adaptable. All 3 systems are developed with PHP and all use templates / themes for appearance. All are strengthened and guided by the community. Given the usefulness, simplicity, ease of maintenance, community size and number of free themes & plugins, absolutely none can compete with WordPress. For those who don’t have the ability to develop, WordPress is the definitive option.
  2. Using the Site Builder: The world of automation has reached a new dimension since website founders started to appear. Although options were limited in terms of design and functionality customization at first, it is possible to create wonders in the modern website builder by simply dragging and dropping. Website builders are fast, efficient and perfect for those who do not have development experience compared to content manager systems and website creation from scratch and do not want to spend a lot of time on site setup.
  3. Coding a Website from Scratch: The third option is to install a site from scratch. Especially for users with a simple developer experience, it can be an adventure full of question marks. The technologies used in this guide to create a stable website are HTML and CSS. We suggest that those who want to learn how to make a real website should take a look at this method even if they do not prefer this method.

Step 2 – Hosting and Domain

Your website is like a building, and like every building, it needs an address that users can access and a place to stay. To learn how to make a website and publish your site on the internet, you must take web hosing and give it an accessible address, that is, a domain name. Let’s look at both of them:

Choosing Web Hosting

A good web hosting provider will do all it can to ensure quality, efficiency and high uptime. Hostinger provides web hosting service that provides the mentioned standards (and more) at very cheap rates . Here are a few reasons to join Hostinger, chosen by millions of users:

  • Hostinger hosting service is optimized for WordPress (ex: WP CLI, WordPress caching, etc.)
  • You have an extremely easy-to-use website builder to create a great website.
  • PHP websites run easily on Hostinger hosting services and are highly developer friendly. Laravel, you can run CodeIgniter, integrate with GIT and access your servers via SSH.
  • SSL certificate is also provided by Hostinger.
  • 30 days trial before purchasing allows you to experience the whole service with your own hands.
  • If you choose a Premium or Business plan, you will also receive a free domain name.
  • You can have as many e-mail addresses as you want. (Yes, unlimited!)
  • If you have problems with your website or have some questions, the support team is available to help you 24/7/365.
  • With a click, WordPress, Joomla !, Drupal etc. You can install all popular content management systems, including.

Domain Name Selection

Simply, the domain name is the name of your website. It is what you type in your browser’s address bar to enter your website. Google.com or Facebook.com are addresses.

Choosing a good domain name is also one of the most important points. Because all of your visitors will reach your site with this address and therefore you have no chance to make mistakes. Here are some suggestions to consider before choosing a domain name:

  • Keep it short: Nobody wants to visit Googleamacoklonger and unnecessarydomain.com.
  • Be fit for your brand: Your domain name should reflect what your business does.
  • Choose the correct domain extensions: Domain extensions are the part after the dot (.). .com is everyone’s preferred domain, but you may need to choose a different option depending on your needs and the nature of your website.
  • How does it sound when you say or read? Your domain name should be easy to say. So that people can easily voice while chatting.

Like all hosting providers, Hostinger provides a domain name registration service. You can choose your domain name by using the regular domain inquiry service here.

Domain Search

Even better, when you choose a Business or Premium hosting plan, you get the domain address for free. (Yes, it’s completely free!) You can purchase next generation .xyz domains for an incredible price of 3.99 TL per year.

Step 3 – How to Make a Website

Now that we have laid the basics, we can start the fun part. Now that you have decided which domain to use and where to host your site, you can start preparing your own website. We explained how to make a website with 3 methods (using WordPress, using website builder, site setup from scratch). Make your choice and start trying.

Option 1 – Site Setup with WordPress

If you are reading this, you have chosen the best content management system. We can say that you made the right choice. Let’s take a look at the steps.

WordPress Installation

Installing WordPress is as easy as just a few clicks. Although the auto installer does all the hard work for you, we have also added the manual WordPress installation using FTP.

Installation with automatic installer:
  1. Log in to your hosting account and click on the Auto Uploader icon from your control panel .
  2. In the search section, type WordPress and click on the icon in the search results.
  3. Fill in the URL (your website address – you can also leave it blank if you want to upload WordPress to the home directory.), Language, username, password, email, WordPress title, WordPress slogan fields and click the Install button.

That’s it! WordPress is now installed. Auto Uploader is unlikely to work for you, but if it doesn’t work or you enjoy doing everything manually, you can also transfer WordPress files by FTP and install them manually. Follow these steps for manual setup:

 Installation via FTP:
  1. Download the latest version of WordPress from its official website and open the archive.
  2. Use the FTP client to upload to your hosting account. A recommended client is FileZilla, but you can also use any other client. You can find all the FTP details you may need in the FTP Account section of your account’s control panel. If you need help with FTP, check out this guide .
  3. Once the transfer is complete, enter your control panel and create the MySQL database required for your website. Access the MySQL Databases section in your Hostinger control panel. Enter details when prompted: Database name, username and password. Then click the Create button.
  4. As a fourth step, you should run the 5-minute setup wizard. You must complete the first three steps before proceeding with this step. You should make sure that all files are loaded and that the database has been created. To complete the setup, you must complete the 6 steps below.
    1. Choose your language and click Continue .
    2. You will now be asked to enter database details. Let’s Get Started because we have already created the database Click the button.
    3. Here you will write your MySQL database login information and host name. If you do not know your host name, you can consult the MySQL Databases section of your control panel to find out .
    4. After entering everything, click the Submit button.
    5. WordPress will now test your connection, and if everything is fine, you can click the Install button.
    6. Now enter your website title, admin username, password and email address. Then you can click the Install WordPress button.

That’s it! Your WordPress hosting account has been installed and you can now login to the WordPress admin area. If you are looking for more methods on WordPress installation, you can check out this comprehensive guide .

Configuring WordPress

Now that we have completed the installation, we can talk about configuring our newly created WordPress site. Let’s start with the configurations you need to do:

Delete default page, post and comment:
  • The default “Hello World” script should have been created after installation. It is a good idea to delete this article immediately. To delete, go to Articles> All articles and delete.
  • Now go to Pages> All pages and delete the sample page.
  • Finally, enter Comments and get rid of the default comment.
Time zone and site language settings:
  • Go to Settings> General and set your time zone and language settings.
WordPress comments:

All settings related to comments can be found in the Settings> Discussion section of the WordPress admin panel . You can do according to your needs:

  • Allow or disallow comments on new posts.
  • Decide if you want to manually check the comments before they are published.
  • Configure email notifications for comments.
  • Show or hide avatar pictures.

Proposal:

It is also possible to disable commenting on specific pages or posts only. To do so, follow these steps:

  1. Click on all posts / pages in the WordPress admin area.
  2. Now click on the relevant Edit.
  3. You will see the option that allows comments under the labels. Simply disable it and you are ready.
Environment settings:

When you complete this step, your WordPress website will handle the pictures better. When you upload an image by default, many different sizes of the image are created, which is not an efficient method. To replace it, follow these steps:

  1. Go to Settings> Media .
  2. In the thumbnail size section, enter 0 in both Width and Height. Make sure the “Crop clip to full size (this is normally done by the rate of operation)” is not checked.
  3. In the medium size setting, enter 0 in the Width and Height sections.
  4. Finally, enter 0 in the Width and Height sections of the Large size section.
  5. “Keep my uploads in folders on a monthly-and annual-basis.” Check the option and click the Save Changes button.
Disable directory browsing:

This is a slightly more technical configuration and plays an important role in improving the security of your website. To disable directory browsing, you need to edit your .htaccess file. Follow these steps:

  1. Connect to your hosting account with any FTP client (eg FileZilla).
  2. Find and download the .htaccess file.
  3. Open the file and add the following code at the end.Options –Indexes
  4. Save.
  5. Now restore it with 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 appearance of your website according to your needs. On the other hand, WordPress plugins also make your website more functional. We will touch on both points one by one.

WordPress Theme Setup

WordPress has a large active community. Therefore, the directory of free and paid themes is immense. Many free WordPress themes can be found here . Websites such as ThemeForest host free and paid themes. If you can’t choose the right theme for your website, check out the list of the best free WordPress themes .

It is very easy to install a theme in WordPress. Follow these steps:

  1. Click View in the Admin area .
  2. Click the Add new button.
  3. You can browse the available themes and choose the one you like. You can switch to the new theme by clicking the Install button and then clicking the Activate button.

If you want to install a theme you have purchased, follow these steps:

  1. Enter the view and click the Add new button.
  2. The theme file should be in archive form. Click the Install Theme button and in the window that opens, find and install the theme on your computer.
  3. Click the Activate button when the installation is finished and your theme will be published on your site.

If you need a more detailed guide on installing themes, check here .

Customizing WordPress Themes

If you know how to edit the code files, you can manually customize the themes you have installed. This customization involves editing CSS (cascading style sheet) files that are responsible for the layout of your site. The steps you can follow to edit the CSS file:

  1. Enter View in WordPress admin panel and then continue to Editor .
  2. Now click on style.css and the screen will open to edit this file.
  3. You can arrange as much as you want here according to your needs and tastes. When done, click the Update File button.

You can also customize the theme files by editing the functions.php file. This way you can add / remove / edit features, functionality and designs for your theme. The Functions file deals with theme functions and the theme can be customized by adding PHP code. You can read more here with functions.php .

WordPress Plugins Setup

Plugins make the life of website owners easy and are very useful for your website in both the short term and the long term. With a simple plugin installation, you can add functionality to your website without writing any code or editing an configuration file. Like themes, there are thousands of free and paid WordPress plugins. Some plug-ins that should be on your website:

  • Wordfence security : This plugin will keep your website safe from potential hackers and will ensure your site’s security. It has every feature like firewall, threat defense, virus scan.
  • Google XML Sitemaps : You can use Google’s official plugin that generates XML sitemaps to assist you in search engine optimization. More
  • Yoast SEO : With more than 5 million active installations, it is one of the most popular in WordPress SEO plugins. Whether it is meta tag or page analysis, Yoast SEO will see all your needs.
  • Contact Form 7 : It is a simple plugin to add contact form. It is very easy to install and you can create a responsive contact form with this plugin.

Installing a WordPress plugin is as easy as installing a theme. Follow these steps to install the plugin:

  1. Move the mouse cursor over the Extensions menu item.
  2. Click the Add New button.
  3. In the search section that opens, type the name of the add-on you want to install.
  4. Click the download now button.
  5. When the installation is complete, click on the Enable button.
  6. But; if you bought one of the premium plugins you won’t find it in the official directory and you have to install it manually. Follow these steps to install manually:
    1. Move the mouse cursor over the Add-Ins menu item and click Add New .
    2. Now click the Install Plugin button at the top .
    3. In the section that opens, select the archive file of the plugin from your computer and click the Install now button.
    4. Once the installation is complete, install and activate the plugin as usual.

A more detailed guide on how to install WordPress plugins can be found here .

Adding Content to WordPress

Content can be added to WordPress in two ways: You can create a new post or a new page. The difference between the two is that the articles can be categorized. Articles can also be tagged and / or archived. Posts are usually blog posts or articles displayed in chronological order on the website. On the other hand, the pages are fixed. Examples of pages can be “About Us” or “Contact”.

Adding a new post or page to WordPress:

Follow these steps to create a new post on your WordPress site:

  1. Hover your mouse cursor over the Posts or Pages menu item according to your preference and click Add New .
  2. You can now enter the details for your page / post. The content of your post is written in the big box below. You can edit your post or add pictures with the toolbar.
  3. You can see the following boxes on the right side of the page:
    • Publish: If you wish, you can save and preview this article before publishing it. You can change the visibility and status of the post and when you click the Publish button, your post will be published on your site immediately.
    • Tags: You can tag your articles using tags. This option is not available for pages.
    • Featured image: This option allows you to add a featured image to your post. Where the image will appear may vary depending on your theme.
    • Categories:  Assign your article to a category using this section. If you want to add a new category, you can do so by clicking the + Add new category button. This option is not available for pages.
Adding a fixed front page:

When you add posts to WordPress, by default, the most recent ones in the reverse chronological order will appear on the homepage of your website. Sometimes it may be more preferable to welcome your visitors with a fixed homepage instead of showing the most recent posts on your homepage. It is easy to create a simple fixed homepage. Follow these steps:

  1. Enter your WordPress admin area.
  2. Continue to Pages> Add new .
  3. Name the new page as “Home Page” or a similar title of your choice.
  4. Your current theme may offer several options for the display of your homepage. If so, select the template from the page’s properties panel box.
  5. Enter the content of your homepage in the content box and click the Publish button.
  6. Now go to Settings> Reading .
  7. In the Home page display setting, check the Fixed page radio box and select the home page you created in the selection box.
  8. Click the Save Changes button.

There are many more customizations you can do with WordPress. We talked about the most important ones that will be enough for you to meet WordPress and set up your first website. To learn more, visit the official WordPress codex or browse this comprehensive WordPress directory .

Option 2 – How to Build Website with Website Builder?

Another way to set up a site in Hostinger is to use a website builder . Perfect for those who don’t want to set up a content management system or mess with code. Especially, it is the choice of new users who do not know how to make a website.

Drag & Drop makes it extremely easy to use. You can easily add all kinds of items such as text, images, tables, galleries or forms to your website.

Hostinger site builder comes with more than 100 great templates, is search engine friendly and is responsive by default. This means that your website will look great on both desktop and mobile devices without any additional processing. Follow the instructions below to learn how to design a website with a website builder.

Login to your Hostinger control panel. On the control panel of your hosting account, scroll down to the Website section and click on the Website Builder icon.

You will now be greeted by a list of templates. You can find the template categories for convenience in the left column.

Build Site with Website Builder

You can click the Preview button to have an idea of ​​how the website will look with the template, or you can click the Select button to continue .

There are steps to do in the box on the left to help you. You can follow the suggested way to get started. You can reach the description of the site builder menu by clicking the green question mark box at the bottom right.

Site Builder Help Description

The template should have added some default sample content to your website. The first thing you need to do is replace them with content that suits your website. You can do this by clicking anywhere with text. Likewise, you can change its color, format or size using the toolbar.

Text Editing Toolbar

To add new text, click the Text icon in the menu and drag it to where you want it to appear on your site.

To add a new picture, you can click on the Picture icon and drag it to your site. A window will open for you to select the picture as soon as you release it. You can drag and drop it where you want it to appear when loaded.

You can also add a new menu with the Menu option in the toolbar . You can edit different menu items when created.

You can also add maps or social media integrations with the same drag & drop method.

In the advanced part, Skype, Music, HTML, Calendar, AdSense etc. You have options like.

The Auto Layout button at the top of the page automatically aligns all items on your site and saves you from manually designing. But; If you are not satisfied with the layout you encounter after clicking the button, you can always undo the process by clicking the Undo button.

When you have completed all the changes, you can publish your site by clicking the Publish button. Similarly, you can save your changes as a draft by clicking the Save draft button.

Option 3 – How To Make A Website From Scratch

In this section we will show you how to make a website from scratch using HTML and CSS powers. A fixed website does not differ according to the user accessing it and always shows certain content. It has advantages and disadvantages. Let’s take a look at some of them:

Pros:
  • Fixed websites are fast.
  • Fixed websites are not connected to any database.
  • Compared to its dynamic counterparts, the site is easier to set up.
Cons:
  • It takes longer to manage and update the content.
  • There is no way to dynamically show the visitor content.

In addition, you will need the code editor. Some of the best code editors are:

  • Notepad ++
  • TextWrangler
  • Sublimation Text

Starting with a simple HTML page

Hypertext Markup Language (HTML) is the language used in site setup.

Open the code editor you are using and paste the following on a blank page.

<Html>
<Head>
<title> Your website's title here </title>
</ Head>
<BODY>
<P>
This is where the content comes.
</ P>
</ Body>
</ Html>

Now save the page in your code editor with the .html extension (ex: site.html).

Open the page you saved in your browser. The page will look ugly and maybe it is not the edge of your website design, but we will start here to learn how to make a simple website. Let’s go on.

Add CSS to make it look more beautiful

CSS is an acronym for cascading style sheets and is used to consistently add style to your website. With CSS, you can determine the font, color or change the background color of your website in certain parts of your site.

To create a style file, open a new text file and change its name to style.css . Save it in the same directory as your homepage’s HTML file. In order for the HTML file to read design codes from the CSS file, they must be linked. You <head>can establish the link by adding the following line between the tags in the HTML file .

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

So far, all we do is link CSS with HTML files. Let’s now divide our website into 5 different sections and two columns with CSS. Add the following code to 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: #ee to; clear: both;}

Background values ​​determine the color of different parts and you can change them according to your wishes. Thus, our site has 5 different parts: container, header, sidebar, body and footer. The names of these parts represent their function. The Container section contains the entire website and its width is set at 1000px. It can be changed with a different value when desired, but note that the values ​​of other parts will also need to be changed in a relevant manner. You can change the width, height and color of the portions according to your own preferences. When you have completed the changes, save and update your homepage as follows:

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

As you can see here, we used the <div> tags to divide our website into different parts . We have defined the id property to apply CSS rules.

How to Make a Website with HTML

There are many more options you can change using CSS and HTML.

Playing with fonts

If you do not specify any font in the CSS or HTML file, the text will be shown in the default font of your computer, which is usually Times New Roman. Using CSS, you can change the font according to your default requests and needs.

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

Adding the above line of code to your style file (after the #content section) will make the paragraph text use the Open-Sans font and the font size will be 18px.

Adding links

Sometimes you may need to link to an external website or to another part of your own website while making a website. These links that take you to another place when you click on them are called hyperlink. “Href” determines the target of the link and the <a> tag represents the link. Don’t worry, we’ll share an example:

<a href=”https://www.google.com”>Google'a Git</a>Add this to the body of your website . It will appear as Go to Google , and when the visitor clicks on it, they will reach Google’s home page.

Add pictures

Adding images with HTML is as easy as adding tags and specifying the path of the image. <img>The tag allows you to add images. Here’s how it’s used:

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

You must enter the path of the picture between the quotation marks after src. In this case, the image should be in the same directory as your HTML file. Text in quotes after alt will only be shown if the image cannot be loaded.

Create tables

Organizing information is sometimes necessary in terms of design, sometimes functionality. In HTML, you can do this with tables using the <table> tag. You can use the <th>(table header) tag to specify the header <tr>row in the table , and the (table row) tag to identify the rows, and finally the <td>table data tag to determine the data.

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

Zerosan Site Setup Result

When working with HTML and CSS, the options are endless to make your website more aesthetically pleasing. We have touched on some basic concepts that can help you when building your website from scratch. The Internet is packed with a bunch of great guides and interactive tools to help you learn and code:

Result

In this guide, we showed beginners how to use website builder, how to make a website with WordPress and even how to code a site from scratch. No matter which way you choose to set up your website, we hope you have chosen the right way and we wish you good luck publishing your site.