How to Build a Website in 2023: Step-by-Step Guide

Getting your website online can seem like a daunting task – but if you follow the right steps, it can be easier than you might think. You don’t need to be a web design expert with years of experience to build a great-looking website. It doesn’t have to cost a fortune, either!I’ve been building websites for over ten years and reviewing web hosts and website builders for almost as long.There are two ways you can build a website. The first option is to use a website builder – a platform that’s designed to make it easy for anyone to build a website, even with no previous experience or technical skills.The second way is to use WordPress. This can take a little more work, but it’s still pretty easy if you are technically inclined, and it gives you more flexibility. Email marketing has the power to grow your business quickly. It has a high click-through rate (CTR), too – up to 100x better than social media channels like Twitter.

Option 1: Using a Website Builder

A website builder is an online tool that makes it super easy to build a website. Website builders can be quite powerful but require no coding or technical skills, which makes them accessible to beginners and useful for professionals.Their intuitive interface and flexible features mean that you can use a builder to create a website that looks great in a matter of hours – or even minutes. Most website builders are budget-friendly, and many of them offer free plans or free trials, so you can get started without having to spend a dime.Website builders come with pre-designed templates that set the style, layout, and color scheme of your site. All you have to do is pick one add your own content and images, and personalize it with your own branding. Depending on the builder, you’ll have access to different methods of building and editing your site. I personally prefer drag-and-drop editing, as it gives you more control over the layout while keeping the process pretty simple. You can position elements wherever you like, or add new elements by simply dragging them into place.Some builders offer a selection of apps to choose from. This is an easy way to add functionality to your site or integrate it with another service. You can add a mailing list, an appointment booking system, a live chat box, or pretty much anything you can imagine, usually at no added cost.Though there are plenty of website builders out there, their quality greatly varies. My personal favorite is Wix, as it offers hundreds of templates and great flexibility, with lots of free (and paid) apps. Check out our guide to the best website builders for some other excellent choices.

Using a Website Builder: Step-by-Step Guide

1. Decide what kind of website you want to buildWith most website builders, you can create just about any type of website you can imagine. You may want to create a personal website, a blog, an online portfolio, or interactive a resumé/CV. If you’re an entrepreneur, you might need a website for your business, or an online store to sell your products or services.You don’t even need to limit your site to a single purpose. For instance, you might want to create a website for your business that also has a portfolio of your work and an online store. With the right builder, the possibilities are only limited by your imagination.

2. Choose the right website builder for your needsBuilders will have different strengths and features, so you need to choose the right builder for your needs. For example, while most builders come with some sort of online store feature or add-on, a builder like Shopify is specifically designed for e-commerce. On the other hand, its general-purpose features, such as blogging, are very limited.For my money, the most flexible website builder is WixIt has excellent e-commerce features, tons of apps, and its drag-and-drop editor gives you complete control over how your website looks. Wix sits at the top spot of our best website builders list, and I’ll be using it to demonstrate the steps to building your website in this guide. That’s not to say that it’s your only option though – you should be able to follow these steps with most quality website builders.

3. Choose a planMost website builders have a free plan, or at least a free trial period. If you’re just getting started with your website, or if your budget is tight, a free plan can be the best solution. Free plans give you the chance to try out a website builder without investing upfront.The downside, however, is that free plans often come with a lot of restrictions. You’ll be limited to using your website builder’s URL (e.g., username.wixsite.com/yourcompany). That’s fine if you’re creating a website as a hobby, but if you’re using your website for business, you really need a custom domain name (yourcompany.com) that’s easy for your customers to remember.Also, if you use a free plan your website will be full of the builder’s branding, which can look unprofessional.Free plans also tend to restrict the amount of traffic you can get, and many useful features such as installing apps or accessing tools for e-commerce might be locked behind a paywall. If you’re serious about your website, you’ll likely need to upgrade to a paid plan.It’s important that you know the type of website you want to build before choosing a plan. That way, you can select a plan that’s better suited to both your budget and your needs. For example:

  • If you want to sell online, you’ll probably want to go for a designated business plan (or, at the very least, a plan with the necessary tools for e-commerce). Wix has general and business/e-commerce plans to choose from, but you can only accept online payments on the business/e-commerce plans.
  • If you want to showcase your work by hosting a lot of videos or high-resolution images on your website, you’ll need a plan with a lot of storage and bandwidth. For instance, Squarespace gives you unlimited photo storage on every plan, including its cheapest.

I recommend going for the lowest-priced plan that gives you all the features you need right now. If your needs change, you can always upgrade to a higher-priced plan in the future.

4. Get started: Choose a templateThe first step in the process will always be choosing a template. All website builders use templates (some builders call them themes, but they mean the same thing) as the building blocks of your website. Templates are professionally designed to work on all types of devices, and they allow you to get your website online in a relatively short amount of time.The template sets the style and general layout of your website (although you can customize it later), providing you with a framework that you can customize and use to add your own content.Most website builders have template libraries that you can browse even before you sign up. Templates are arranged in categories, as you can see in the screenshot from Wix’s template gallery. Categories aren’t meant to be restrictive (it’s not that you can’t use a portfolio template for your blog), but each category contains templates that are specifically designed for different types of websites.The best templates look fantastic right out of the box. As far as I’m concerned, Squarespace has some of the most visually stunning templates out there.

1 3

5. Customize your templateTechnically, you don’t have to make any customizations to your website template once you’ve chosen it – but regardless of how well-crafted a template is, customizing your website is what truly makes it your own and sets it apart from other websites (especially those using the exact same template). A good place to start would be changing your template’s colors and fonts to match your business branding.Although different builders will give you varied levels of customization, one of the huge advantages of using a builder is that they make customization rather easy. While each website builder will have its own unique editor, everything I’m about to demonstrate in Wix can be accomplished through similar steps in other builders.

Changing fonts

Changing the fonts on Wix is simply a matter of clicking on the text you want to change and hitting the Edit Text button. You can edit each text box separately or use the Save Theme option to apply your font changes across your whole website.With Wix, you can choose different fonts for different text types – for instance, you can choose one font for Heading 1 to use as your main heading (like in the template I’m demonstrating below), and another font for your sub-headings. You can even have a different font for paragraph styles, if you like.

2 4

Some website builders only allow you to change the font style for the whole website, rather than for individual headings and paragraphs. Though that limits your options somewhat, I’d recommend you keep a consistent style throughout your website anyway.

Changing colors

You can easily change the color of your fonts in the text settings box, but it’s just as easy to change the color of other elements, like backgrounds of columns. For example, you can use a solid color background using the color picker tool as demonstrated in the screenshot below.Wix automatically creates complementary color palettes to match your theme, but you can change the palettes by using the “change your site colors” option. You can also add your own colors to match your branding.

3 2

Moving elements around on your pages

Drag-and-drop editors make rearranging your page’s content a simple matter of, well, dragging it from one place to another. Wix is unique in the amount of control it gives you over arranging your page’s layout, but other drag-and-drop editors will give you similar features.Other editors may offer an up/down button method for moving sections around on your web page. Block editors work like a middle point between the two, with pre-made blocks (text, image, video, columns, etc.) that you can arrange in a grid, giving you more flexibility than just moving content up or down, but not as much room to play around with as a drag-and-drop editor.One thing that I particularly like about Wix is the Zoom Out and Reorder function. This allows you to view your whole web page and easily move sections and/or elements around on the page. Below, you can see how easy it is to move content using this tool.

4

6. Add your own contentWhen it comes to adding your own content, all you have to do is replace the “placeholder” text and images in your template with your own text and media. It might take some time if you have a lot of content, but the overall process is really simple.If you don’t have your own images, most website builders offer some kind of image bank that allows you to instantly add free images to your site.

How to add text
You can add new text sections to your web pages in just a few clicks. In Wix, you use the Add tool in the toolbar on the left and then select Text in the pop-out menu.I recommend setting up the main areas where you want to add text first and then going back to add your content. You can use our free Lorem Ipsum Generator to create placeholder text to use until you’re ready to add your own text.

7 4

How to add an image
Like adding text to your website, adding images is incredibly easy. In Wix, open the Add menu, select Image (directly below Text), and choose from the range of image sources. You can upload your own images, use free Wix images and illustrations, search the Unsplash images database, or choose premium stock images from Shutterstock (for an added fee). Then, all you have to do is place the image where you want it on your page.You can also use the Add Image tool to add a logo to your website. I’ve got some advice about logos further on in this article.If you’re using free Wix or Unsplash images, these may be already optimized – meaning that they’ve been compressed to smaller file size so that they won’t slow your website down. If you’re using your own high-resolution images, however, it’s a good idea to reduce the file sizes before you upload them. That’s easy to do with a free tool such as our Image Compressor.

5 5

How to add a page to your website
Most templates will come with several pre-designed pages, such as HomeAbout Us, and Contact. If you want to add more pages – a Services or My Work page, for example – you can do this by clicking the Menus and Pages button on the left toolbar and selecting the Add Page button at the bottom of the pop-out menu.

6 4

When you add a new page to your site, it will automatically show up in your navigation menu.7. Add appsApps are third-party or native integrations that help expand the functionality of your site. Although not all website builders have apps, some builders likeWix have hundreds of apps to choose from. Many of them are free, and even the paid apps often come with a free version or a free trial period.You can use apps to add extra features to your website in a matter of minutes. For instance, Wix’s app market allows you to add features like online booking, live chat, newsletter signup, social media integration, and much more to your site.

8 5

To add apps to your Wix site just click the App Market icon (it should appear as four small squares on the left toolbar). From here, you can search for a specific app, or browse the categories to find new ideas.Once you’ve found an app you like, just click on it, and then select Add to Site.

9 3

Once the app is installed, it’s immediately available on your web page. In this example, I added the Rollover Image Effects app for advanced image editing and it was available on my webpage within 30 seconds!8. Choose a domain nameBefore you publish your website, you’ll need to choose a domain name. If you’re on a free plan, you’ll have to use a sub-domain (e.g. yourusername.wixsites.com/yourwebsitename). If you sign up for an annual paid plan, most builders will include a free custom domain name for the first year.Most website builders will give you the option of registering and setting up your domain name. That means that all you have to worry about is choosing the best domain name for your website. Having the right domain name is absolutely crucial though, so don’t rush this step! Even with the perfect name in mind, one of the biggest issues you’ll have to deal with is whether the domain name you want is actually available.If you’re having trouble deciding, check out our complete guide to choosing your domain name!9. Preview and publish your websiteNow that you’ve added all your content and chosen your domain name, it’s time to get your website online. With most website builders, this is really just a matter of clicking a button (or two).Don’t rush to hit the Publish button yet – it’s always a good idea to use the Preview option to make sure you’re happy with your site before going live. Previewing allows you to see your site the same way your visitors will, without the distractions of the editor. Besides, if there’s any spot where you forgot to add your content, or any blank pages you forgot to fill, previewing your site can help you catch those small details before anyone else does.Most builders will also let you preview the mobile version of your site. Always make sure that your site works and looks good on mobile devices too.

10 2

Once you hit Publish, your website is live, and you can start promoting it!

Website Builder Comparison Table

11 4

Option 2: Using WordPress

Website builders are absolutely the easiest way to get your website online, but they can be a little more expensive than using WordPress with a web hosting plan. If you’re looking for a budget-friendly option and you don’t mind a slightly more technical site-building process, then WordPress might be the choice for you.Now, there are two versions of WordPress: WordPress.com, which is a simplified version, and self-hosted WordPress.org. In this section, I’ll be discussing self-hosted WordPress.WordPress isn’t quite as simple to use as a website builder, but it’s still pretty easy to get started with – and its massive range of free templates and plugins give you almost limitless options for customizing your website. Though the process is a bit more technical, you don’t need to know how to code or have a lot of experience to build a great-looking website with WordPress.

Step-by-Step Guide

1. Choose a hosting planAlthough WordPress itself is 100% free, you’ll have to sign up for web hosting to make your website available online (unlike with website builders that provide hosting with their plans). For a more in-depth look, you can check out our shortlist of the best web hosts in 2023.There are lots of web hosting options available – but here are the ones that consistently top our recommendations.

Our Top Web Host Recommendations for WordPress Websites

  • Hostinger  One of the cheapest hosting providers around, Hostinger is ideal if you’re on a budget. Its excellent loading speeds (that we’ve tested thoroughly) and simple 1-click WordPress installer make it our overall best choice. If you opt for managed WordPress hosting, you’ll benefit from enhanced security and servers that are optimized for WordPress.
  • InterServer – With its low monthly hosting price and unlimited storage, InterServer is an excellent solution if you’re a growing business. Because its servers are located in the US, it can provide great loading speeds for a US-based target audience.
  • A2 Hosting – Offering standard shared hosting or managed WordPress hosting, A2 Hosting is a ‘green’ hosting company that works to reduce its carbon footprint. It delivers great speeds, and it’s also great for security, with its own HackScan threat detection and removal tool that’s included free.
  • Nexcess – If you don’t mind going for a more costly option – so long as you get premium managed hosting in return – Nexcess could be the best hosting option for running your WordPress website. With Nexcess, you can rest assured that every part of the hosting process is being taken care of by consummate professionals
  • Kinsta – Managed hosting (i.e., all the hard work comes pre-done) and lighting fast speeds make Kinsta a fantastic choice in almost any regard, so long as you don’t mind a lighter wallet. Despite its fantastic value, Kinsta is still quite pricey, but rest assured, you’re paying premium prices for a premium service.
  • InMotion Hosting – Another top-tier choice for US-based hosting, InMotion Hosting sacrifices some (though not that much) of InterServer’s speed in exchange for top-tier support. If you’re looking for great hosting within the US, and dependability is on the top of your list, InMotion might just be the choice for you.

When you’re choosing a host for your WordPress website, there are some features you should look for:

  • SSL certificate. An SSL certificate makes your website secure, ensuring your site has the little padlock icon in the address bar of web browsers. Most web hosts will include one for free. Once your website is live, you can check that the SSL certificate on your website is working properly with the SSL Checker Tool.
  • WordPress optimization. The best web hosts for WordPress have specially optimized servers to improve performance, so your web pages load faster.
  • Security features. Some web hosts charge you extra for essential security, so you should try to find one that includes important features such as malware protection, firewalls, and automatic backups.

2. Choose a domain nameThis process is pretty much the same for using WordPress as it is for website builders. Some web hosts include free domain names with annual plans, but not all do. If you choose a host that doesn’t offer a free domain name, it may be cheaper to buy your domain name from a third party rather than through your web host. You can pick up a domain name for as little as $1 on some domain marketplaces.

3. Use a one-click installer to install WordPressSome hosting plans come with WordPress pre-installed. If your plan doesn’t, don’t panic – you can use the one-click installer provided by your host.“One-click” might be a bit of a misnomer, but it’s not too far off – with just a few clicks, these tools set up all the scripts and databases needed to make WordPress work on your website. All you really have to do is come up with a username and password that you want to use to log in to WordPress once the installation is complete.Different hosts may use different one-click installers, but essentially they’re all the same, and they’re all very easy to use.

12 1

4. Access WordPress through your hosting dashboard

The exact way you’ll access WordPress may vary depending on your web host. In most cases, however, you’ll find the option for managing your WordPress website in your hosting dashboard.

I’ll be demonstrating this using SiteGround. In the screenshot below, you can see that there’s a button to automatically log in to my WordPress website’s dashboard. Other hosts might make you type in your WordPress username and password to log in.

13 1

If this is your first time using WordPress, the dashboard may seem a little overwhelming, but don’t panic, it’s actually quite easy to navigate. Below is a screenshot of the dashboard with all the important elements labeled for you.

14 1

WordPress uses some jargon that’s different from website builders, so to make things easy, here’s a brief rundown of the different sections of the WordPress dashboard:

15 1

5. Choose a theme

Themes in WordPress are very similar to templates in website builders. The biggest difference is that in WordPress, themes control more than just the general style/layout of your website. A particular theme can often include certan plugins (or “required plugins”.)

16 1

WordPress’ default theme is pretty basic, so you’re probably going to want to look for a different one. Thankfully, the WordPress theme installer makes this extremely easy. You can search the WordPress theme repository to find and install any of the thousands of free themes available in an instantYou can even install multiple themes and use the customizer to see how they will look on your website before activating them.

17

In addition to the free themes offered by WordPress, you can purchase thousands of premium third-party themes from marketplaces like TemplateMonster and ThemeForest.

6. Add plugins

Plugins are similar to the apps offered by website builders – they add extra features to your website that aren’t included in WordPress itself. For example, you can install a plugin to create a contact form (e.g., NinjaForms) or build an online store using WooCommerce. Chances are, if you can think of a feature, there’s a plugin for it, from SEO to creating an online portfolio.

18

Use the search box to help you find the plugins you need. There, you’ll also find information about each plugin, including whether it’s compatible with your version of WordPress, what features it has, and what other users think about it.

19

It only takes a single click to install a plugin, but your plugins will only work on your website when you have clicked the “activate” button in the plugins panel.

7. Create your first post

One of the most frequent questions I get asked about WordPress is regarding the difference between pages and posts. Essentially, pages are the static content – i.e., the content on your website that doesn’t change or doesn’t change very often, such as an About Us page. Posts are more dynamic – they show up on the ‘blog’ page or category pages of your website. The key difference between pages and posts is in the way WordPress displays them on your site.

The editor for creating posts and pages is exactly the same, so the process for creating pages and posts is identical. In the screenshot below, you can see that when you click on the “posts” panel of the dashboard, you’ll see a list of your existing posts (some themes come with “demo” content), with an Add New button at the top.

20

Clicking the Add New button will take you to the editor. WordPress’s default editor used to be pretty basic, but the Gutenberg version that was introduced with WordPress 5.0, along with the new features of 6.0, give you much more flexibility. Gutenberg uses “blocks” to create your posts and pages, along with layouts (columns), sections, and containers.

Using free plugins, you have the option to add more blocks to the Gutenberg editor. Additionally, third-party site-building plugins allow you to alter the way you edit your site.

21

Block types included in the standard Gutenberg editor include:

  • Paragraph
  • Heading
  • Quote
  • Image
  • List
  • Cover image
  • Gallery
  • Slideshow
  • Table
  • Buttons

To choose a block, you can click the “+” icon at the side of each paragraph area or type “/” into the free space labeled “start writing or type / to choose block.”

22

8. Publish your site

Unlike some website builders (such as Wix), WordPress doesn’t have a specific Publish button for your whole website. As soon as you create your WordPress website, it’s live on the internet. However, there are three separate places where you’ll find Publish buttons in WordPress.

These are:

  • In the customizer, where you’ll see a button at the top of the panel which saves changes and makes your customizations live.
  • At the top right of each new post you create, you will find the option to publish. Until you click publish, your post will remain a draft and won’t be visible to others. If you decide to make edits later on, simply click update to make your changes go live.
  • At the top right of each new page you create. As with posts, your content is just a draft until you publish, and when you make edits you need to click update or your changes won’t be saved.
23

Consider Spending $5 on a Web Developer and Save Time and Frustration

If you’re short on time or just don’t want to deal with any problems that could occur when building a WordPress website, then hiring a professional to build (and, perhaps, maintain) your website could be a better choice.

Hiring a developer sure sounds expensive, but thanks to the rise of freelance platforms like Fiverr, you don’t have to spend a small fortune. I just did a quick search on Fiverr for full WordPress website creation and found plenty of professional website designers offering to build your website for as little as $5!

24

What makes Fiverr stand out is its feature allowing you to peruse samples of a designer’s work, helping you decide if they suit the kind of website you envision. Furthermore, Fiverr ensures full protection for you as it holds your payment and only releases it to the freelancer once you express satisfaction with their work.

Scroll to Top