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.

Subscribe To Our Youtube Channel

Step 1: CMS or Website Builder?

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

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

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

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.

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

Next, select Start New Website.

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

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

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

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.

Download Divi

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

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.

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

Then, click on Upload Theme.

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

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

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.

Next, click Username and API Key.

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

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

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

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

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

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

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.

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

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

Once ready, switch to Divi by clicking on 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!

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

Watch our library of layout packs and layouts unfold!

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

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.

Then, we’ll select the Marketing homepage.

This will lead us to the layout pack’s entire 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!

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!

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.

Save & Publish

You can save and publish once you’ve applied the changes you wanted to your 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.

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.

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.

Continue by adding the pages you want in your navigation.

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

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

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.

Click Add Global Header to add a 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!

Featured Image via Darko 1981 / Shutterstock.com