Home How to How to build a website for beginners (Step by Step guide)

How to build a website for beginners (Step by Step guide)

In 2021, anyone with no prior knowledge of web creation, design, or coding could create a website. Using the right tools and resources, you can easily build a website for yourself or your company. This step-by-step guide will show you how to create a website from the scratch without having to hire freelancers, agencies, or website builders. You only need 1-2 hours of free time to complete the guide and set up a website.

Things You’ll Need to Create a Website:

Name of the domain (your custom web address, www.YourSite.com)

Hosting a website (service that hosts your website)

WordPress (free, commonly used website platform)

You’ll need a domain name (google address) and a web hosting account to create a fully functioning website. These two ensure that the website is completely open to the general public. You won’t be able to build a website without one or the other.

You can build a WordPress website once you have a domain and hosting. WordPress is the most popular website creation tool, with 39 percent of all websites on the Internet using it.

Using your web hosting service to set up a WordPress site is typically a simple one-click operation.

You’ll have a fully functional website online, on a personalized domain name, and fully open to anyone after you’ve completed the guide.

Are you ready? Let’s get started…

Table of contents (steps to launch a website):  

  • Choose a domain name 
  • Register a domain and sign up with web hosting  
  • Set up a website using WordPress (through web host)  
  • Customize your website design and structure 
  •  Add important pages and content  
  • Set up a navigation menu  

Also Read: How To Get An Email Address For Business (step by step)

1. Choose a domain name 

The very first thing you’ll need to start building a website is a domain name.

Visitors type the address into their web browsers when they try to locate your site.

The domain name for this website is oyprice.com; yours can be anything.

The cost of a domain name will range from $10 to $50 per year. The average cost is about $15.

Here are several pointers to consider if you haven’t yet registered or chosen a domain name for your website:

  • If you’re creating a website for a corporation, the domain name should be the same as the company name. For instance, www.YourCompanyName.com
  • If you want to create a personal website for yourself, YourName.com is a great choice.
  • If you want to attract international visitors, go for a “generic” domain name extension like.com,.net, or.org. If you want to attract tourists from a specific country, use a “local” domain name extension like .de, .r, or.ru.

If your preferred domain name is already taken, don’t worry. There are more than 300 million different domain names registered, but there are still a billion more possibilities.

There’s no need to register a domain name if you don’t already have one.

In Step 2: We’ll show you how to get a free domain name for the first year

2. Register a Domain and Sign Up for Web Hosting Account

You’ll also include website hosting in addition to a domain name (web hosting).

Web hosting is a service that hosts and stores the files (content) of your website on a protected server that is always accessible. Your site would not be available for anyone to read and search if you do not have a web host.

The cost of secure and affordable web hosting for new websites ranges from $3 to $10 a month. It’s less than a cup of coffee, but it’s an important investment in the success of your website.

Make sure that whichever web hosting company you choose has the following features:

  • FREE SSL-enabled domain name (for security)
  • WordPress installation with a single click (free)
  • Unique email addresses
  • Unmetered or unlimited bandwidth (no traffic limitations)
  • Customer service, preferably live chat 24 hours a day, 7 days a week

If a website hosting company provides all of the above, you’ve probably found a decent one.

For web hosting and domains, we suggest Bluehost.com. They offer you a free domain name for the first year, and having your domain name and hosting from the same company saves you time and money.

With our discount reference, Bluehost hosting plans start at $2.75/mo and provide all of the necessary features for setting up a website.

1) Go to Bluehost and click on “Get Started Now” to get a web hosting account.

2) Choose your web hosting plan (option plus is completely unlimited, while basic is better for new sites):

3) Next, select a domain name and register it (for free for the first year):

Remember that Bluehost does not have country-specific domain extensions like.de,.fr, or.ru. If you use them, you can purchase them separately from Domain.com or GoDaddy.com.

If you already own a domain name from another provider, Bluehost will let you link it to your new hosting plan. There will be some additional steps required here, such as upgrading your name servers. Bluehost has a tutorial about how to do it.

4) Once you’ve completed the registration process, you’ll receive instant access in a matter of minutes, allowing you to begin creating your website right away.

3. Set Up WordPress Website (Through Web Host)

You’ll need to pick and configure a website building platform once you’ve got your domain name and web hosting set up (also known as CMS).

We recommend WordPress because it is simple to use and includes thousands of free templates and add-ons that will make your website look professional and exclusive.

Setting up your WordPress website is easy, because your web host will do the majority of the work for you, so you won’t have to do anything.

Don’t worry if you don’t use Bluehost for web hosting. Many web hosting companies have a “WordPress install” option in their cPanel. If your web host doesn’t provide “one-click downloads,” try installing WordPress manually.

(1) Setting up a WordPress account on Bluehost

Go to your Bluehost account and sign in.

Go to “My Sites” and then “Create Site.” When learning how to make a website, use the Bluehost My Sites screen.

The WordPress installation will begin after you provide some basic details about your site. All will run on autopilot.

Bluehost will show you the installation and login information once the setup is complete. Make a note of this information and keep it somewhere secure.

(2) Type in your domain address to test your website.

After you’ve installed WordPress, you can check to see if everything is working properly.

The simplest method is to enter your domain name into a web browser.

The first thing you’ll see after installing WordPress is a really simple website like this:

Don’t worry if this doesn’t appeal to you; you’ll soon learn how to change the style to something more appealing.

(3) Double-check SSL/HTTPS settings

In a nutshell, an SSL certificate ensures that your website is distributed safely to your visitors.

When you make a new website or install WordPress on Bluehost, an SSL is automatically installed. Follow these measures to verify your site’s SSL status:

  • Go to your Bluehost account and sign in.
  • Select “My Sites” from the drop-down menu.
  • Locate your account and choose “Manage Site.”
  • Navigate to the “Security” tab.
  • Your “Free SSL Certificate” status can be found under “Security Certificate.”

In the web browser, you should see a lock icon next to your domain name if everything went well.

While it will take a few hours for the SSL to be fully installed, this does not prevent you from continuing to work on your website.

4. Customize Your Website Design and Structure

Now that your bare website is up and running, it’s time to personalize it by choosing a nice template, customizing it, and incorporating branding elements.

To begin with:

(1) Select a website theme.

WordPress themes are pre-made template packages that alter the appearance of your entire website. WordPress themes are compatible, so you can quickly move from one to another.

The best part is that there are thousands of free and paid WordPress themes to choose from.

The official theme directory at WordPress.org is the best place to go if you want to get a free theme, which is where most people want to start. The segment for the most common themes, in particular.

Many of the themes you see there have a wide user base and have proved to be of high quality.

You are free to search the list and choose any theme you want, but we recommend Neve to help you get through this guide quickly. It’s a flexible theme that comes with a few sample pages (design packages for different niches and types of websites).

(2) Choose a theme that you like and install it.

Go to your WordPress dashboard and log in. It’s located at YOURSITE.com/wp-admin. Use the username and password you were given when you installed WordPress.

Go to “Themes Add New” in the sidebar.

Type “Neve” into the search box, then press the “Install” button next to the theme’s name (you must hover your mouse over the theme box):

After you’ve completed the installation, press the “Activate” button that appears in place of the “Setup” button.

A progress message would appear, indicating that the installation went smoothly.

(3) Drop in a Design (Only for Neve Theme Users)

While the theme is now active, there are a few more things you can do to make it look perfect.

This is the welcome message you’ll see:

One of the best things about Neve is that it comes with not only one, but a variety of different designs from which to choose. To see them, click the big blue button.

More than 20 free designs are available, covering most common website niches such as business, restaurant, fitness, music, food, wedding, photography, eCommerce, portfolio, and more. Basically, no matter what your site’s theme is, you’ll be able to find a design kit that works for you.

We’ll use the first one on the list – “Original” – for the purposes of this guide.

You’ll find that this installation process includes all of the elements you’ll need for your site: the template, all of the plugins you’ll need to make it work, and sample material that you can change later.

To get things started, click the “Import” tab. The progress message will appear after a minute or so.

Then, go to “Appearance Neve Options” to see what else the theme can do.

We’ll take a look at a few of these choices below:

(4) Upload a Logo 

The majority of users choose to upload their logo and have it displayed in the site’s top-left corner. Let’s get started right now.

You should make your own logo. Here is some software that you can use to make your own logo.

After you’ve created a logo, you can incorporate it into your website. Go to “Appearance Neve Options” and click on the “Upload Logo” icon.

What you’ll see is as follows:

The WordPress Customizer is an interface that allows you to customize different aspects of your website’s appearance. You can start by uploading your logo. To do so, go to the top left corner and press the “Select Logo” button.

You can choose to crop the logo in WordPress, but you don’t have to.

Your logo should appear in the corner of the page shortly.

You may also choose whether or not the site name and tagline should be shown alongside the logo, as well as the logo’s maximum width. Experiment with these options to find the one that best suits your needs.

When you’re done, press the “Publish” button in the top left corner, and then click the “X” button to exit the Customizer.

(5) Change the color scheme and fonts on the website.

Changing the color schemes and fonts used on the web is another thing you should do. This is a simple fix to make your site more exclusive and in line with your brand identity as you learn how to build a website.

To start with,

Return to “Appearance Neve Options.” We’ll concentrate on the following two possibilities:

To begin, select “Set Colors.

The color scheme that most WordPress themes use for different design elements defines them.

The colors of links, site texts, and backgrounds are the most popular examples.

The Neve theme’s color assignments can be modified using the Customizer.

To change any of the colors, simply click on it and choose a new one.

When you’re done, click “Publish” and “X.”

Changing fonts operates in the same way:

In the “Appearance Neve Options” panel, click the “Customize Fonts” link.

Neve lets you choose from a large number of device fonts as well as Google Fonts.

Simply pick the font you want by clicking on the “Font Family” box.

The individual fonts used for your headings can then be fine-tuned after that.

Experiment with these options to see how they affect the website.

Click the arrow button near the top left to change the font used in the body portion of your blog.

Select “General.” This will take you to a similar options line, but you’ll be changing the main body font this time.

When you’re done, click “Publish” and then “X.”

(6) Insert a Sidebar

You can also customize the appearance of your sidebar in the “Appearance Neve Options” panel. To get started, go to “Content / Sidebar.

There are three key options here: no sidebar, left-hand sidebar, and right-hand sidebar. The right-hand sidebar is the standard layout for most websites. You may also change the width of the material. After you’ve made your changes, press “Publish” and “X.”

(7) Use Widgets (Free WordPress Add-Ons)

Widgets are tiny content blocks that appear in the sidebars of most websites. Let’s customize the sidebar with widgets now that we’ve only set it up in the previous phase.

Go to “Appearance Widgets” to set up widgets. This is what you’ll see:

You can see all of the widgets available on the left, and all of the widget areas sponsored by your current theme on the right. All you have to do to add a widget to the sidebar is grab it from the left and drag it into the sidebar area.

Grab the “Pages” widget and drag it into the sidebar section, for example, if you want to list all of your pages in the sidebar.

(8) Play Around With the Theme You Created

What we’ve discussed so far should be enough to help you find out how to make a website that stands out and looks unique, but there are plenty of other choices.

Go to “Appearance Customize” to see them all. This will bring up the Customizer’s main GUI, along with all of its settings and presets.

We recommend that you take a look at what’s available and experiment with some of the choices. You’ll almost certainly come across some customizations that we haven’t covered yet.

5. Add Content/Pages to Your Website

Your website’s core is made up of pages. Isn’t it difficult to imagine a website without any pages?

A web page is nothing more than a document on the internet from a technological standpoint. It’s not much different from a standard Word document, but it includes the website’s branding elements including the header and footer.

WordPress makes it easy to build web pages. But before we get into the how-to, let’s talk about why you should make the pages in the first place.

Most websites will find the following pages essential:

Homepage – The first page that your viewers see when they visit your website.

About Us page – a page that explains the purpose of your website.

Contact page  –  allows tourists to contact you.

Blog page – a list of your most recent blog posts; if you don’t plan on posting, the blog page can be used to share company news and announcements.

Service page – If you’re creating a website for a company, this is the page to put your services on display.

Shop page – for businesses looking to open an online shop.

The layout of all of the pages mentioned above would be very similar, with the main difference being the material on the page itself. Basically, once you figure out how to make one list, you’ll be able to make them all. There’s a little more complexity here, so let’s look at how to make a couple of simple types of pages:

(1) Designing a HomePage

Your homepage should look like this if you’re using Neve:

You may change the page’s layout as well as the elements on it (all texts and images).

Simply press the “Edit with Elementor” button in the top bar to do so.

The Elementor page builder’s GUI is what you’ll see.

A visual page builder is what we call Elementor. This means you can directly edit any feature on the page by clicking on it. If you want to adjust the main headline, for example, simply click on it and begin typing.

There’s a whole customization panel in the left sidebar if you look there. Any content block’s structure and styling can be changed. Here’s an example of what you might see when working on the headline:

Another cool feature is that you can grab any element on the page and drag it to a new location.

Click the tiny square icon in the top left corner to add new elements.

You’ll see a list of all the available content blocks.

Drag any of the blocks onto the page’s canvas with your mouse.

The easiest way to function on your homepage is to edit the demo content on the page block by block.

Add new text content, realign some of the blocks, remove the ones you don’t need, and replace them as needed.

This whole interface is very simple to use, so spend an hour or so playing around with it and experimenting with various options.

(2) Create pages like “About,” “Services,” and “Contact.”

It’s much easier to build classic web pages in WordPress than it is to work on your homepage. Go to “Pages Add New” and create a new page. This is the GUI you’ll see:

Every page requires a title, so start where it says “Add a title.” “About Us” or “Contact,” for example.

Choose a page layout next. If you’re making a standard page, the first option on the list – “Single Row” – is a good one. You can, however, select from the template library to save time. To do so, press the blue button.

You’ll see a window where you can choose from a variety of ready-made page pieces. For example, if you’re working on your about page, you can easily locate and use the following blocks:

Simply click the “Insert” button next to the block you want to add to the tab, and it will be attached. You can then further customize it by changing the texts or replacing the images.

When you’re done, go to the top right corner of the screen and press the “Publish” button.

When working on your contact page or services page, you can use the same process.

Simply choose various page blocks from the template library. These, for example, should fit well on a services page:

Instead of using the templates, click on the “+” icon in the top left corner of the editor interface to manually add new page elements.

Any blocks you choose will appear at the bottom of your list. Here’s an example of a new heading block:

As you can see, you can freely edit it, change the text’s properties, and adjust the color in the right sidebar.

When you’re done, don’t forget to press “Publish.

(3) Set up a blog page.

The blog page is where you’ll find a list of your most recent blog posts.

The good news is that you have already been assigned to a blog list. When you installed WordPress and the Neve theme, this happened. By going to “Pages,” you can see the page:

To see your blog page in motion, click the “View” link.

Creating new blog posts:

Simply go to “Posts – Add New” to create new blog posts.

Is there something familiar about this user interface? Yes, we used the same editing environment when we created standard pages. It’s easy!

6. Set Up a Navigation Menu

After you’ve built a variety of attractive websites, the next step in learning how to make a website is to set up your navigation (a website menu). Your visitors can use the menu to navigate from page to page on your web.

Build a new menu by going to “Appearance Menus” and clicking “create a new menu.

Here’s a step-by-step guide to making your first menu:

1.Begin by giving your document a title. The menu title isn’t crucial, but it aids in distinguishing the menu from others (yes, you can have more than one).

2.Choose the pages you want to use in your menu. Other objects, such as posts or custom links, may be added to the menu.

3.To add the selected pages to your menu, click the “Add to Menu” button.

4.Drag and drop menu items to reorder the links in priority order.

5.Choose a place for the menu to be shown. This varies by theme; in this case, setting the menu to the “Main” position would make the menu appear in the header.

6.Last but not least, save your menu.

At this point, you’ll be able to see your menu in all of its glory on the homepage.

Congratulations – You are ready to get started!

Ronil Thakkar
Ronil is a content writer. He loves to explore tech related content on the internet. When he is not writing a blog, you will find him playing video games or Binge-watch.
RELATED ARTICLES

How to Block Spam Texts on Android or iOS

We're all used to robocalls, infomercials, and spam in our emails, but now scammers are focusing on a different mode of communication: text messages....

How to Transfer PUBG Mobile Account to Battlegrounds Mobile India

How to Transfer PUBG Mobile Account to Battlegrounds Mobile India- To get all of their goods back, players can switch their PUBG Mobile account...

What is WiFi Extender and How to Choose the Right One?

If you have arrived at this blog post then we are pretty sure that you are having WiFi coverage issues at your place, it...

LEAVE A REPLY

Please enter your comment!
Please enter your name here

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

Most Popular

How to Block Spam Texts on Android or iOS

We're all used to robocalls, infomercials, and spam in our emails, but now scammers are focusing on a different mode of communication: text messages....

How to Transfer PUBG Mobile Account to Battlegrounds Mobile India

How to Transfer PUBG Mobile Account to Battlegrounds Mobile India- To get all of their goods back, players can switch their PUBG Mobile account...

What is WiFi Extender and How to Choose the Right One?

If you have arrived at this blog post then we are pretty sure that you are having WiFi coverage issues at your place, it...

How to Remove Weather and News from Windows 10 Taskbar

How to Remove Weather and News from Windows 10 Taskbar - Microsoft is constantly tweaking Windows 10 to make it better. Some of these...