Website

How TO - Make a Website
How to create a responsive website that will work on all devices, PC, laptop, tablet, and
phone.
Create a Website from Scratch

Demo
A "Layout Draft"
It can be wise to draw a layout draft of the page design before creating a website:
Header
Navigation bar
Side Content
Some text some text..
Main Content
Footer
First Step - Basic HTML Page

HTML is the standard markup language for creating websites and CSS is the language that
describes the style of an HTML document. We will combine HTML and CSS to create a basic web
page.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Page Title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<h1>My Website</h1>
<p>A website created by me.</p>
</body>
</html>
Try it Yourself »
Example Explained
 The <!DOCTYPE html> declaration defines this document to be HTML5
 The <html> element is the root element of an HTML page
 The <head> element contains meta information about the document
 The <title> element specifies a title for the document
 The <meta> element should define the character set to be UTF-8
 The <meta> element with name="viewport" makes the website look good on all devices
and screen resolutions
 The <style> element contains the styles for the website (layout/design)
 The <body> element contains the visible page content
 The <h1> element defines a large heading
 The <p> element defines a paragraph
Creating Page Content

Inside the <body> element of our website, we will use our "Layout Draft" and create:
 A header
 A navigation bar
 Main content
 Side content
 A footer
Header
A header is usually located at the top of the website (or right below a top navigation menu). It
often contains a logo or the website name:
<div class="header">
<h1>My Website</h1>
<p>A website created by me.</p>
</div>
Then we use CSS to style the header:
.header {
padding: 80px; /* some padding */
text-align: center; /* center the text */
background: #1abc9c; /* green background */
color: white; /* white text color */
}
/* Increase the font size of the <h1> element */

.header h1 {
font-size: 40px;
}
Navigation Bar
A navigation bar contains a list of links to help visitors navigating through your website:
<div class="navbar">
<a href="#">Link</a>
<a href="#" class="right">Link</a>
</div>
Use CSS to style the navigation bar:
/* Style the top navigation bar */

.navbar {
overflow: hidden; /* Hide overflow */
background-color: #333; /* Dark background color */
}
/* Style the navigation bar links */

.navbar a {
float: left; /* Make sure that the links stay side-by-side */
display: block; /* Change the display to block, for responsive reasons (see below) */
color: white; /* White text color */
text-align: center; /* Center the text */
padding: 14px 20px; /* Add some padding */
text-decoration: none; /* Remove underline */
}
/* Right-aligned link */
.navbar a.right {
float: right; /* Float a link to the right */
}
/* Change color on hover/mouse-over */

.navbar a:hover {
background-color: #ddd; /* Grey background color */
color: black; /* Black text color */
}
Content
Create a 2-column layout, divided into a "side content" and a "main content".
<div class="row">
<div class="side">...</div>
<div class="main">...</div>
</div>
We use CSS Flexbox to handle the layout:
/* Ensure proper sizing */

* {
box-sizing: border-box;
}
/* Column container */
.row {
display: flex;
flex-wrap: wrap;
}
/* Create two unequal columns that sits next to each other */

/* Sidebar/left column */
.side {
flex: 30%; /* Set the width of the sidebar */
background-color: #f1f1f1; /* Grey background color */
padding: 20px; /* Some padding */
}
/* Main column */
.main {
flex: 70%; /* Set the width of the main content */
background-color: white; /* White background color */
}Try it Yourself »
Then add media queries to make the layout responsive. This will make sure that your website
looks good on all devices (desktops, laptops, tablets and phones). Resize the browser window to
see the result.
/* Responsive layout - when the screen is less than 700px wide, make the two columns
stack on top of each other instead of next to each other */
@media screen and (max-width: 700px) {
.row {
flex-direction: column;
}
}
/* Responsive layout - when the screen is less than 400px wide, make the navigation links
stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) {
.navbar a {
float: none;
width: 100%;
}
}
Try it Yourself »
Tip: To create a different kind of layout, just change the flex width (but make sure that it adds
up to 100%).
What is box-sizing?
You can easily create three floating boxes side by side. However, when you add something that
enlarges the width of each box (e.g. padding or borders), the box will break. The box-
sizing property allows us to include the padding and border in the box's total width (and
height), making sure that the padding stays inside of the box and that it does not break.
Footer
At last, we will add a footer.
<div class="footer">
<h2>Footer</h2>
</div>
And style it:
.footer {
text-align: center; /* Center text*/
background: #ddd; /* Grey background */
}Try it Yourself »
Hosting a website means that you put your website files on a special computer called a server. This
computer makes your website files publicly accessible on the internet, so anyone can visit it.
In order for other people around the world to see the website, these special computers have a particular
set of software installed. This software is called a web server.
A web server’s basic job is to receive incoming requests and respond by sending the requested page to
the user’s browser.
Now all of this may sound like a bunch of technical jargon, and it is.
However, you don’t need to learn how to do all these things in order to host your website. Luckily, there
are thousands of companies that offer this as a service (at a very low cost).
All websites on the internet use a web hosting company to host their websites. Even tech giants like
Netflix (hosted on Amazon) and PayPal (hosted by Google Cloud hosting) use third-party service
providers for their hosting.
There are only a handful of companies like Google, Microsoft, and Amazon that completely host all their
services on their own platforms.
They can do this because they have the technical and financial resources to take on such a huge task. All
other businesses (including us) use a web hosting company to host their website.
You will need the following two things to host a website.
 Web hosting service provider

 Domain name
Web hosting service providers offer you ready-to-use web servers to host your website. They take care of
all the technical stuff and provide website owners with easy to use tools to manage their hosting.
Now, how do users reach your self-hosted website? This is where domain names come in.
A domain name is the address of your website that people type in the browser to visit your website. For
example, wpbeginner.com will bring you to this website.
Basically, a domain name is a human-friendly way to connect users’ browsers to the website server
associated with that domain name.
You can purchase a domain name from one of these top domain registrars. These are companies licensed
to sell domain name registrations.
To understand the relationship between your web host and domain, see our guide on the difference
between web hosting and domain name.
But first, let’s take a look at different types of web hosting plans and evaluate which one would be the
right fit to host your website.
Types of Website Hosting Services

Not all websites are the same. Some are smaller and have low traffic, while others are larger with more
content and visitors.
A smaller website requires fewer resources, such as disk space and bandwidth. On the other hand, a larger
and more popular website will need more resources to run efficiently.
Website hosting companies provide different types of hosting offers designed to address specific website
needs. Here are some of the most common hosting options.
1. Shared Hosting
A shared hosting service is suitable for small websites, blogs, and small businesses that are just starting
out.
They are able to keep their costs down by allowing multiple websites to share the same server resources.
This makes hosting your website affordable.
Pricing: Starting from 2.75 per month to $7.99 per month
Suitable for: Starting a new blog or small business website.
Our recommended shared hosting provider: Bluehost
To learn more, see our guide on the truth about best shared web hosting.
2. VPS Hosting
VPS hosting (Virtual Private Server hosting) is still a shared hosting environment. However, it offers a
flexible set of resources to handle large traffic spikes.
You get a partitioned-off private server for your website that you can manage from your hosting control
panel. This gives you the best of both worlds, the low cost of shared hosting with the flexibility of
dedicated resources.
Pricing: Starting from $29.99 / month
Suitable for: Medium-sized businesses, popular blogs, and eCommerce stores.
Our recommended VPS hosting company: HostGator
To learn more, see our article about when you need VPS hosting for your site.
3. Managed WordPress Hosting

Managed WordPress hosting is a specialized hosting service made specifically for WordPress. It is like a
concierge service for your WordPress website.
On a managed hosting platform, the hosting company takes care of updates, backups, and caching of
your website. This allows you to focus on creating content and growing your business.
Pricing: Starting from $35.00 per month
Suitable for: Popular blogs, business websites, membership websites.
Our recommended managed WordPress hosting company: WP Engine
For more details, see our article explaining when you really need managed WordPress hosting.
4. Dedicated Hosting
A dedicated server hosting gives you the entire server dedicated to your own website. You get all the
resources of the server, advanced tools for server management, the ability to install your own software,
and even your own operating system.
You’ll be managing your own server, which may require some technical skills. It is an advanced option for
larger websites that need high-performance to tackle higher traffic volume.
Pricing: Starting from $79.99 per month
Suitable for: Enterprise-level businesses, hugely popular websites, eCommerce stores.
Our recommended Dedicated hosting company: SiteGround or HostGator.
Note: We use SiteGround custom dedicated servers to host the WPBeginner website.
For a visual comparison, we have created an infographic that you can use to pick the best type of web
hosting.
Choosing The Right Plan to Host a Website

As you can see, all different hosting plans come with different server configurations and pricing. You’ll
need to choose a plan that suits your needs and budget.
At WPBeginner, we recommend users start with a low-cost shared hosting plan and then upgrade as their
business grows. This allows you to save money and only pay for the services that you actually need.
Shared hosting plans start from $7.99 per month (paid annually) and $14.99 for a domain name.
Now, if you are just starting out, then this is still a significant investment.
Luckily, Bluehost has agreed to offer our users a discount on hosting and a free domain name. Basically,
you’ll be able to get started for $2.75 per month.
They are one of the largest hosting companies in the world and an officially recommended WordPress
web hosting provider. They offer a free SSL certificate and great customer support.
Once you have signed up for a hosting account, the next step is to create your website.
How Much It Costs to Host a Website

So far, we have covered the costs of web hosting companies. However, the costs of hosting a website may
vary depending on several factors.
The first thing is the hosting plan you choose. We recommend starting with smaller shared hosting plans
and then upgrading as your business and website grows.
Once you start building a website, you may need to spend money on other things as well, such as website
templates, software extensions, and other services.
Your goal would be to only buy what you actually need and use free tools whenever you can.
How to Host a Website on Your Computer

We are often asked by our users if they can host a website on their own computer.
Yes, you can.
However, the only reason you should host a website on your computer is when you want to test a site
locally before putting it on the internet.
A lot of beginners find it useful to learn web development, WordPress, and coding by installing a local
server on their computer.
This will allow you to install a local server without making it publicly available.
We don’t recommend using a local server to host a website and make it publicly available. However, we
will show you how to do that step-by-step for users who are feeling adventurous.
Putting Your Local Host Server Online

Once you host a website on your local server, it will only be available to you. You’ll need to change its
settings to put your website on the internet.
First, locate your web server software’s configuration file called httpd.conf.
If you are using WAMP on Windows, then you’ll find it under C:\wamp\bin\apache\apache[version#]\conf]
folder.
MAMP users on Mac will find it inside /Applications/MAMP/conf/apache/ folder.
You can open this file using a plain text editor like Notepad or TextEdit. After that, you need to find the
line that begins with
Listen 80
You need to replace it with your IP address and port number. You can find your IP address by simply
Googling ‘what is my ip address’ it will show you a numeric string separated by dots. Here’s an example of
what that code should look like with your IP:
Listen 64.233.160.1:80
Next, you need to find the following line:
ServerName localhost:80
Go ahead and change it by replacing localhost:80 with your IP address.
ServerName 64.233.160.1
Next, you need to find the following line for WAMP:
<Directory "c:/wamp/www/">
If you are using MAMP, then look for the following line:
<Directory "/Applications/MAMP/htdocs">
Below this line, you’ll see the access permissions, which you need to replace with the following:
Order Allow,Deny
Allow from all
You can now save your configuration file and restart your local server with the new permissions.
Now anyone can use your IP address to access your website instead of localhost. This is not an ideal
situation, as it would be hard for your users to remember the IP address.
That’s where domain names come in handy.
Pointing Your Domain Name to a Locally Hosted Website

Pointing your domain name to a website that you are hosting on your own computer will allow users to
access it as they would do with any other site.
First, you need to edit your domain name’s DNS settings.
After that, you need to edit the A name record with @ sign as the Name. If you don’t have one, then click
on Add new record button to proceed.
In the value field, you need to enter your computer’s IP address and click on the Update DNS button to
save your changes.
If the computer with your local server is connected to the internet directly, then you are all done.
However, if your computer is connected to the internet via a router, then you need to forward ports. To
do that, you need to log in to your router’s admin interface by entering the router’s IP address in your
browser address bar.
Depending on the manufacturer, your router interface may look slightly different. You will need to find the
option labeled port forwarding, virtual server, or NAT.
Next, you need to forward web or HTTP traffic to port 80. In the IP address field, you need to enter the IP
address of your computer on the local network. This IP address is the internal address that identifies your
computer on the local network.
After that, you need to apply the changes and restart your router.
The next challenge is picking the right tool for uploading your website to the
internet. Here are four of the most popular tools to upload a website:
File Manager
A file manager is a browser-based tool with all the key features to take care of your
website files and directories. If you have a Hostinger account, log into the hPanel and
find File Manager under the Files section.
However, the File Manager has an upload limit. If your website files are larger
than 100GB, you should opt for the next tool instead.
File Transfer Protocol (FTP)

Most web hosting providers support FTP or file transfer protocol, which you can use to
connect to an FTP client. If you don’t have an FTP client, make sure to install one on
your PC.
For Hostinger users, all the required credentials for accessing your FTP client are
located in FTP Accounts under the Files section.
There, you can find all the important information regarding your FTP account , such as
your FTP username, hostname, and password.
Using File Manager

1. Login to Hostinger’s hPanel and navigate to File Manager.
2. Once you’re in the public_html directory, select the Upload Files icon from the
upper-right menu.
3. Select the website archive file on your computer and Upload it to our server.
4. Right-click on the uploaded file and Extract the archived files to the public_html
folder.

Website

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Website

Uploaded by

Copyright:

Available Formats

How TO - Make a Website

Create a Website from Scratch

Some text some text..

Some text some text..

First Step - Basic HTML Page

 The <head> element contains meta information about the document

 The <title> element specifies a title for the document

 The <meta> element should define the character set to be UTF-8

 The <body> element contains the visible page content

 The <h1> element defines a large heading

 The <p> element defines a paragraph

Creating Page Content

Then we use CSS to style the header:

/* Increase the font size of the <h1> element */

Use CSS to style the navigation bar:

/* Style the top navigation bar */

/* Style the navigation bar links */

/* Change color on hover/mouse-over */

We use CSS Flexbox to handle the layout:

/* Ensure proper sizing */

/* Create two unequal columns that sits next to each other */

And style it:

You will need the following two things to host a website.

 Web hosting service provider

Types of Website Hosting Services

Pricing: Starting from 2.75 per month to $7.99 per month

Suitable for: Starting a new blog or small business website.

Our recommended shared hosting provider: Bluehost

Pricing: Starting from $29.99 / month

Suitable for: Medium-sized businesses, popular blogs, and eCommerce stores.

Our recommended VPS hosting company: HostGator

3. Managed WordPress Hosting

Pricing: Starting from $35.00 per month

Suitable for: Popular blogs, business websites, membership websites.

Our recommended managed WordPress hosting company: WP Engine

Pricing: Starting from $79.99 per month

Suitable for: Enterprise-level businesses, hugely popular websites, eCommerce stores.

Our recommended Dedicated hosting company: SiteGround or HostGator.

Choosing The Right Plan to Host a Website

How Much It Costs to Host a Website

How to Host a Website on Your Computer

Yes, you can.

Putting Your Local Host Server Online

MAMP users on Mac will find it inside /Applications/MAMP/conf/apache/ folder.

Next, you need to find the following line:

Go ahead and change it by replacing localhost:80 with your IP address.

Next, you need to find the following line for WAMP:

That’s where domain names come in handy.

Pointing Your Domain Name to a Locally Hosted Website

First, you need to edit your domain name’s DNS settings.

File Transfer Protocol (FTP)

Using File Manager

You might also like