How to Make a Website in 2024 (Detailed Tutorial)

Last Updated on February 15, 2024 by Leave a Comment

Editorial Note: We may earn a commission when you visit links on our website.
How to Make a Website in 2024 (Detailed Tutorial)
Blog / Design / How to Make a Website in 2024 (Detailed Tutorial)

Online presence knows many forms. One of them is having your own website. Whether for your business or your personal brand, having a website can help you boost your online presence. We’ll show you how to make a website from scratch to help you get your website up and running as soon as possible. We’ll provide you with all the essential steps you need! In total, we’ll go over 13 steps. This post should help you build a clear action plan when planning to build your own website.

Let’s get to it.

Do I Need to Know How to Code?

Knowing how to code used to be essential when it came to websites. Although it is highly recommended that you have a background in some basic web development, it is not necessary. Many tools out there focus on making website building a visual experience. That’s the approach we’ll take in this post. You won’t need technical expertise to follow this tutorial and make a website from scratch.

Step 1: CMS or Website Builder?

WordPress.org

The two main options you have when deciding to build your own website are:

  1. a content management system
  2. a website builder

A content management system, like WordPress, lets you control every aspect of your website, including hosting. They’re often free as well. The combination of these two options makes content management systems the most popular option out there.

A website builder, on the other hand, locks you into their hosting platform. You have way less control, and you’re often stuck with the website builder, which can result in you getting “stuck” if you’re disappointed with the software.

Our choice: For this practical tutorial, we’ll choose WordPress.org. It’s free, has a reasonable learning curve, and has many options to bring your website to life.

Step 2: Choose a Hosting Provider

Choosing a hosting provider is the next important decision you must make when making a website. There are many hosting plans, so it can be hard to see the forest for the trees. We’ll try to lay it out for you as easily as possible.

Hosting Types

The hosting options vary based on website traffic. For low traffic, shared hosting works, but you’ll share storage and resources. Managed WordPress hosting is better for most as it handles security and technical issues. Those needing a robust solution can consider VPS hosting—a cheaper alternative to dedicated hosting with similar features. For more guidance on selecting the right WordPress hosting, refer to our comprehensive article on types and selection.

Our Recommendation: SiteGround

SiteGround WordPress hosting

We’ll assume you want to build a simple website where you don’t expect too much traffic. In this case, a shared hosting plan will do its job (for now). You can always scale up your hosting option. Our recommendation for hosting is SiteGround. It has a 4.4 out of 5 score on Trustpilot and is well-merited. Their platform and hosting solutions prioritize the client and their needs.

Pricing

SiteGround pricing

SiteGround offers three plans: the StartUp for $14.99 per month, the GrowBig for $24.99, and the GoGeek for $39.99. For this tutorial, we’ll select the GoGeek plan, which will give us 40GB of web space, 400,000 monthly visits, and quite a few excellent features to get us started.

Create SiteGround Account

The next step is to create your account. Start by selecting a plan (for us, it’s the GoGeek plan), then follow the steps to register a new domain or add your current one.

choose a domain

Finally, add account information such as your email and password, client information, payment information, and hosting length: monthly or yearly.

Create SiteGround account

Step 3: Choose Your Domain

Once you’ve chosen your hosting provider, you can continue by choosing your domain (if you don’t already own one).

.COM

The most popular URLs end in dot com. It’s rooted in our brain. By default, we tend to trust dot com domains more than other ones, which positively impacts the brand.

Make it Rememberable

Whether you go with a dot com domain or not, it’s important to make your domain rememberable. Especially long term, you don’t want to make it hard for your visitors and customers to find you online.

Register Your Domain

Many domain registrars are available, but picking a good one is important. Some of the best domain registrars are Namecheap or SiteGround, but be sure to do your research to determine which is right for you.

Step 4: Install WordPress.org

Once your hosting and domain are in place, it’s time to install WordPress on your website. There are many reasons to choose WordPress above any other option. Firstly, it’s the most popular CMS out there for a reason. It’s intuitive, open source, and allows full customization. You also have endless theme and plugin options. It also doesn’t hurt that you don’t have to pay a dime to use WordPress.org on your website!

Automatic Install

To set up WordPress on your SiteGround domain, you can navigate to the home page of your SiteGround account and click Set Up Site.

set up website

Select your site’s new, existing, or temporary domain, then click continue.

choose domain

Next, select Start New Website.

start new website

Then, select WordPress, enter your email address, and create a password. Next, click continue.

WordPress login credentials

Step 5: Plan your website’s structure

At this point, the environment of your website is ready to start thinking about the shape your website will take place. It’s important to consider how you want your website to look and what functionality you will need. Will a one-pager do? Do you need some basic pages for a brochure type of website? Do you need e-commerce functionality? For the sake of this tutorial, we’ll go off the goal of building a brochure website.

Pages to Consider

If you’re building a brochure website, there’ll be some indispensable pages:

  • Home
  • About
  • Contact

On top of that, depending on what the website is for, you might find yourself adding more pages dedicated to:

  • Services
  • Portfolio
  • Blog

There’s no right or wrong website structure; you’ll have to find the option that works for you, your website, and your website’s goals.

Step 6: Choose Your Theme

Once your WordPress environment is ready, it’s time to work! When using WordPress, you have the ability to set a theme. This theme forms the foundation of your website. Based on the functionality you’re looking to add to your website, choosing the right theme is going to be an important step.

Types of Themes

There are a variety of different themes that you can decide to go for in WordPress. The most popular themes are multipurpose and usually include a visual builder. The reason for that is the flexibility it offers. There are also themes that are specifically tailored toward ecommerce websites or portfolio websites too. Depending on what type of theme you’re looking for, you can check out different listicles with our top recommendations.

Our Main Recommendation: Divi

Choose Divi

We will pick a theme to work with for the upcoming (practical) steps in this tutorial. We recommend using our very own Divi for any website you build. Divi is a multi-purpose theme and includes a no-code design Visual Builder that makes building websites very intuitive. Divi comes with a wide range of features, more than 200 customizable elements, and more than 2200 professionally designed layouts that you can choose from! Whatever type of website you’re looking to create, chances are high that there’s a layout pack dedicated to that specific business exactly.

Pricing

Elegant Themes pricing

Divi provides you with two membership options: yearly and lifetime. You can get a yearly membership for $89/year or a lifetime membership for a $249 one-time fee.

Become a Divi Member

To become a Divi member, navigate to our join page. Or, take advantage of today’s discount of 10% off!

Once you’ve signed up for a membership, you can navigate to your member’s area.

Elegant Themes member area

Download Divi

Here, you’ll find the ability to download the Divi theme file.

download Divi

Install Divi on Your WordPress Website

Once you’ve downloaded Divi, navigate to your WordPress dashboard, hover the Appearance menu item in the left sidebar and click on Themes.

WordPress themes

At the top of the page, you’ll notice a button that says Add New. Click on this button.

add new theme

Then, click on Upload Theme.

Upload theme

Search for the Divi zipped folder you downloaded in the previous part of this tutorial and click Install Now.

install now

Once you’ve succeeded at this, you’ll be able to activate the theme as well!

Activate Divi

Divi is now ready for you to use.

Add API Key to Divi Theme Options

To access all of the free layouts Divi provides you with, you’ll need to add your API key to the Divi Theme Options. You can find (and create) API keys by navigating to your Members Area. Once there, hover over Account.

Elegant Themes account

Next, click Username and API Key.

get API key

You can create and copy new API keys in the API keys area.

generate new API Key

To add the API key to your Divi Theme Options, you’ll need both your username and an API key.

Next, navigate to your WordPress dashboard. Hover the “Divi” menu item in the left sidebar (1) and click on “Theme Options” (2). Go to the “Updates” tab (3). You can add your username (4) and API key (5) there. Make sure to save the changes (6).

Divi Theme options

Step 7: Install Plugins

Another great part of WordPress is the ability to install plugins. There are literally thousands of plugins out there to help serve different needs. Let’s take a look at which plugins you’ll want to consider for your website.

Essential Plugins

With every WordPress website, there are some essential plugins you’ll need in order to be successful. You’ll want to install plugins for SEO, security, and other excellent WordPress plugins to help you keep your site in tip-top shape.

SEO

WordPress is SEO-friendly out of the box but needs a little help if you want to score higher placement in the search engine ranking pages (SERPs). Thankfully, there are some excellent SEO plugins out there, like Rank Math, to ensure your site is easily discovered by potential customers.

Security

Another vital aspect to consider is a reliable security plugin, like iThemes Security. Ensuring protection against malware, bots, and DDoS attacks is crucial. With over 44% of the internet built on WordPress, it becomes a prime target for malicious actors.

Optional Plugins

Aside from SEO and security plugins, some optional plugins can enhance your website. Consider chat, newsletter, social media, or other optional plugins to make your website a lead-generating powerhouse.

Chat

best wordpress chat plugins

Customer engagement is crucial for the success of your website. You should consider installing a good chat plugin, like Tidio, to make yourself more accessible to customers. Whether you need to automate the customer experience or provide a live agent for your website, a chat plugin is an excellent way to give visitors the answers they crave.

Newsletter

best wordpress newsletter plugins

If you’re looking to increase leads and grow your customer base, a newsletter plugin, like Bloom, fits the bill. It’s an excellent way to grow your customer base, provide useful information to them, and track your site’s engagement.

Social Media

best wordpress social media plugins

Connecting your social media feeds to your WordPress website is an excellent way to increase the visibility of your website and social media accounts. Using a good social media plugin, like Monarch, you can embed your social media feeds from Facebook, YouTube, and more.

And More

best WordPress plugins

Whether you need a solution for backing up, speeding up, or enhancing your website’s functionality, a good WordPress plugin can help you achieve your goals. Take a look at our 31 best WordPress plugins post to give you more insight on which plugins you can use to make your WordPress website the best it can be.

Step 8: Create Your Very First Page

At this point, we can confidently start creating the pages we want to showcase on our website! This part can be overwhelming if you’re new to building websites. Although making a website is easy, it can sometimes lead to information overload. Allow yourself to process and return to the information with a fresh mind when needed.

Add New Page

Navigate to your WordPress dashboard. Once there, hover over Pages and click Add New.

add new WordPress page

Give your page a title. In this case, we’ll call it Home.

name your WordPress page

You can save the page as a draft, or publish it to start working on it.

save your page

Once ready, switch to Divi by clicking on Use Divi Builder.

use Divi Builder

Select Premade Layout

Divi is an intuitive tool, and you can create any page from scratch if you learn the basics. But to help speed up the process, Divi provides over a hundred website packs with more than 2200 layouts! With so many options available, you’ll find a website pack that matches your website’s needs. We release a new layout pack every week!

Divi layout packs

To upload a layout to your page, choose the middle option that says Browse Layouts.

browse layouts

Watch our library of layout packs and layouts unfold!

Divi layout options

You can use the search bar in the left sidebar if you’re looking for a specific layout pack.

layout search

For the purpose of this tutorial, we’re going to use the homepage layout of the Marketing Layout Pack. We’ll just type in Marketing in the search bar.

Divi marketing layout

Then, we’ll select the Marketing homepage.

marketing home page

This will lead us to the layout pack’s entire preview.

marketing preview

To upload the homepage, click the blue button that says Use This Layout.

In no time, your page will be replaced with the layout!

imported layout

Change Content & Images

Layouts are great starting points, but things still need to be fine-tuned to your website’s needs. You can go as far with this as you want. Divi is a visual builder that allows you to add new sections, rows, columns, modules, and more. It also has many efficiency features that speed up the design process.

We’ll keep it simple for this tutorial by changing content only.

Change Copy

You can open each individual module containing copy and use the content box to change the copy. Easy!

edit text module

Change Images

Similarly, you can change all the images being used if needed/wanted. Make sure you optimize your images before uploading to avoid slow loading speeds.

edit image module

Save & Publish

You can save and publish once you’ve applied the changes you wanted to your page!

Publish Divi page

Step 10: Create Additional Pages

Depending on your website’s structure, you can repeat the steps above for each one of the pages you need. If you want to get your website live as soon as possible, you might consider going for a one-pager first, then slowly building the rest of your pages.

Step 11: Create Your Website’s Navigation

It’s great to have pages on your website, but if people can’t get to the page they want, we have a problem. That’s why you should pay extra attention to your website’s navigation. The navigation usually finds itself in a website’s header and footer areas. WordPress has a dedicated spot to create menus from existing pages dynamically.

Select Homepage

Before we create the menu, let’s set up a homepage first. If people type in your main URL, they’ll land on this page. By default, the homepage on a WordPress website is set to Your latest posts. To modify this, you can navigate to your WordPress dashboard, then hover the Settings in the left-side menu, and continue by clicking on Reading.

WordPress reading settings

Once there, select A static page under the first option and browse through your pages to find your homepage. Be sure to save the changes.

set home page

Create Primary Menu

Next, we’ll create a primary menu. Navigate to your WordPress dashboard, hover over the Appearance menu item in the left sidebar, and select Menus.

Click on Add a new menu and give your menu a name.

create new menu

Continue by adding the pages you want in your navigation.

add pages to menu

Once that’s done, set your menu as the Primary Menu.

primary menu

And save your menu. This primary menu will now reflect on your website’s header automatically.

save menu

Step 12: Additional Things to Consider

A website is never truly finished. You’ll always have things to improve or update. If you want to get fine-tune your website even further, you might want to consider some of the items below.

Creating a Header & Footer

There are several ways to create headers and footers on a Divi website. You can use the WordPress theme customizer under Appearance > Customizer to style Divi’s default header and footer or use the Theme Builder to create them. We highly recommend using Divi’s Theme Builder since it allows you to create custom headers and footers using the drag-and-drop Visual Builder. To access the Theme Builder, navigate to Divi > Theme Builder.

Divi Theme Builder

Click Add Global Header to add a header.

add global header

You can create any header layout you want using Div’s Visual Builder.

Creating Templates

Divi is the ultimate full-site editing theme. In addition to creating headers and footers, you can create layouts for posts, products, categories, and much more. Divi’s Theme Builder gives you the ultimate freedom to create the website you want using your creativity or applying one of our pre-designed post layouts on our blog.

Optimizing your SEO

WordPress is already SEO-friendly, but using an SEO plugin and a good SEO tool will boost your visibility. Learn about keyword research, writing good SEO copy, and utilizing internal links. By taking these steps, you’ll become an SEO expert in no time.

Optimizing for Mobile

Creating a visually appealing website across all devices is crucial. Google’s mobile-first algorithm prioritizes small screen-friendly websites. Thankfully, Divi specializes in mobile-first designs, giving you quite an advantage.

Step 13: Maintaining Your Website

To have a successful website, you’ll have to keep maintaining it.

Update Regularly

Even if it’s just for security measures, updating your website regularly has advantages. Make sure that if you do update, you use a staging site. This will help you avoid conflicts when updating WordPress, a theme, or a plugin.

Measure Data

Consider measuring the data your website brings as well, through tools like Google Analytics. This will help you track the effectiveness of your website, depending on the goal you’ve set for your website.

Final Thoughts

That was it for this post on how to make a website! As with all things in life, the more you practice, the easier it becomes. Allow yourself to play around with different parts of the website creation process because that’s usually how you’ll learn the most. If you have any questions or suggestions, feel free to comment in the comment section below!

Frequently Asked Questions (FAQs)

Before we wrap up, let’s answer some of your most common questions regarding how to make a website. Did we miss one? Leave a question below, and we will respond!

How do I build my own website?
To build your website, you must first choose a domain name and hosting provider. Then, select a website builder or CMS platform like WordPress. Customize the design, add content, and optimize it for search engines. Test and launch your website. Finally, promote it through social media and other marketing channels.
Can I make a website for free?
Yes, you can make a website for free using website builders like Wix, Weebly, or WordPress.com. They offer free plans with basic features and limited storage, but you can upgrade to a paid plan for more features and customization options. However, remember that a free website may have ads and a domain name with the website builder's branding, which may seem unprofessional to your users.
How much does it cost to make a website?
The cost of making a website can vary greatly depending on the complexity, features, and design. It can range from a few hundred dollars for a simple website to thousands of dollars for a more advanced one. However, you can significantly cut the making costs with a free CMS like WordPress and a theme like Divi. Other factors, including hosting, domain registration, and ongoing maintenance, also affect costs.
What are the benefits of having a website?
Having a website offers numerous benefits, like increased visibility, accessibility, credibility, and customer engagement. It enables businesses to reach a wider audience, showcase products/services, gather customer feedback, and establish a robust online presence. It also allows easy communication, cost-effective marketing, and data analysis to improve business strategies.
Why should I use WordPress to make my website?
WordPress is an easy-to-use website builder that offers a wide range of customizable themes and plugins. It's also search engine friendly, mobile-responsive, and provides excellent support. With a large community of developers, WordPress is constantly updated, secure, and can handle any website. Plus, it's free to use!
Does making a website require coding experience?
No, making a website does not necessarily require coding experience. Website builders and content management systems (CMS) like WordPress allow users to create websites without writing code. However, having some coding knowledge can be beneficial for customizing and optimizing a website.
How long does it take to build a website?
The time it takes to build a website can vary depending on the complexity of the website, the design requirements, and the functionality needed. A simple website with basic features can take a few days to a few weeks to build, while a more complex website with custom features and integrations can take several months. To ensure a realistic timeline, it's essential to clearly understand your website goals and requirements before starting the development process.
What are the different types of websites?
There are several types of websites, including e-commerce sites for buying and selling goods, informational sites for sharing knowledge, social networking sites for connecting people, entertainment sites for providing media content, and blog sites for sharing personal perspectives and opinions.
What are some tips for making a successful website?
Some tips for making a successful website include choosing a clear and memorable domain name, ensuring a clean and user-friendly design, optimizing search engines, providing valuable and relevant content, and regularly updating and maintaining the site. It's also vital to prioritize mobile responsiveness and ease of navigation.
What are some of the most common mistakes while making a website?
Some of the most common mistakes while making a website include poor navigation, slow loading times, lack of mobile optimization, confusing or cluttered design, outdated content, and insufficient search engine optimization (SEO). Avoiding such mistakes ensures your website is user-friendly, directly translating to higher engagement and sales.

Featured Image via Darko 1981 / Shutterstock.com

Top Picks
Product Image

Get Started With SiteGround!

Explore plans, pricing and features. Click here to get started. 👇

Visit SiteGround

Get Started With SiteGround!

Explore plans, pricing and features here. 👇

Explore SiteGround
Premade Layouts

Check Out These Related Posts

How to Enhance Images with AI (2024 Guide)

How to Enhance Images with AI (2024 Guide)

Updated on May 21, 2024 in Design

Image quality can make or break the visual impact of your content. AI-driven tools have revolutionized the way we enhance photos, making professional-quality adjustments accessible to everyone. In this post, we’ll show you how you can use three leading AI image enhancement tools to improve...

View Full Post
How to Make AI Images (Five Easy Ways in 2024)

How to Make AI Images (Five Easy Ways in 2024)

Updated on May 17, 2024 in Design

Creative assets are important, even in the age of AI. As long as they are of great quality and communicate well (for their situation), images made using AI can be just as effective as professional photography and graphic design. But, you probably have the lingering question of how. We’ve...

View Full Post
How to Create a Presentation with AI: Step-by-Step (2024)

How to Create a Presentation with AI: Step-by-Step (2024)

Posted on April 20, 2024 in Business

Are you struggling to create engaging presentations? AI presentation tools can help you save time, generate creative ideas, and design stunning slides in minutes. Using the power of AI, you can revolutionize your presentations, making them more engaging, dynamic, and professional than ever before....

View Full Post

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

Get Started With Divi