How to Make a Website in 2021: Creating Your First Website

How to Make a Website in 2021: Creating Your First Website

Having a website is essential for a successful online presence. Whether you’re building a personal brand or a business, a website is one of the most effective ways to reach your audience and achieve your goals.

Fortunately, creating a website is now easier than ever no matter what your website idea is. Some of the most popular platforms are very easy to use, even for beginners. However, it’s always best to start with learning about your options and what to expect before making a website.

This article is a comprehensive guide on how to make a website from scratch. We’ll talk about what you need to get started, help you choose the right platform, and illustrate the steps necessary to build your first website.

Video Tutorial

What Do You Need to Start a Website?

To host a website online, you’ll need to secure the following:

  • Web hosting. This is what allows you to store your website and all its files online.
  • Domain name. As the human-friendly web address for your website, it allows people to find your website easily using their web browsers.

While domain and hosting plans are two separate things, you would require both to run a website.

Choose a Web Hosting Plan

Web hosting is a service that allows websites to be readily available online. When you purchase a hosting plan, you rent the hosting provider’s server space. In other words, you gain access to storage and other resources required for running a website.

The performance and security of your website rely heavily on which hosting provider you choose. Take some time to conduct proper research by browsing various hosting companies’ websites and looking up customer reviews on YouTube, TrustPilot, and multiple other publication platforms.

There are different types of web hosting plans offered by every hosting company. Each type of hosting is designed for specific purposes. At Hostinger, we offer many types of hosting, including:

  • Shared hosting. Well equipped for small projects like a personal website or an online portfolio. It starts at $1.39/month.
  • WordPress hosting. Shared hosting that’s optimized specifically for WordPress. It starts at $1.99/month.
  • VPS hosting. Scalable hosting that offers maximum control and flexibility. Best for large-scale projects. It starts at $3.95/month.
  • Cloud hosting. Suitable for resource-intensive websites like content-heavy business websites or large eCommerce sites while still prioritizing simplicity of use. It starts at $9.99/month.

Remember to choose a hosting company that’s supported by your website building platform.

Detailed information about which platform to choose is explained further in this article.

Think of a Memorable Domain Name

A domain name is an easy-to-remember address for a website. It was created to make finding websites easier for humans. Rather than memorizing every website’s IP address, such as 123.45.43.21, one can just remember something as simple as domainexample.com.

Custom domain names also allow you to create professional-looking email addresses, for example, you@domainexample.com.

You can buy domain names from companies called domain registrars. Some hosting companies provide both web hosting and domain registration services. For example, Hostinger offers a free domain name for one year, along with the purchase of our hosting plans.

Much like web hosting, your own domain name is not a one-time purchase. It’s more comparable to getting a subscription for a service. To continue using a particular domain name, you must renew it annually with the domain registrar. Failure to do so could render your website unusable.

When choosing a domain name, make sure that it’s memorable. Prioritize using common extensions like .com or .net and make it concise. Use a domain name generator to brainstorm ideas, then use a domain name checker to check its availability.

Do You Need Technical Knowledge to Make a Website?

The short answer is no. Many platforms are now focused on making website building as easy as possible. For example, most website builders have a built-in drag-and-drop visual editor that makes website design painless.

However, some platforms are more complex than others. A content management system like WordPress is accessible to beginners, but it also offers people with technical knowledge more flexibility and control over their website.

Similarly, a deep understanding of coding languages like HTML, CSS, and JavaScript grants the ability to build and tweak a website precisely as intended. You can use our guide to learning code to help you learn if you’re interested.

Even though there are advantages to possessing technical knowledge, it’s not a requirement. The key is to choose the right platform that can make the most out of your skill level.

Choosing the Right Platform for Your Website

Choosing the right website platform is about being aware of your needs, skill level, and the goals of your own website.

For example, it’s essential to consider whether you value flexibility or ease of use. It’s also important to choose a platform that can sustain your website’s future. Migrating a website to a different platform down the line can be difficult.

This section will explain three main options – content management systems (CMS), website builders, and a self-coded website.

However, for the rest of the article, we will focus on just CMSs and website builders. These two platforms require less technical knowledge, making them more inclusive to beginners.

Content Management System (CMS)

A content management system is a software application that allows users to design, manage, and publish content for websites from a user-friendly interface. With a CMS, there’s no need to code a website from scratch.

There are many CMS options available, but WordPress is undoubtedly the most popular as it powers more than 40% or nearly half of all existing websites.

WordPress is an open-source CMS. It’s self-hosted, so users must purchase web hosting and a domain name before using it. The software itself is free and encourages collaboration between its users.

Web developers in the WordPress community contribute to creating thousands of themes and plugins.

Themes are ready-to-use design templates for WordPress sites, while plugins are complimentary software that can add extra features on top of the core ones already offered by WordPress. There’s most likely a plugin for almost any additional feature one can think of.

Pros

  • Outstandingly flexible and scalable. WordPress can handle almost any type of website you can think of, large or small, as long as your host has enough resources for it.
  • Seemingly endless plugins and themes. There are currently 58,000+ plugins and 4,000+ themes available in the official directory. For even more options, browse third-party sources like ThemeForest and CodeCanyon.
  • Massive community and documentation. As the most widely used CMS, finding how-to and troubleshooting guides for WordPress is easy with a quick search on Google.

Cons

  • May require some technical knowledge. Having basic technical knowledge about hosting, domain names, and HTML can be an advantage. It’ll make the setup process and troubleshooting more manageable.
  • More prone to security issues. It’s the user’s responsibility to choose a secure web host and take part in WordPress security best practices. The primary cause of attacks is outdated software.
  • No dedicated support. There’s no live chat, phone, email, or any other direct support provided by WordPress – users can only rely on community support.

Website Builder

A website builder is a one-stop solution platform to create websites quickly and simply. While a CMS can significantly simplify website creation, website builders are even easier to use. Some examples of website builders are Zyro, Squarespace, and Weebly.

Purchasing a website builder plan usually includes web hosting, dedicated support, and maintenance.

Expect web design and management tools such as a drag-and-drop visual editor, premade templates, and tools for social media integration, search engine optimization (SEO), and blogging.

Compared to the collaborative nature of CMS, website builders have a more closed-off software ecosystem. Most website builders don’t allow third-party add-ons or templates, and it can be difficult for users to migrate to another platform in the future.

Pros

  • Best fit for beginners. Website builders are undoubtedly the easiest choice to create a website. All you have to do is purchase a plan, and you can immediately start designing your site and publishing content.
  • Dedicated support. Most website builders offer direct support via live chat, email, or phone in addition to community support.
  • Managed security and maintenance. Website builders take care of your website’s security, backups, and other maintenance tasks behind the scenes. Users don’t need to do any of these tasks themselves.

Cons

  • Limited add-ons and templates. Usually, users can only choose one of the templates provided by their preferred builder. Some website builders offer add-ons, but the choices are minimal compared to WordPress’s plugins.
  • Limited flexibility and scalability. Compared to WordPress, website builders only allow users to make a few changes. Also, not all website builders can handle very large websites.
  • Limited ownership. If you build your site using a website builder, your files are automatically stored on the server. You must abide by the website builder’s rules, or you can risk losing your entire website.

Coding Website from Scratch

Another option is to custom build your own website from scratch without a website builder or CMS. This means writing the website’s code using languages like HTML, CSS, and JavaScript.

For beginners who want to get their websites set up and running seamlessly by themselves, a self-coded website is usually the least feasible option.

However, if you have a clear vision that can’t be executed using a CMS or a website builder and you have the budget to hire a web developer, a self-coded website can be a better fit for your project. To better help you decide, check out our WordPress vs. HTML comparison.

Pros

  • Create a fully customized website. Not all website ideas can be realized using a CMS or website builder. A self-coded website makes your unique website ideas a reality.
  • Highly scalable. Without constraints imposed by a CMS or a website builder, you’re free to determine the scale of your website.
  • Better optimization. CMS and website builders have default code built-in to the platforms. With a self-coded website, you only include the code you need, leading to better performance.

Cons

  • Very expensive to make. Unless you’re a web developer yourself, you’re going to have to hire a web agency or freelance developer to create your website. Depending on the scale of the website, this can cost you around $15,000-$75,000 or more.
  • Takes a while to set up. Fully customized websites that are coded from scratch will take more time to create. Depending on the scale of the project, it can take up to 12-16 weeks before the website is ready to launch.
  • Can be challenging to manage. If you’re not well-versed in web development, you must hire a website administrator to maintain and make changes to your website.

We’ll take a deeper look at the most popular CMS, WordPress, and the Zyro website builder in the following sections.

How to Build a Website Using WordPress

In the following section, we’ll guide you through building a website using WordPress, the most widely used CMS. We’ll break down each step, from installing WordPress core to adding pages and eCommerce features using WooCommerce.

1. Install WordPress

There are a few different ways to install WordPress. For this article, we’ll explain the simplest and most common way to install the CMS – using a 1-click automatic installer. Almost all major hosting providers offer this feature on their control panel, including Hostinger.

We’ll use Hostinger’s hPanel to illustrate the steps, but this process should be similar no matter which hosting provider you use.

  1. Log in to hPanel and navigate to Website -> Auto Installer.
The website section of Hostinger's hPanel.
  1. Find WordPress and click Select.
WordPress installation on Hostinger's hPanel.
  1. In the new window, fill out the form with the correct information.
    • Make sure your domain name is correct and that it says “WordPress” next to it.
    • Enter the Administrator Username, Password, and Email. This login information will be used to access your WordPress website’s admin area.
    • Enter an appropriate Website Title. Feel free to enter a temporary title and change it later from the WordPress admin area.
    • Choose your preferred Language from the drop-down menu.
    • For security purposes, select Always update to the latest available version.
  2. Click Install.

2. Choose a WordPress Theme

Choosing a theme is essential to establish the look of your website. Thousands of paid and free WordPress themes are available to install straight from the official theme directory or through third-party sources.

In the following tutorial, we’ll walk you through installing a theme from the WordPress library:

  1. Log in to the WordPress admin area.
  2. Navigate to Appearance -> Themes -> Add New.
  3. Browse WordPress themes that are available in the library. Click on the thumbnails to reveal details about each theme and a preview of how the theme would look on your site.
Theme browser on the WordPress dashboard.
  1. Once you find the theme you want, click the Install button from the preview page.
Installing a theme on WordPress.
  1. Click Activate.

To install a theme from a third-party source, follow these steps:

  1. Download the ZIP file of the theme you want to install.
  2. On the WordPress admin area, go to Appearance -> Themes -> Add New -> Upload Theme.
  3. Choose the ZIP you’ve just downloaded and click Install Now.
Adding a theme's ZIP file on WordPress.
  1. Once the installation is complete, hit Activate.

To customize an activated theme, return to the WordPress admin area and navigate to Appearance -> Customize.

Don’t forget to click Publish to save your changes.

3. Install WordPress Plugins

Plugins extend the functionality of a WordPress site. Some of the best WordPress plugins, especially ones related to automating maintenance and increasing a website’s SEO, are essential for success.

Like themes, you can install WordPress plugins from the library or upload them to WordPress from third-party sources. Here’s how to install plugins from the WordPress library:

  1. Log in to the WordPress admin area.
  2. Navigate to Plugins -> Add New.
  3. Browse or use the search bar to find the plugin you want to install.
  4. Once you find it, select Install Now.
Installing a plugin on the WordPress dashboard.
  1. Activate the newly installed plugin.

Alternatively, follow these steps to install a plugin from a third-party source:

  1. Log in to the WordPress admin area.
  2. Go to Plugins -> Add New -> Upload Plugin.
  3. Select the ZIP file of the plugin on your computer and click Install Now.
Uploading a WordPress plugin ZIP file.
  1. Once the installation is complete, click Activate Plugin.
Activating an uploaded plugin.

4. Build Your First WordPress Page

Pages are used to publish static content for your site. Static content usually remains unchanged for an extended period of time. Some common examples of static content include the homepage, about page, and contact page.

To build a website page, follow these steps:

  1. Log in to the WordPress admin area and navigate to Pages -> Add New.
  2. Start writing the content of the page using the text editor.
Writing the content of a page on WordPress.
  1. Feel free to change the settings on the right sidebar however you see fit. Some examples include changing the Permalink of the page, adding a Featured image, or enabling comments under Discussion.
  2. Once you finish writing the content of the page and checking its settings, click Publish.

5. Create Navigation Menu and Widgets

A navigation menu helps website visitors find specific pages or posts. Without a navigation menu, your website can confuse visitors, making it more difficult to use.

Follow these steps to add a navigation menu to your WordPress website:

  1. From your WordPress dashboard, go to Appearance -> Menus.
  2. By default, there should already be a menu created by WordPress. However, for this tutorial, select Create a new menu.
The first step of creating a new menu on WordPress.
  1. Fill in the Menu Name and click Create Menu.
  2. Under Add menu items, select the Pages, Posts, Custom Links, or Categories you want to add to the menu. For example, we’ll choose the About, Contact, and Blog pages. Next, click Add to menu.
Adding menu items to a custom menu on WordPress.
  1. The selected menu items will transfer to Menu items. Drag and drop each menu item to rearrange its position. For example, we’ll make the About page the first menu item.
Rearranging a custom menu on WordPress.
  1. You can also create a drop-down menu by dragging a menu item further right. This action will transform the menu items above it into the parent menu.
  2. If you want to rename the label of a menu item, expand a menu item by clicking the reversed triangle button. Under Navigation Label, type the new name.
Renaming custom menu items on WordPress.
  1. Under Menu Settings, choose whether you want to Auto add pages to the menu.
  2. Then, pick a Display location for the menu. For example, we want this to be the main menu, so we’ll set it to Primary.
Choosing the display location of a custom menu on WordPress.
  1. Finalize your changes by clicking Save Menu.

After adding a navigation menu, consider adding widgets to your website, too.

A widget is a website element that serves a specific purpose. Some widget examples include archives, recent posts, calendars, and the search feature. Widgets can be placed in the sidebar or footer of your website, depending on the theme you use.

Here’s how to add widgets to WordPress:

  1. From the WordPress admin area, go to Appearance -> Widgets.
  2. Drag the widget you want to add from under Available Widgets to Footer. Depending on your theme, you may also drag a widget to the Sidebar. For example, we’ll add the Recent Posts and Search widgets.
Customizing widgets on WordPress.
  1. Enter the Title for each widget. Other settings may be present depending on the type of widget. Choose your preferences for those settings, as well.
Setting Widget preferences on WordPress.
  1. Save your changes.

If you can’t find the widget you’re looking for in the WordPress admin area, consider installing themes that include pre-made custom widgets. Alternatively, installing plugins like SiteOrigin Widgets Bundle can add variety to your widget options.

6. Optimize for Search Engines

To earn organic website traffic, optimizing WordPress website for search engines is a must. We’ll explain three easily practical SEO tips for WordPress beginners.

First, adjust the permalink structure of your website. WordPress’s default permalink structure is long and complicated, which isn’t ideal for most search engines. Here’s how to make your permalinks more search engine-friendly:

  1. In your WordPress admin area, go to Settings -> Permalinks.
  2. Under Permalink Settings and Common Settings, make sure to select Post name.
Customizing permalinks on WordPress.
  1. Select Save Changes.

Secondly, add the website to Google Search Console. Google Search Console provides information about the performance of your website. Specifically, your ranking for specific keywords and which sites are linking to you.

The process of adding your website to Google Search Console involves verifying ownership over the domain of the website you’re registering.

The third and final tip is to install an SEO plugin. One of the most popular SEO plugins is Yoast SEO.

The Yoast SEO banner.

The plugin will offer SEO tips and suggestions as you are writing or editing your content. It can help you target a certain keyword better, therefore increasing your chances to rank higher.

7. Add a Contact Form (Optional)

Contact forms allow visitors to send messages directly to the website administrators. It’s an excellent way to communicate with your audience and increase engagement.

To add a contact form to your website, install a contact form plugin of your choice. As an example, we’ll use one of the most popular contact form plugins – WPForms. Follow these steps:

  1. From your WordPress admin area, install and activate WPForms.
Installing the WPForms plugin on WordPress.
  1. Once activated, go to WPForms -> Add New.
  2. Enter a Form Name.
  3. Select a template that fits your purpose. In this example, we’ll select the Simple Contact Form option.
Selecting a WPForms template for a form.
  1. You’ll be taken to the editor. Change the existing fields or add new ones based on your needs.
Customizing a form on WPForms.
  1. Once you’re happy with the form, move on to the Settings menu from the sidebar and select Notifications. Make sure your email address is correct so that you’ll be notified appropriately whenever someone sends a message through the form.
Customizing the notifications WPForms will display when a form is submitted.
  1. Select Confirmations and compose a confirmation email that will be sent to everyone that reached out to you via the contact form. We suggest including a time frame estimate of when you’ll reply to each message.
Setting up a confirmation email that will be sent upon submitting a form.
  1. Click Save in the top-right corner to finalize your form and all its settings.
  2. Return to the WordPress admin area and go to Pages -> Add New to create a page for the contact form. The Contact page is usually a good fit for this form.
  3. In the block editor, click the plus icon and select WPForms.
Adding a WPForms block in WordPress block editor.
  1. From the drop-down menu, select the form you want to add.
  2. Click Publish.

8. Introduce eCommerce Features (Optional)

If you want to build an online store and sell products on your business website, adding eCommerce features is essential. There are many plugins that add eCommerce functionality.

However, the open-source platform WooCommerce is the most widely used one.

The banner of WooCommerce.

Simply install and activate the free WooCommerce plugin. Complete the setup process, in which you will enter your business details, choose the type of online shop you want to run, and select a WooCommerce theme. Then, add your products and set up shipping, tax, and payment gateways.

If you find that you need extra features, browse hundreds of WooCommerce extensions available in the library. These extensions work similarly to how plugins work for core WordPress.

9. Start a Blog (Optional)

Even if your website isn’t focused on blogging, adding a blog page can be very beneficial. Blog posts are an excellent opportunity to reach your target audience and promote your entire website. They also keep your website fresh, which is excellent for SEO.

For example, if your eCommerce store sells jewelry, add blog posts about how to style jewelry with certain looks. Include appealing product photos and links to buy your jewelry on your blog page. Offering value in the form of fashion tips can encourage your readers to become customers.

To create a blog post, log in to the WordPress admin area and navigate to Posts -> Add New. Using the block editor, write your blog post, add images, and adjust preferences in the settings.

How to Build a Website Using a Website Builder

The following section will explain how to create a professional-looking website using the website builder Zyro. It offers a quick and stress-free way to set up, design, and manage a website or an online store.

Zyro's homepage.

All you need to do is sign up for a Zyro account and pick the plan that suits you best. Zyro offers four different plans:

  • Basic – best suited for personal blogs and small websites, starts from $2.90/month.
  • Unleashed – excellent for small business owners, starts from $3.90/month.
  • eCommerce – perfect for online stores, starts from $9.90/month.
  • eCommerce Plus – dedicated for large, advanced online stores, starts from $14.90/month.

Purchasing the Unleashed, eCommerce, or eCommerce Plus plan for at least one year will make you eligible for a free domain name for one year as well.

After purchasing a plan, you can create a website right away. Take a look at the following Zyro website builder tutorial:

1. Choose a Website Template

  1. Log in to the Zyro dashboard and select Create new website.
  2. Select Choose a template.
Choosing how to create a website on Zyro.
  1. You will see a library of more than 50 free templates offered by Zyro. Feel free to browse to find the template that will fit your website best.
Zyro's website template selection page.
  1. To see a live preview of a template, hover over its thumbnail and select Preview.
The option to preview a Zyro template.
  1. Alternate between different screen sizes by selecting the device icons on the top left.
  2. If you’re satisfied with the preview, proceed by selecting Start Building.
Starting to build a website on Zyro using the Navy template.

2. Add Pages to the Website

After selecting a template, you’ll be taken to the drag-and-drop website editor. Here, you’ll be able to customize the look of your website and adjust many website-related settings.

Usually, every template comes with premade pages. However, if you want to add new pages or recreate a premade page from scratch, doing so is easy.

Follow these steps to add a new page to your website:

  1. On the left sidebar, select the top icon that represents Pages and navigation.
Clicking Pages and navigation on Zyro website builder.
  1. Select Add page.
Adding a page on Zyro website builder.
  1. Choose Add blank page.
Adding a new page on Zyro website builder.

Alternatively, you can expand an existing page by adding a new section. With Zyro, there are available pre-designed sections to choose from. Keep in mind, however, that creating a new section from scratch is possible as well.

Here’s how to add a new section to any page:

  1. Hover your cursor over the space between two existing sections until the Add section button appears. Then, click it.
Adding a section on Zyro website builder.
  1. Choose between two options – a pre-designed section or a blank section. There are dozens of pre-designed sections available in many categories, including slideshows and testimonials.
Selecting a section to add on Zyro.

3. Personalize the Website

Once you’ve added all the pages and sections your website needs, it’s time to customize your website. Although the templates are already well-designed, it’s essential to make your website stand out with a unique look.

We’ll explain several ways to personalize your Zyro website. First, change the color palette of your website.

  1. Click Styles located on the left sidebar.
  2. Feel free to choose one of many color combinations. Select Change colors to adjust each color further.
Changing the color of elements on Zyro website builder.

Similarly to how you’d change the color palette, you can also change the style of the website text universally by going to Website styles -> Text.

To change the color of individual sections:

  1. Select the section you want to adjust and click the Edit section represented by the gear icon.
  2. Navigate to Background -> Color. Feel free to pick a color from the current theme or browse Custom colors.
Customizing colors further on Zyro website builder.

To adjust any individual text, select it and click Edit text. A lineup of formatting options will appear.

Aside from the essential options like font type, font size, and text color, you can also use Zyro’s AI content generator to generate content for you.

Next, display a logo of your personal brand or business. Make sure you have an upload-ready logo. If not, create one using a free logo maker such as Zyro’s logo maker.

  1. To upload your logo, click anywhere over your header and select Change logo.
Changing the logo on Zyro website builder.
  1. Under the Logo tab, click Replace image and upload the logo from your computer.
Replacing the current logo on Zyro website builder.
  1. Adjust the logo width, menu item spacing, and logo position to your liking.

4. Add Extra Elements

Every template comes with pre-included elements. However, if you need extra elements, adding and customizing them is easy:

  1. Click the Add element icon on the left sidebar.
Adding an element on Zyro website builder.
  1. Choose which type of element to add. Simply drag and drop the new element to the location you want.
Choosing the element to add on Zyro website builder.
  1. Adjust each element by selecting and clicking Edit.

Your Website Is Now Online – What’s Next?

Congratulations on successfully creating a new website. However, there is more work to be done if your website is to succeed. Here are some post-launch tips you should consider:

Conclusion

This article went over the ways to prepare before making a website, website platforms and their pros and cons, and a step-by-step guide to create a website using a CMS and a website builder.

The two platform types we focused on, CMSs and website builders, are built for different purposes. While website builders struggle with flexibility but shine when it comes to user-friendliness, CMSs are very flexible and require a steeper learning curve.

Whichever platform you end up using, remember to keep your website content fresh and to be on top of its maintenance to ensure success.

Author
The author

Hasna

Hasna is a content writer at Hostinger. She's passionate about tech, digital media, and sharing her knowledge with others. In her free time, she likes to lose herself in fictional worlds.