How to build to website

How to Create a Website

An Easy, Step-by-Step Guide for Beginners

I wrote this SIMPLE guide to help anyone – from bloggers to small business owners – make their own website without having to learn code. You don’t need to spend money on web developers and designers. Believe it or not, most of you will succeed.

If you get stuck, contact me and I’ll help you out for free.

3 Simple Steps to Make Your Own Website

You’ll learn how to.

Last updated: August 10, 2022

Creating a website from scratch isn’t as difficult as you might think.

About ten years ago, website building was still pretty much in its infancy. Nowadays, even a complete beginner can learn how to create a website without any basic computer skills.

Whether you’re a tech-savvy person or a novice, this guide will help you get started and build your own website.

I have also covered the most common mistakes people make when building a website, so you can avoid them.

If you ever get stuck setting up your website, don’t hesitate to contact me.

Full disclosure: I’m partnered with some of the tools and services that are listed on this page. I’ve used most of them for my own purposes. This helps me to provide free help via email and keep this guide up to date.

Step 1: Grab a Domain Name

(If you already own a domain name, you can skip this step and move to Step 2.)

First things first: every website needs a name.

Without a name (also known as a domain name), your website simply cannot function. Think of it as a street address for a house, where the address is the domain name and the house is your website.

When choosing a domain name, there are a few rules you should keep in mind:

There are hundreds of different domain name extensions (TLDs).

Whichever domain provider you use to register your domain name, make sure they’re accredited by the ICANN.

The domain registration process is quite simple. It takes less than five minutes to buy the domain and complete the registration, but it’s an important investment in your website early on.

Step 2: Choose a Website Building Platform

Your next step is to pick a platform that your website will be built on.

However, there are hundreds of different tools (and ways) to build a website. And the first mistake that most people often make is they pick the wrong platform to create their site.

If you choose a platform that isn’t good or flexible enough, you’ll need to start all over again with another platform. It’s doable, but not recommended (since it’s a waste of your time and money).

In order to help make your decision easier, I’ve compiled the statistics (1, 2, 3) to show how websites are being built. Take a look at this graph below:

How websites are being built in 2022

This data shows the market share percentage of 200+ different website building platforms (known as website builders and content management systems).

Two website building tools, Shopify and WordPress, are the most commonly used.

And they’re the most popular for a reason.

WordPress is the most flexible (free) tool to build any kind of website, from small to large, and it’s suitable for beginners.

Shopify offers a website building service to create your own website and online store. This is ideal for smaller brands, businesses, and individuals who need a simpler site.

The other ones aren’t bad either, but since I’ve used them all, I know that I’d still use WordPress or Shopify over any of the others.

How much does it cost to set up your site?

Whichever option you decide upon, I’ve made step-by-step guides for both of them.

How to Set Up Your Website With a Website Building Platform

Now for the exciting part.

In the next hour or so, you’ll have a fully working website on your own domain. Do not skip any steps, otherwise, your website might not function as it should.

Remember: I’m here to help. If you have any questions about the guides or simply need some help, don’t hesitate to reach out. I’ll do my best to support you.

To get started with setting up a website with WordPress, you first need to sign up with a preferred web hosting provider. Luckily, almost all well-established and reliable web hosting companies have integrated one-click installation for WordPress, so it’s made it very easy for you.

These are the steps you need to follow to install WordPress with Bluehost (the process is very similar if not the same across all the most popular web hosting companies):

Step 1. Go to Bluehost.com

Once you arrive at their homepage, click “Get Started Now”. After you’ve done that, you’ll be redirected to their hosting plans page.

Step 2. Choose a hosting plan

Bluehost offers three shared hosting plans. For this guide, we’ll opt for the “Basic” shared hosting plan. The basic plan is a good choice if you’re just starting out and don’t yet have a large volume of inbound traffic to your website.

Click “Select” when you’re done.

Note: you can always upgrade your plan later if you need to.

Step 3. Set up your domain name

The next step is to connect your domain name with Bluehost, or you can also register your new domain name directly with them. If you’re not sure about the domain name yet, there’s an option to skip this step.

If you need additional help connecting your domain name with Bluehost, you can follow their detailed article on how to do so.

In this example, I registered a new domain called myremarkablesite.com.

Once you’re done, click “Next”.

Step 4. Create your account and check your package information

Simply fill out all the required information, such as your first and last name, address, email, and so on.

When you scroll down, check your package information and the add-ons that are included. Remember to select only those that you need.

Before you enter your payment information, double-check all the above criteria, and if everything is correct, click “Submit”.

Now create your account user and log in to your client area so I can show you how to install WordPress.

Step 5. Install WordPress

After you’ve logged in to your Bluehost account, you should see the following page:

All you have to do is click on the “Create your website” button.

The next step is to decide the purpose of your site. You can choose between Blog, Store, Business, or Portfolio/Resume. If any of those don’t quite fit, you can select an option in the “Other” dropdown list.

Next up is to choose how you’d like to build your WordPress site. Bluehost gives you an option to choose between Bluehost and WordPress.

Since I want to focus on theme-based site building, I chose the latter.

Installing WordPress through Bluehost

Click “Get started” and let’s move on to the next step.

Step 6. Start customizing your WordPress site

Before we can get down into the nitty-gritty, Bluehost will ask you what type your website is, and once confirmed, it’ll suggest a few plugins and extensions.

In my example, I categorized my blog as “Education”. Once you’re done with your decision, click “Continue”.

Of course, you can also skip this step.

Step 7. Pick your theme

Now is the time to pick your theme. Bluehost will give you a bunch of free and premium themes to choose from. Moreover, you can sort the themes by popularity, category, features, and layouts.

Once you’ve found your preferred theme, hover over the option and click on “Use This Theme”. In my example, I’ll be using the theme “Twenty Twenty-One”.

Note: if you change your mind, you can always modify your theme later on. To do that, log in to your WordPress dashboard and navigate to Appearance > Themes. From there you can browse a whole host of themes or even upload your own custom theme.

Step 8. Customize your design

After you clicked on “Use This Theme”, you should now see the following page:

This is your Bluehost client area, and from there you can log in to your WordPress dashboard and also update or add plugins.

Note: you can also modify and install plugins from your WordPress dashboard under the tab “Plugins”.

However, right now, what’s important for us is to start customizing the new WordPress site.

For that, all you need to do is click on the “Customize site” button, and you’ll be redirected to the editor page:

On the left sidebar, you’ll see the options that will allow you to modify your website’s design, such as:

Note: the options that appear will vary depending on which theme you’ve installed.

You also have the option to add CSS (Cascading Style Sheets) to your site to make it even more unique.

I recommend playing around with the editor and testing different fonts and color schemes to get a sense of how you want your site to look.

Once you’ve tweaked your site’s design to perfection, it’s time to move on to pages and content.

A great alternative to WordPress, especially when it comes to e-commerce, is Shopify. Shopify is the second most popular CMS on the market, and for good reason. It’s intuitive and has a ton of flexibility and options to cater to any online store’s needs.

Here is a step-by-step rundown on how to get started with Shopify:

Step 1. Go to Shopify.com

Shopify offers a 14-day free trial, which means you can test their full online store builder out without even needing to add a payment method. The only limitation with the trial is that you can’t have or connect a custom domain name. Instead, for the trial period, it will default to YOURSTORENAME.myshopify.com.

Fill in your email address, a secure password, and your store name. For the name, you can enter a temporary one if you’re still undecided. You can change your store’s name at any time.

Step 2. Fill in their questionnaire

To make the store set-up process easier, you need to complete a quick questionnaire. The questions are quick and easy, and whatever you choose now can be changed later on if you’re unsure what to answer.

Once you’ve completed the quiz you’ll be redirected to your online store manager page. At first glance, it may feel a bit overwhelming, but with some practice and guides, you’ll quickly learn that it’s very intuitive and gives you a lot of freedom and customization options.

Step 3. Setting up your store

Shopify already has a great step-by-step built-in system to help you set everything up. In order to get your shop started, you need to complete five steps:

Adding Products

If you don’t want to use dropshipping, then on the left-hand menu, navigate to the “Products” section. Over there, you can either add your own products to sell or even find third-party products that you can resell.

At first, I recommend adding between one and four products so you can get familiar with the system and make the theme customization and testing easier. You can always go back later and add your full product range and categories.

Customizing your theme

Once you’ve added a few products, head over to “Online Store” and then select “Themes”.

Over there, you can scroll down and explore their selection of themes. A lot of them are free to use, but they do offer premium themes as well. Choose a theme that suits the product type that you plan on selling. If you click on the themes, they all offer a demo website to give you a more realistic understanding of what that theme may look like.

After you’ve chosen your desired theme, you’ll be redirected back to your theme customization page. When there, click on “Customize”. Keep in mind that you can always go back and change your theme if you’re unhappy with the one you’ve chosen.

You can navigate and rearrange the theme with the left sidebar. If you hover over any element of it, it’ll reveal a dotted emblem that lets you drag and drop it where you want on the page. You can also click on any element to get more options on its customization. Also, you can remove and add blocks and columns to your shop.

In the bottom right corner, you can also change the theme settings; these include options such as:

Adding a custom domain name

You don’t have to add one, but it’ll look unprofessional to have a free Shopify domain name with the .myshopify.com in it.

Adding a payment method

Shopify offers a multitude of different payment options:

In order to complete the process of adding your payment options, depending on the provider, you need to provide them with your business information and your business payment card.

Placing a test order on your online store

Now, the only thing to do is test out your online store. If you chose Shopify Payments for your payment gateway, then it’s easy, since they’ve incorporated a test mode into it. That means you can buy or test any transaction on your store without having to actually buy it and go back and cancel. They have a great support article on the topic which also features videos on how to test it properly.

Step 3: Building Your Website

Now that your website is set up it’s time to customize it to your needs. In the following steps, I will cover how to add content, how to customize, how to connect your domain, how to set up a blog and what to check before you launch.

Add the most important pages, content, and customization

By now, you should’ve set up a WordPress (or Shopify) site.

The foundation of your site has been built; now it’s time to really start building it out.

The first step is to build out the pages that you’re going to need the most. I’ll throw in the most popular pages that most websites have, so you can pick out the ones that you will add as well:

If you’re unsure what your website should include, read this article about the 12 critical elements that every website needs.

Once you’ve decided which pages you need, it’s time to start adding them to your website and set up your website navigation.

A blank website without any pages or content isn’t much use to anybody, so in order to make the website accessible and interesting, we need to add some pages and blog posts. There are pages that most websites need, such as a homepage, services, about us, contact us, and blog among many others.

How to add pages and content to WordPress

In order to add pages to WordPress, you need to navigate from the left-hand menu to “Pages” and from there click the button “Add New”.

This will take you to the WordPress block editor which is also called Gutenberg Editor. If it’s your first time visiting this, then it will display a quick step-by-step tutorial on how it works and where certain things are. It’s quite easy to work; everything is block-based, which means if you want to add something to your page, you just need to choose the correct block from the menu and fill it in.

On the left, in the content block section, there are multiple content blocks to choose from. Each serves a different purpose and adds a different element to that page.

And on the right-hand menu, you can change some page-wide settings like the author, what the permalink (URL) is, the featured image, and more. Or on the top, you can click on the “Block” tab and open up the block settings for any block that you’ve selected on the page.

Once you’re happy with the page, you can either choose to make it public, which will make that visible to any visitor, or you can choose to make it private, which means that it’s only visible when you’re logged in to your WordPress account. This is a great option if you’re not yet finished with that page. There’s also an option to preview the changes you’ve made or to publish that page at a certain date and time.

How to organize the navigation menu

Now that you’ve created the pages, you need time to add them to the navigation bar. This is the bar that is located on top of your website where your visitors can get access to the rest of the content on your website.

In order to change that, you need to go from the left-hand menu to “Appearance” followed by “Menus”. Now it’s time to create your first menu. The name of the menu doesn’t matter since this is only visible to you; so name your menu and then make sure you check the box where it says that this is your primary menu. After you’ve created the menu, it’s time to add pages there.

You can also create sub-items, which means that these pages are revealed when a user hovers their cursor over it. For example, here, I’ve done that by adding “About Us” and “Contact Us” under the “About” category.

Customizing website

For customizing your site, go to your WordPress dashboard and choose “Appearance” from the left-hand menu. You can tweak your website’s theme from there, add and change widgets, customize your menu’s structure, and so on. Basically, every change that you want to make with your website can be done under the “Appearance” tab.

Also, if you feel comfortable with code, you can add custom CSS and personalize your site even more. You can add custom CSS from the customizer.

Adding blog posts

Adding a blog is optional. Creating one, however, is a good idea if you want to regularly publish fresh content, demonstrate your expertise, and provide additional value to your visitors.

Your chosen page will automatically display all blog posts when you save them. Be sure to include them in your navigation menu.

Once this is done, you can start creating your blog posts. This can be done via “Posts” and “Add New”.

After you click “Add New”, you’ll be redirected to the editor page where you can start creating your post. Add a title, content, images, and anything else needed for the blog post. In the sidebar on the right, you’ll also find options to apply categories and tags, define an excerpt, and set up a featured image.

Once you’re done, click on “Publish” and your post will appear under the dedicated blog page.

There are certain pages that every website needs to have; the same goes for every online store. Pages such as homepage, contact us, about us, blog and the store page.

Depending on the theme that you’ve chosen, there may already be some of these pages made for you. In order to check what pages you already have, you need to head from the sidebar to “Online Store”, and under that will be “Pages”. Most themes already come with a homepage, catalog page, and contact page. You still need to fill in all your own content and customization.

Adding pages to your store

In order to add new pages, you need to head to the “Pages” section in the left-hand menu.

Over there, simply click on the green button towards the top right of the screen titled “Add page”.

Once there, you need to add your page title and description. You can also edit that page’s SEO title and meta description. SEO titles and meta descriptions dictate how your page will look in search engines such as Google, so it’s important to keep it relatively short and concise to best describe what this page is about.

Now create all the pages that you need. Don’t worry about editing and customizing the pages yet; that will come in a few steps.

Adding pages to the navigation bar

After you’ve created all the pages that you need, go to “Navigation” in the left-hand menu. Under there, you’ll find a section called “Menus”, which refers to the part that sits on top of the website where visitors can see which pages you have or navigate around your website.

There are two different types of menus that you need:

Go through both of these menus and add all the pages that you’d like to be visible to your visitors.

Keep in mind a nifty trick to better organize your website: create category pages. These are pages which gather all related content under one page and help keep your menu simple and understandable, while still keeping all of your content easy to digest. For example, here I’ve moved the blog posts under the “Blog” category and the about us and the contact page under “About”.

Customizing content

To customize your pages, you need to go from the left-hand menu to “Themes” and then “Customize”. This brings up the Shopify website editor.

In order to choose which page you want to edit, you can do so by clicking on the top at the center of the editor. This will open up a search bar where you can choose the page you want to add content, customize, or edit.

There are lots of different options for customization. They differ from theme to theme, but most of the basics remain the same, no matter which theme you select.

On the left-hand menu, you can choose the order of the content and which blocks or columns you’d like to have. And once you click on any of them, a right-hand menu will appear where you can choose additional options just for that block or column. It may seem a bit daunting at first, but it’s actually very intuitive once you learn the basics of it.

Also don’t forget to check out “Theme options” in the bottom left corner. Over there, you can do site-wide edits such as colors, typography, and much more.

Adding blog posts

In order to add a blog post, you first need to create a blog page where you can display all of your blog posts. You can do so by following the aforementioned way of creating pages.

To create a blog post, you need to go from the left-hand menu to “Blog posts” followed by the green button on the top right titled “Add blog post”.

Adding a blog post is a bit different to adding a page. The main difference lies in where you edit the content of the page. With blog posts, you write and add your blog’s content right inside of this editor instead of doing so in the theme customization area. You can still do some additional visual customization in the themes area, but you can’t change the content itself over there.

Fine-tune, test, and launch

Now that you’ve added the content and pages you need, it’s time to start preparing for the launch.

We’ve listed 30+ things you should check before launching a website, but some of the suggestions aren’t always necessary for WordPress and Shopify users. But it wouldn’t hurt to double-check.

In order to make sure that everything works as expected, be sure to do the following:

Congratulations, you’ve just built a website from scratch.

Wasn’t so hard, was it? For me, the most interesting part is choosing the designs, layouts, colours and fonts. The more difficult part for me is writing the content. But hey, maybe you are the opposite.

Either way, I congratulate you for your brand new website. And if you ever get stuck, don’t hesitate to reach out to me. I read and respond to every email/question I receive.
Reach out to me.

How to Build a Website 2022 | A Step by Step Beginner’s Guide

Our independent research projects and impartial reviews are funded in part by affiliate commissions, at no extra cost to our readers. Learn more

Written and researched by

This said, WordPress is also a popular choice, so we’ll take you through both building processes. No matter which option you go for, by the end of this post, you’ll be able to build a website in as little as an hour if you follow our seven easy steps.

How do we know? Well, we’ve been where you are right now. Since then, we’ve carried out hours of research on building websites so that we can bring you the most accurate and relevant guidance to help you get your site up and off the ground. Why not read on and give it a go for yourself?

Option 1: Use a Website Builder

How to Build a Website in 9 Steps

How to Build a Website: a Video Guide

If you’re short on time, or you’d rather watch than read, check out our video guide below!

1: Choose the Right Website Builder For You

An enormous number of people use website builders to make a website. Wix alone has over 100 million subscribers, while Shopify recently passed 1.2 million.

Why is this? Website builders mean anybody can make a website, regardless of technical skill. In the early days of the internet, making a website required a working understanding of HTML (Hypertext Markup Language).Then CSS (Cascading Style Sheets) came along to make things even more confusing.

Website builders take care of the technical jargon and let you focus on design and content. Some do this through templates, others through drag-and-drop interfaces, which make building a website no harder than assembling a PowerPoint presentation.

That does then mean choosing the right website builder is very important. Different builders serve different needs. Moving forward with the right one is essential to making a website you’ll be happy with.

Advice From Experts

The website I built using Squarespace is accessible and easy to navigate, in part due to templates provided by Squarespace as you’re getting started. My favorite feature of Squarespace is the ability to edit the master template themes. Squarespace provides a range of templates depending on your business, and each template has a preset group of featured themes. These control the look and feel of each widget: The text size and color, background colors, widget styles, etc. Squarespace provides you with professional themes from the get-go, and you have the ability to change any piece of it to better fit your vision.

Which website builder should you choose?

What is the best way to build a website? Which website builder should I use? What’s the easiest way to build a website? These are questions we get asked every day. There are so many questions and so many builders. We get it, it’s hard.

That’s why we’ve conducted in-depth research. Personal experience with website builders is all well and good (and we have plenty of it), but we test builders with people just like you. So when you’re making your own website, you can rest assured we’ve got you covered.

Our team conducts user testing and interviews, and tracks hundreds of features across dozens of products to provide you with a bird’s-eye view of the market. We want you to find builders that fit your needs. With that in mind, here’s the lowdown on the top builders around for creating websites today.

Wix came out on top in our research, which isn’t surprising given that it’s one of the most popular builders on the market. This is thanks to its intuitive drag-and-drop features which make website creation feel like child’s play. If, however, beautiful design is a top priority for you, Squarespace could be your perfect match, although you’ll need to dedicate some time to get it just right.

Looking to make money online?

14-day free trial

1 month free trial

Do You Want to See These Builders Side By Side?

Ease of Use

How simple the builder is to learn and use. This is determined through user testing, giving participants a series of tasks and asking them to score how easy (or hard) they found them. A great deal of our users want the easiest way to make a website possible.

Value for Money

A balance between pricing and features. No-one wants to pay through the nose, but cheapest isn’t always best either. We size up pricing plans with features in mind to find the best of both worlds for when you build a website.

Design Flexibility

How aesthetically pleasing, industry appropriate, user-friendly and modern each template selection is. We did this by consulting design experts and testing how well templates work on various devices.

Features

What the builder is capable of doing. We not only look at what they can do, but how well they can do it. Blogging, ecommerce, search engine optimization, and more factor in to this. The more a website builder can do, the more you can do with it.

Help & Support

We size up how strong each builder’s help and support is, taking into account everything from knowledge centers to live chat. This is especially important when starting your own website.

Customer Score

We don’t want you to just take our word for it that certain builders are excellent and others not. User testing concludes with us asking participants whether they would recommend the product they’ve been using to others making a website.

To be clear, the builders listed above aren’t the only ones worth considering. Not by a long shot. They perform best overall in our research, but, again, it comes down to your needs. WordPress.com, for example, is a superb website builder for blogging, while Shopify leads the way on ecommerce.

Be clear on what your priorities are, have a browse through our comparison chart and reviews, and settle on two or three builders that seem like a good fit. Once you have that shortlist, you’re ready to start testing.

Test your website builder

We can point you in the right direction, but only you can know which builder feels right. Almost every website builder offers free trials, so take advantage. Signing up is simple.

Don’t have time to choose a builder? Our quiz pairs you with your dream website builder. Skip the search and find your perfect match with our 4-question quiz!

2: Sign Up For a Plan That Suits Your Needs and Budget

Once you’ve chosen your website builder, it’s time to find your price plan. If you’re after a simple site (say for a portfolio or small service business), the cheaper plans will probably work just fine. If you need something more complex, check out the features on offer with the more expensive plans. If in doubt, start cheap and upgrade later.

Once you’ve settled on a website builder, you need to sign up for a plan. Website builders tend to offer multiple plans. Different sites have different needs, and plans ensure you aren’t paying for things you don’t need.

Advice From Experts

Rest assured there’s a plan out there for everybody. If in doubt, start small and scale up.

Which Plan Is Best For You?

Rest assured there’s a plan out there for everybody. If in doubt, start small and scale up.

Can you make a website for free?

You can make a website for free, but there are catches. Free accounts on website builders hold a lot of important features back. You can’t use custom domains, and your free site will have ads for that website builder. If you’re looking to learn more about website building then the free options are worth a look. However, if you want a professional, feature-rich website you’re going to have to pay at least a few dollars a month.

This graph compares the plans of the top builders in the industry, comparing their best value for money plan against the cheapest plan they offer:

As you can see, while Weebly offers the cheapest price, it has one of the worst in terms of value for money. Wix is the best in terms of value for money, offering the best range of features while being the easiest to use for beginners.

Squarespace comes in second for value of money, and while it doesn’t offer a free plan, it has a 14-day free trial, after which you’ll have a choice to sign up for one of its four plans:

Squarespace is currently offering 10% off all of its plans, so if these plans interest you, there’s never been a better time to jump into Squarespace.

Get 10% Off Any Squarespace Plan

3: Choose a Unique and Relevant Domain Name

A domain name is your site’s unique address – for example, ours is websitebuilderexpert.com. You’ll need to pick one for your site, which can be done easily through your website builder (you’ll be prompted when you sign up). If you already have a domain name, you can transfer it to whatever platform you want to use (you’ll see an option for this).

A domain name is the bit of the URL (the site address in your browser’s search bar) that identifies a web page — in this case your website. For example, ours is websitebuilderexpert.com. You can register them separately at sites like Domain.com, but website builders offer to do it for you when you sign up with them. Most provide it for free (at least initially), while a handful charge a few extra bucks.

A domain name is one of the main ways a site presents itself to the internet, so make it count. Here are a few rules of thumb when choosing a domain name.

Advice From Experts

Names are very important from a branding standpoint. For my company when I started the firm I jokingly referred to the women as the Marketing Mavens and the guys as the Marketing Moguls, and for short I called them “Mavens & Moguls” as a working name but never expected it would stick. I did research over email with prospective clients, referrers, media etc and tested

100 names. Mavens & Moguls was one choice on the list and to my great delight and surprise it came out as a clear winner. It has helped us be memorable and stand out from the pack. I have had clients tell me they could not remember anything other than my first name and one word of my company so they googled “Paige & Mavens” and we popped right up. I was at an event one day and a venture capitalist started waving in my direction and shouted «Hi Maven!« across the crowd, everyone looked my way and we ended up getting introduced to a portfolio company that hired us! Names contribute to your brand and if nothing else our name is a great conversation starter and getting into a conversation is all it takes to open a door

Once you’ve got your unique domain name, what happens if you want to move? This is a very common question we get. Don’t worry. When you purchase a domain name — from a website builder or through separate registrars — you own the domain name and can take it wherever you want.

4: Pick a Design Template You Love

Now we’re at the fun part – time to set the design of your website by choosing a ‘template’ or ‘theme’ to work from. Your website builder will guide you to this stage after you’ve signed up. Templates are categorized by industry or site type. Take a few for a spin before you settle on your favorite.

OK, so you’ve followed our steps to the letter: you’ve chosen a website builder, signed up for a plan, and registered a domain. You’re ready to start creating a website. Rather than leaving you to do this all by yourself, website builders support you through the process with templates.

Templates provide a framework for your website – a canvas for you to paint the content of your site onto. They’re how you can have a site that looks good without having to hire a designer.

Whichever website builder you’ve chosen, you’ll have an extensive selection of design templates to choose from. Generally speaking, the better your plan, the more templates you’ll have access to. The top builders provide hundreds of templates across dozens of categories. Whatever the focus of your site is, there will be a template for it. For example, if you’re thinking of starting a fitness website, most builders will let you filter your template search accordingly.

These are just a handful of the other categories you can expect to find when starting your own website:

Think of templates as ‘clothes’ for your website. If you don’t like one set of clothes, just change to another one to give your website a completely different feel. And again, don’t rush into it. Choose different templates, browse them, see if they fit. The whole point of templates is choice, so dive in and find one that feels right for what you want to achieve.

5: Customize Your Template Design

Time to customize your template with your own content and images. Again, this is something most builders will guide you through, but it’s super easy to get the hang of. Before long, your website will really start to look like your website.

As we said in the last step, templates provide a framework. Given how many people use builders to make a website nowadays, odds are there are a few sites out there with the same framework as yours. At the very least you will need to populate a chosen template with content specific to you. And to really stand out, you’ll need to do some customization.

Building a website is like cooking a dinner. Just like cooking, knowing how to build a website from scratch is much easier with the right tools and instructions. A template gives you a recipe — you can choose to follow it or you can mix up the ingredients and style to give your dish your own flavor.

What goes into customizing a website? Well, that’s largely up to you. Website builders are very flexible these days. Customization can include:

The best website builders walk you through all these things, so don’t be intimidated. They understand their purpose is to make web design easy. As is so often the case with website builders, don’t be afraid to play. You’ll be surprised by how how much you can do.

Advice From Experts

I am CEO of Publicity and Marketing, and I love how easy it is to use Wix. It offers new templates and styles all the time to update your site with easy-to-use SEO tools and now even has AI to create sites too. I am always impressed with the new additions for templates and tools to use. I would recommend Wix because it is for people who are not tech-savvy and it is easy to make changes with plenty of styles, photos, and choices.

Need an Easy Option?

If those template customizations don’t look like enough for you (though if you’re building your first website, they will be), you might want to think about building your website on an open source platform like WordPress.org – this is the ‘Option 2’ that we’ll be covering a little later on.. You will get more flexibility, but if you’re not a coder, learning WordPress takes a lot of time — especially compared to drag-and-drop builders.

You can almost always play around with templates as part of the free trials, so you can get a sense of how easy customization is without spending a cent.

6: Upload and Format Your Own Content

Now your website is starting to take shape, it’s time to fill it with your own images and written content. You can replace any ‘placeholder’ content already on your template, as well as ‘dragging’ text and image boxes around each page (if you use a drag-and-drop builder).

Once you’ve played around with the colors and layout of your website, it’s time to start adding your content – that means images, videos and text.

If you need some writing tips, you’ve come to the right place; we’ve already written a complete guide to writing for the web, jam-packed with research, expert opinions, and our own learnings.

Definitely go check that out, but for now, here’s an overview of our top 19 tips:

Make sure all the copy on your site is the best it can be – check out our guides for more tips!

Now, on to images. When it comes to picking the right pictures for your site, quality is key. Blurry images are simply out of the question.

Some website builders have a bank of free images available for you to use. If not, there are plenty of free image sites available online, such as Unsplash and Pixabay (two of our favorites).

7: Choose and Download Apps

Check out your builder’s app store to add any missing functionality to your site, such as forms and social media integrations. There’s an app for just about anything, and downloading them is really simple.

Whatever you need your site to do, you can guarantee there’s an app for that. Installing these apps is super simple – just head to the App Market (or equivalent) for your builder. There, just like the App Store, you can see how much an app will cost (although many are free), what it does, and its user rating.

Wix has over 300 apps in its App Market. Search for what you want, then hover over the app you’ve chosen and click ‘Add+’

Advice From Experts

Lindsay has been using Wix for the last five years and spoke to us about her experiences and what apps she’s using:

I like that it has integrated photo options, its drag and drop has a user interface that is intuitive to me (I’m not a techie!). There are lots of great apps that they’re adding all the time. I downloaded the course/challenge app and am currently building an online course to help kids manage their stress levels. It’s great that I can use my own site instead of needing to set that course up on another learning management platform. I’m busy and sometimes intimidated by learning new software so being able to add features to my existing site is a relief! I would recommend it for ease of use for beginners. There are a lot of features that integrate seamlessly and that make it easier to have a professional-looking site without a bunch of third-party plug-ins. It’s also really nice to have the images available because finding, saving, and formatting images was really challenging for me when I got started.

8: Preview and Test Your Website

Don’t forget to preview your site before putting it live, both on mobile and desktop! More than half of Google searches are carried out on mobile, and this number is only on the up. Making your mobile experience a seamless one is a must for any successful site – particularly because of the benefits that mobile responsiveness can have in terms of making your website more accessible.

With your template chosen and customized, you’re probably itching to publish and get your website live. Slow down there. Knowing how to make a website is one thing. Publishing your website blindly is another.

Always preview changes to your website before publishing them. You need to be sure things are working the way you want them to. Some of the key questions to ask are:

You’ll have done so well to get this far. Be vigilant. It would be a massive shame to build your own website, only to publish an unfinished site.

How do you preview your website?

Website builders make previewing your site really easy. Usually you just have to hit the preview button in the editor mode to see what your website would look like live. Most offer a toggle so you can see how it works on different screen sizes.

An easy-to-use preview mode saves you a lot of time as you won’t need to keep saving changes and switching back and forth between editor and preview mode. You can make a change and then just hit preview to see how it would look live.

9: Publish Your Website On the Internet!

Once you’re all set, hit the Publish button! But don’t worry – it’s easy to make changes to your site after you’ve published it. Just bear in mind that some builders won’t let you switch templates after your site is live.

All done? Splendid. Press ‘Publish’! Tell your friends, shout about it in crowded streets, hire a blimp — get the word out. Your site is now live for the world to see. You can still customize and develop it of course, but you’ve taken the plunge. How very exciting.

If you’re still a bit unsure whether you can do it, especially if you feel that you’re not the creative type, we have a comprehensive What You Need To Build A Website guide that covers all of the checklist items above, plus Google Analytics, logo design and images, in detail. For more specific guides to website creation – such as how to make a booking website, or how to build a membership website – explore the range of diverse guides on our site.

Anyone can make a website, and (literally) costs nothing to find out. Take a couple of builders for a spin and see what happens. You just may wind up creating something wonderful.

The Beginner’s Guide to Website Development

Read about the basics of web development, the process of creating a website, and additional resources for those who want to learn more.

The Beginner’s Guide to HTML and CSS for Marketers

Learn the basic definitions, differences, and codes to know for your website.

What is website development?

Website development is a catch-all term for the work that goes into building a website. This includes everything from markup and coding to scripting, network configuration, and CMS development.

While web development typically refers to web markup and coding, website development includes all related development tasks, such as client-side scripting, server-side scripting, server and network security configuration, eCommerce development, and content management system (CMS) development.

In this guide, we’ll cover the basics of web development, the process of creating a website, and additional resources for those who want to learn more about development — or become a developer themselves.

Keep reading to dive into website development or use the chapter links to jump around the guide.

Web Development Basics

Types of Web Development

The Web Development Process

Web Development Resources

Why is web development important?

The Internet isn’t going anywhere. In fact, it’s become a portal and primary method of research, connection, education, and entertainment in the world. As of 2021, there were 4.66 billion global Internet users — more than half the world’s population.

Given the rapidly-increasing number of Internet users, it’s no surprise that web development is a rapidly expanding industry. Between now and 2030, the employment of web developers is expected to grow by 13%, much faster than most other technology careers.

In the next section, we’ll tackle web development basics with answers to some common questions.

Web Development Basics

Now that we’ve defined web development, let’s review some web development basics.

1. What is a website?

Websites are files stored on servers, which are computers that host (fancy term for “store files for”) websites. These servers are connected to a giant network called the Internet.

Browsers are computer programs that load websites via your Internet connection, such as Google Chrome or Internet Explorer, while the computers used to access these websites are known as “clients”.

2. What is an IP address?

To access a website, you need to know its Internet Protocol (IP) address. An IP address is a unique string of numbers. Each device has an IP address to distinguish itself from the billions of websites and devices connected via the Internet.

The IP address for HubSpot is 104.16.249.5. You can find any website’s IP address by visiting a site like Site 24×7 or by using Command Prompt on Windows or Network Utility > Traceroute on MacBooks.

To find your device’s IP address, you can also type “what’s my IP address” into your search browser.

While you can access a website using its IP address, most Internet users prefer to use domain names or by going through search engines.

3. What does HTTP mean?

HyperText Transfer Protocol (HTTP) connects you and your website request to the remote server that houses all website data. It’s a set of rules (a protocol) that defines how messages should be sent over the Internet. It allows you to jump between site pages and websites.

When you type a website into your web browser or search for something through a search engine, HTTP provides a framework so that the client (computer) and server can speak the same language when they make requests and responses to each other over the Internet. It’s essentially the translator between you and the Internet — it reads your website request, reads the code sent back from the server, and translates it for you in the form of a website.

4. What is coding?

Coding refers to writing code for servers and applications using programming languages. They’re called “languages” because they include vocabulary and grammatical rules for communicating with computers. They also include special commands, abbreviations, and punctuation that can only be read by devices and programs.

All software is written by at least one coding language, but languages vary based on platform, operating system, and style. All languages fall into one of two categories: front-end and back-end.

5. What does front-end mean?

Front-end (or client-side) is the side of a website or software that you see and interact with as an Internet user. When website information is transferred from a server to a browser, front-end coding languages allow the website to function without having to continually “communicate” with the Internet.

Front-end code allows users to interact with a website and play videos, expand or minimize images, highlight text, and more. Web developers who work on front-end coding work on client-side development.

6. What does back-end mean?

Back-end (or server-side) is the side that you don’t see when you use the Internet. It’s the digital infrastructure, and to non-developers, it looks like a bunch of numbers, letters, and symbols.

There are more back-end coding languages than front-end languages. That’s because browsers — at the front-end — only understand HTML, CSS, and JavaScript, but a server — at the back-end — can be configured to understand pretty much any language.

7. What is a CMS?

A content management system (CMS) is a web application or a series of programs used to create and manage web content. (Note: CMSs aren’t the same as site builders, like Squarespace or Wix.)

While not required to build a website, using a CMS makes things easier. It provides the building blocks (like plugins and add-ons) and lets you create the structure with your code. CMSs are often used for e-commerce and blogging, but they’re useful for all types of websites.

8. What is cybersecurity?

There are always malicious actors looking to find vulnerabilities in websites to expose private information, steal data, and crash servers. Cybersecurity is the practice of securing data, networks, and computers from these threats.

The methods used by hackers are constantly evolving, as are the security measures taken to defend against them. Failing to understand how your site could be targeted could result in disaster.

As a result, a basic understanding of cybersecurity best practices is critical for effective web development. You should also carry out security audits on a consistent basis.

Next, let’s take a look at the types of web development a developer could specialize in.

Types of Web Development

Whether you’re looking to hire a web developer or become one, you should understand the different types of web development that developers can master.

These different types of web development primarily refer to the different sectors of the profession in which web developers can work. Some of these distinctions overlap, and web developers will often master multiple types of web development.

1. Front-end Development

Front-end developers work on the client- or user-facing side of websites, programs, and software — in other words, what users see. They design and develop the visual aspects, including the layout, navigation, graphics, and other aesthetics.

The main job of these developers is to build interfaces that help users reach their goals, which is why they also often have a hand in the user experience aspect of their projects.

2. Back-end Development

If the front-end is what users see, the back-end is what they don’t. Back-end web developers work on the servers of websites, programs, and software to make sure everything works properly behind-the-scenes.

These developers work with systems like servers, operating systems, APIs, and databases and manage the code for security, content, and site architecture. They collaborate with front-end developers to bring their products to users.

3. Full Stack Development

Full stack developers work in both the front-end and back-end sides of a website. They can create a website, application, or software program from start to finish. “Stack” refers to the different technologies that handle different functionalities on the same website, like the server, interface, etc.

Because full-stack developers require years in the field to build the necessary experience, this role is often sought after. Their all-around knowledge helps them optimize performance, catch issues before they occur, and help team members to understand different parts of a web service.

4. Website Development

Website developers can be front-end, back-end, or full-stack developers. However, these professionals specialize in building websites, as opposed to mobile applications, desktop software, or video games.

5. Desktop Development

Desktop developers specialize in building software applications that run locally on your device, rather than over the Internet in the web browser. Sometimes the skillset of these developers overlaps with that of web developers if an application can run both online and off.

6. Mobile Development

Mobile developers build applications for mobile devices such as smartphones or tablets. Mobile apps operate much differently than other websites and software programs, thus requiring a separate set of development skills and knowledge of specialized programming languages.

7. Game Development

Game developers specialize in writing code for video games, including console games (Xbox, PlayStation, etc.), PC games, and mobile games — which means this specialty overlaps somewhat with mobile development.

8. Embedded Development

Embedded developers work with all hardware that isn’t a computer (or, at least, what most of us imagine as “computers,” with a keyboard and screen). This includes electronic interfaces, consumer devices, IoT devices, real-time systems, and more.

With a recent rise in interconnected devices as seen with smart appliances, Bluetooth technologies, and virtual assistants, embedded development is becoming an in-demand practice.

9. Security Development

Security developers establish methods and procedures for the security of a software program or website. These developers typically work as ethical hackers, trying to “break” websites to expose vulnerabilities without intending harm. They also build systems that discover and eradicate security risks.

Now, let’s dive into the web development process.

The Website Development Process

The process of creating a website isn’t as easy as 1-2-3. Each development path is different based on the type of website, programming languages, and resources.

The following section serves as a brief overview of the web development process and a short introduction to the most common languages and CMS options.

1. Form a plan.

Before laying pen to paper or hands to keyboard, it’s vital to first connect with teams and personnel across your organization to develop a plan for your website.

Here are some questions to consider before your first site draft:

Answering the questions requires interfacing with your web development, marketing, and financial teams to determine your priorities and make informed decisions.

Put simply? It’s much easier to create a roadmap at the beginning of the process than reverting your progress at a roadblock.

2. Create a wireframe.

All good websites start with a blueprint. Developers call this a wireframe. It doesn’t have to be an official document; it’s simply a vision for your site that’ll give both you and your developer(s) direction and a place to start. You can draw it on a whiteboard or use a tool like Invision, Slickplan, or Mindnode.

Wireframes are strictly visual tools that will help you understand where text and images will go on individual webpages. You can use blank boxes and “dummy text” to get an idea of how your content will show up on the front-end. Work with your developer to create wireframes so that they have an idea of what you’re picturing.

3. Draft up a sitemap.

Next, it’s time to create a sitemap (not to be confused with sitemap.XML, which is an XML file that helps search engines crawl and find your site). Just like a business plan gives a potential investor insight into your goals and deliverables, a sitemap gives a developer the information needed to meet your vision. You can create your sitemap on your own or work with your developer(s).

Here are a few questions to ask yourself when planning your site:

Again, it’s a good idea to consult with other teams within your organization. If you have an SEO and/or content strategy team, their input will be critical in the linking structure and categorizing of your pages.

3. Write your website code.

The next step in the web development process is writing the code.

Developers will use different coding languages for the front-end and back-end of websites, as well as for different functionalities of the site (such as design, interactivity, etc). These different languages work together to build and run your site.

Let’s start with the most commonly-used languages.

HTML

HyperText Markup Language (HTML) has been used since the 1990s. It’s the foundation of all websites and represents the bare minimum of what’s needed to create a website. While it’s possible to create a website with only HTML, it wouldn’t look particularly attractive.

Below is the HTML code for a basic Bootstrap button.

Languages like CSS and JavaScript enhance and modify the basic site structure built by HTML codes. HTML5 is the most recent version and supports cross-platform browser functionality, making it popular in mobile application development.

CSS

Cascading Style Sheets (CSS) was developed in the late 1990s. It adds design elements like typography, colors, and layouts to websites to improve the overall “look” of websites.

CSS allows developers to transform your website to match the aesthetic you envisioned for your site, and like HTML5, CSS is compatible with all browsers.

Here’s a code snippet for customizing the jumbotron element in Bootstrap CSS.

JavaScript

JavaScript is the cherry-on-top of coding languages. Created in the mid-90s, JavaScript is used to add functionality to websites. Developers use it to add animations, automate tasks within certain pages, and add interactive features that enhance user experience.

JavaScript is rapidly evolving. Once considered a “toy” language, JavaScript is now the most widely used coding language in the world. With the help of Node.Js, it’s now a back-end coding language. It’s the first language to be understood by browsers, and some have even discussed applying machine learning to it, too.

HTML, CSS, JavaScript are the “big three” of web development. Almost every website uses them in some capacity. There are plenty of others, such as server-side languages like Java, C++, Python, and SQL, but understanding these three is foundational to your website development knowledge.

4. Build the back-end of your website.

Writing code might be one of the more complicated parts of web development, but it’s hardly the only component. You also have to build your back-end and front-end site structures and design.

Let’s start with the back-end.

The back-end handles the data that enables the functionality on the front-end. For example, Facebook’s back-end stores my photos, so that the front-end can then allow others to look at them. It’s made up of two key components:

These components work together to build the foundation for each website.

As for building your website, backend developers will establish three things.

With these components and decisions in place, your website will be ready for front-end development.

Note: The back-end is slightly tangential to web development because you don’t always need a back-end if you’re not storing any data. “Data” in this context means any user-entered information that you need to save and persist. Think about logging in to a website. If they don’t have a back-end, how could they remember your login information? Or what your profile settings are? To get this information, you need a back-end.

Facebook, as an example, needs to know what people are in your Friends list, what events you have joined, what posts you have created, and more. This is all «data» that lives in a database. If they didn’t have a back-end with a database, none of that data would be accessible to them.

On the other hand, a website that’s purely informational and doesn’t require the users to enter any data wouldn’t need a back-end.

So, if you have no data, you don’t necessarily require back-end development. But that’s not saying you shouldn’t learn the basics. You never know when you might need it.

5. Build the front-end of your website.

If you’ve ever dabbled in web design or toyed with a website in WordPress, Squarespace, or Google Sites, you’ve touched front-end web development.

The front-end stuff is important — it’s what your visitors, customers, and users see and how they’ll use your website.

Front-end (or client-side) development includes a combination of JavaScript, HTML, and CSS. It also controls components such as typography and fonts, navigation, positioning, and browser compatibility and responsiveness. This part will reflect more of your initial site vision and what you included in your wireframe.

As technology and consumer preferences change, client-side coding tends to become outdated much faster than back-end development. This is where coding resources (like the ones we’ve included below) come in handy.

6. (Optional) Work with a CMS.

Why would someone choose a CMS over coding “by hand” or “from scratch?” It’s true that a CMS is less flexible and, therefore, gives you less control over your front-end. However, a CMS is easier to use (you have to write less code), and it often has tools for hosting the site, storing user information, creating a blog, publishing landing pages, capturing leads, and even building an email list. As a result, you’ll be able to make your website more profitable with less than half the work.

CMS options often include plugins that remove the need to write a back-end. For example, there are WordPress plugins for eCommerce so that, instead of building a complicated back-end to charge customers’ credit cards, you can just use an existing plugin and avoid the need to deal with databases and server-side code.

Popular content management systems include HubSpot, Joomla, Magento, and WordPress — which has over 65% market share. (In this case, we’re talking about open source WordPress software, not the WordPress site builder.)

7. Acquire a domain name.

At this point, your website will have an IP address. It also needs a domain name, a memorable website name that your visitors can use to find your site.

Perhaps you’ve heard of sites like GoDaddy and Hover. These services help you purchase a domain name and register with ICANN (Internet Corporation for Assigned Names and Numbers). Most domain registrations are good for a year before you’re required to renew.

Website builders and hosting services, like WordPress and Squarespace, also allow you to purchase a domain name.

8. Launch your site.

Once you’ve set up a domain name and linked it to your host, you’re almost ready to unveil your work to the web.

But not so fast — there are still a handful of things you’ll need to check before an official launch. These include planning out responsibilities on your team, testing your site thoroughly for any glitches, optimizing for SEO, and a final check before “flipping the switch” and making your site live.

Website Development Resources

Interested in learning more about development and coding? Outside of connecting and networking with other developers, there are plenty of resources you can tap into to further your understanding of web development.

Web Development Courses and Classes

Whether you want to explore back-end, front-end, or full-stack coding, here are a few online courses and classes recommended by HubSpot developers.

TutorialsPoint

All content and resources on TutorialsPoint are free. Between tutorials, ebooks, and videos, TutorialsPoint provides a host of learn-to-code options.

egghead

According to their website, “egghead is a group of working web development professionals and open source contributors that provide you with concise, information-dense video courses on the best tools in the industry.”

Users can take courses, listen to podcasts, or take lessons on a wide variety of web development topics.

Khan Academy

Khan Academy is a well-known free educational resource. Users can learn anything from macroeconomics to linear algebra to US history, as well as a handful of computing topics.

freeCodeCamp

freeCodeCamp is a non-profit organization (like Khan Academy) that helps people learn to code for free. With thousands of articles, videos, and interactive lessons, as well as worldwide study groups, freeCodeCamp helps thousands of developers and engineers learn about programming and land development jobs.

Team Treehouse

Team Treehouse is a subscription-based online learning program. Users pay a monthly fee and gain access to hundreds of courses on over 20 different topics. From JavaScript to Python to PHP, Treehouse can teach you all you need to know about web development.

Web Development Communities

Web developers are masters of the Internet, so it makes sense that they’d hang out and connect in Internet-based communities.

According to Code Condo, developers join these communities for:

Here are a few online communities recommended by our HubSpot developers.

Stack Overflow

Stack Overflow was introduced nearly 15 years ago and has since become one of the most popular programming communities in the world. According to co-founder Jeff Atwood, “[Stack Overflow] is by programmers, for programmers, with the ultimate intent of collectively increasing the sum total of good programming knowledge in the world.”

Stack Overflow is a great place to go with questions because most of the time, other developers have asked and answered the same ones. The forums in Stack Overflow keep you connected to other developers while also keeping you informed.

Mozilla Development Network

Mozilla Development Network (MDN) is known to be more thorough and accurate than other online resources. It’s not as much a community as a comprehensive resource and library of documents for coding languages. MDN is useful when learning how certain functions work and staying up-to-date on coding and development news.

Reddit

Reddit is a forum-based community where developers of all levels gather to ask and answer questions. It’s incredibly interactive and includes people from all over the world. You can also join “subreddits” based on specific topics such as web design, JavaScript, or freelancing.

Dive Into Web Development

The Internet is here to stay, and it’s constantly evolving to meet user needs. Web developers are on the front lines of these innovations and improvements — from this blog to your favorite social network to the apps you use on your phone, web development is everywhere.

As a result, it’s worth taking the time to understand coding and programming to help make your business website the best it can be — for you and your customers.

Editor’s note: This post was originally published in November 2018 and has been updated for comprehensiveness.

Originally published May 5, 2022 7:00:00 AM, updated May 05 2022

How to Build a Website: 2 Methods, 9 Easy Steps, & 35 Amazing Tips

Studies show that 76% of consumers research a business online before visiting in person. That means having a website is as necessary for companies today as having a phone number.

Maybe you’re starting a new business venture or developing your personal brand.

Or, maybe you’re looking to update your company’s outdated website. Whatever the case, creating a new website can feel overwhelming, particularly without technical expertise or a budget for web developers.

Steps to Make a Website

We’ve put together a comprehensive, step-by-step guide to creating a website. Best of all, you won’t need a coder, web designer, or big budget to create one — you’ll just need to follow the steps below.

How to Build a Website

In general, you’ll carry out these steps before launching your site. But before you get started, you’ll need to choose a platform.

We’ll walk you through the two options you have: a website builder or a content management system (CMS).

Start building your website by choosing a platform.

The first thing you’ll need to decide is whether you want to create a website using a website builder or a CMS.

Let’s take a look at the definitions of each below.

A website builder is a solution that offers domain names, SSL certificates, and templates in one package, typically at a monthly or yearly subscription fee.

A content management system is a platform where you place your website’s content and media files. Domain names, SSL certificates, and hosting is typically purchased separately.

Both website builders and CMS platforms provide the out-of-the-box features, pre-designed templates, and extensions required to create a custom site without coding, but they offer different experiences for creating and managing a website.

Below, we cover some of the differences you should consider before making a choice.

Website Builders vs. Content Management Systems

Website builders provide everything you need to launch a site. You get website building tools, hosting, domain registration, SSL certification, templates, and support in one place, often for a low monthly rate.

This ease of use and pricing appeals to many site owners; however, free website builders, as well as the more expensive alternatives, tend to be limited in flexibility. For example, you can’t add your own custom code, or drag and drop elements anywhere on your posts and pages.

If you want more control over the functionality and appearance of your site, use a CMS. A CMS will provide the content management features, advanced functionality, and customization options required to build larger, more complex sites.

If you decide that a CMS is the best option for your business, consider the software, ease of use, customizability, security, and pricing of different platforms to narrow down your selection.

Let’s look at some examples of both website builders and CMS platforms you could potentially use.

Here are some resources comparing some CMS systems with popular website builders:

Below, we’ll walk you through the steps to build a website using both a website builder and a CMS.

How to Build a Website with a Website Builder

Have you decided that you’d like to use a website builder? Excellent! This is the easiest way to start for most beginners.

You won’t need to know how to code, and everything you need is typically included in one convenient package — so if you don’t want to go through the hassle of finding a hosting service, domain name, and SSL certificate, this is the option for you.

Let’s go through the process of creating your site using a website builder.

1. Choose a website builder.

First up, choose a website builder that fits your needs and budget. You’ll need to consider the following:

No matter what, you’ll want to start with a free trial — that way, you can give the platform a test run before committing.

While most website builders come with a free subscription tier, it doesn’t offer a free domain name or the features you need to build a strong website. Our recommendation is to opt for a paid subscription once you’ve decided on a platform.

Below, we break down some of the most popular website builders you could choose.

Here are a few more resources to help you choose a website builder:

And here are some posts listing alternatives:

2. Sign up for a subscription plan that meets your budgets and needs.

As we mentioned above, you won’t want to go for a free plan because those typically don’t include enough features to launch a professional website. You’ll want to upgrade, but you’ll need to take a close look at the features included in each tier to choose the right subscription for you.

Consider the following questions before choosing a subscription plan:

Most website builders have a pricing page that lays out the differences between plans in an easy-to-scan list. The best part is that you can start with the simplest subscription, then upgrade as you require more features and functionalities.

3. Choose a short and catchy domain name.

Some website builders offer a free subdomain for your site, but you’ll want to upgrade to a paid subscription to get a custom domain.

A custom domain name is one of the easiest ways to appear more professional and legitimate as a company. Imagine you were looking for a freelance writer.

Are you more likely to hire me if my website address is carolineforsey.weebly.com or carolineforsey.com? An extension like «weebly.com» can confuse visitors and dilute your brand identity.

Worst case scenario: a visitor might assume you can’t afford a premium hosting service or custom domain, and draw conclusions that your business is not fully established.

The good news is that after you upgrade, your premium website builder subscription will include a domain name for free, at least for the first year. You’ll be able to choose it as you’re setting up the site, or do it later.

Domain names are a surprisingly complicated art — you must choose something memorable that doesn’t yet exist. As you make your choice, avoid the following:

Before signing up on your website builder platform, consider looking up available domain names using a service such as GoDaddy. That way, you can make sure the domain you want is available before you pay for a subscription on the website builder platform.

Here are some more resources for picking the perfect domain name.

4. Pick a premade website template.

During your setup process, the website builder will take you to a template library, where you can choose a premade layout to set up your site.

Most website builders will create a different template depending on the type of business or brand you run. For instance, you can choose a template that’s specifically made for:

Every template should have essential features such as a built-in responsive setting and drag-and-drop page editor.

Your website builder should also allow you to import demo data, so that you only have to replace the images and text and not tinker with anything else during the setup process.

5. Customize the template.

You don’t want your site to look like anyone else’s, so you’ll need to customize the template to your liking.

On most platforms, you’ll be able to change the color palette, replace the images, insert social media icons, add personalized forms and menus, and change the size, colors, and fonts of buttons.

Have fun, and don’t forget to use your brand colors. This will be the best part of building your website: making it look like you want it to.

For beautiful templates that are easy to customize, check out the CMS Hub theme collection on the Envato marketplace.

6. Add pages to the site.

Next, it’s time to add pages to your site. You’ll need to create, at a minimum:

You’ll also want to create specific service pages.

For instance, if you’re selling “Digital Marketing Services,” you’ll want to create pages titled “Social Media Marketing Packages” and “Search Engine Marketing Services” under the digital marketing services umbrella.

Our top suggestion would be to put the topic of your page — or your target keyword — in the title of these new pages.

Your title shows up in the search results, so it plays an important role in telling visitors what you do.

Here are more resources on creating great page titles:

7. Write optimized content.

This is arguably the most important step. Now that you have your pages set up, what will you put on them?

It’s time to write optimized content to put on all of the pages you’ve created. Get content ideas from your competitors, and don’t forget to aim for at least 800 words per page.

Remember, however, that you can always come back later to write more content. So if you have to write short pages at first, it’s totally fine. Set a date for when you’ll return and add more copy.

Write your content in an editor such as Google Docs and use a grammar checker such as Grammarly to ensure your copy is error-free. When you upload images, be sure to compress them beforehand with a tool such as Toolur or TinyJPG. These steps will ensure your content helps you rank on Google and other search engines.

Check out the following articles on how to write optimized content:

8. Fill in general settings.

Before pushing your site live, you’ll want to fill in general settings. It’s the same list you would run through if you were setting up your site on a CMS platform.

Here’s what you’ll want to adjust:

Make sure you include a site title and tagline in the “Settings” of your website builder. Go through, and check out the URLs — are those optimized for search?

Any website builder you’re using to build your site should make it easy to optimize these elements on every post and page. With HubSpot, for example, you can add image alt-text, meta descriptions, headings, and custom URLs right in the CMS.

Source

9. Install extensions and apps.

Last but not least, install add-ons that will increase your website’s functionality. Each website builder typically has a library of extensions and add-ons that you can choose from.

For instance, in the HubSpot App Marketplace, you can filter for, browse, and add a number of different CMS apps and integrations.

Once your pages, content, and plugins are in place, it’s time to push your site live!

The website builder will typically have a button you can click to launch your site into the web. After, simply watch your organic traffic grow.

And remember: if your website builder doesn’t work for you, you’ll always be able to switch over to a CMS. Speaking of CMS, let’s review the steps involved in building a website with a CMS next.

How to Build a Website with a CMS

Have you chosen to go with a content management system instead?

The process of building a website with a CMS is a little different than setting up a site with a website builder — mainly because you’ll have to buy a domain name and web hosting on your own.

But the process is just as simple, and the powerful customization options make the extra steps worth it.

Here’s some advice from HubSpot’s CMS Hub Senior Product Marketing Manager, Alex Girard, about building a website:

When building a website, you want to make sure your content helps your customers achieve their goal with your business. If you sell professional services, can customers learn more about the services you offer and easily get in touch with your team if they have specific questions? If you’re an ecomm business, how easy is it for your customers to purchase something right off your website. Interview your customers about their experience on your website, and don’t be afraid to run experiments on your copy or on other elements of your website. Constantly iterating on the experience you provide your customers will help you perfect your website over time.

Below, we cover the process of building your website using a CMS from start to finish.

1. Choose a CMS.

The best CMS system for your business will align with your site’s needs and goals.

Let’s talk about some of the features you’d get from using HubSpot CMS Hub to give you an idea of some of the benefits of using content management software.

Example of CMS Software: HubSpot CMS

HubSpot CMS Hub is a web content management system that’s build on HubSpot’s all-in-one CRM Platform As a result, your team will have the tools necessary to offer a delightful and modern digital experience.

Below, we break down some of the most popular website builders you could choose, including CMS Hub.

It’s worth noting that while WordPress.org, Joomla, and Drupal are free, you’ll have to pay for domain names, SSL certificates, hosting, and premium themes and templates, adding to your set-up costs. You might also need the help of a developer if you opt for Joomla and Drupal.

It’ll be hard to choose, but you can narrow it down with a few questions.

For instance, do you need a platform that allows you to add your own custom code or one that supports multiple languages? Would you like a proprietary CMS to help share the responsibility of protecting and maintaining your site, or would you prefer an open-source CMS?

You might also narrow your list by comparing the selection of templates and add-ons offered by each system.

Here are some resources to get you started:

Here are some comparison and alternatives posts:

Once you’ve chosen the best CMS platform for your needs, continue to step two.

2. Select a hosting plan.

Web hosting is a service that enables individuals or businesses to run a website on the internet. The service provider, known as a web host, will store your website files on a secure server that it keeps up and running, and then deliver and display that web content to visitors who type in your URL in their browser.

Website builders include hosting in their packages. Content management systems, however, don’t work this way.

You’ll have to find your own hosting provider, which will take time and lots of research. There are hundreds of web hosts on the market. Each one might offer different types of hosting, including shared hosting, VPS, and dedicated hosting.

Let’s briefly look at the differences below.

Virtually every web host offers shared hosting. However, because your website has to share the same server with many other websites, it can’t support high volumes of traffic and is most vulnerable to hackers and other security threats.

Once you’ve decided what type of hosting you need, you can pick a provider. DreamHost, HostGator, and Bluehost are among the most popular third-party providers and offer free domain registration for the first year. That will simplify the next step in building a website.

Here are resources about hosting you’ll want to check out:

And some comparisons to help you choose the best one:

3. Get a domain name from a domain name provider.

No matter what type of CMS you chose to build your site, you’ll likely have to purchase a domain name.

Purchasing a domain name is typically inexpensive — even for those who sign up for a hosting plan that does not include free domain registration for a year. There are two different approaches you can take.

You can visit a domain site, purchase and register a domain name there, and then connect it to your hosting account. Both Godaddy.com and Namecheap.com are cheap, secure, and effective options for buying a domain name, with added benefits such as SSL security and Office 365 inboxes.

Or you can complete the entire domain name search and registration process on your hosting provider’s site.

Here’s where it gets tricky. You’ll need to choose a domain name as similar as possible to the name of your company, but with over billions of websites out there today, your company’s name might already be taken.

As we covered in the previous section, avoid using dashes, numbers, or trademarked words. Play around with it.

Once you’ve chosen and paid for a domain name, you’ll usually also get personal email accounts attached, so make sure you’re happy to use your domain name as your main online identity.

Below you’ll find some resources about choosing and buying a custom domain:

4. Choose a theme for your site.

Now, for the fun part.

Themes allow you to easily change the look and feel of your site without having to code HTML and CSS from scratch. Themes are made up of templates, modules, images, and global content that control your site’s overall design.

On whatever content management system you chose, take the time to browse through the selection of themes available. Many will come with a directory of free themes, where you can use filters or the search bar to find themes related to your industry, with a specific layout, and more.

Tip: It’s important your theme is responsive, so your site will look the same on all devices.

Other considerations will be specific to your business and site. You might be looking for a static header or a slideshow header, for example.

Or you may need a theme that comes with a front-end builder. Below are some questions you can answer to find the right theme for your site:

Ultimately, no one knows your business better than you. Take the time to consider which theme would best represent your brand and most likely appeal to your ideal demographic.

You’ll have a wealth of choices right in your CMS. Take a look, for instance, at the theme marketplace in CMS Hub:

You’ll want to stay away from hard-to-read fonts or flashy backgrounds that could distract a consumer from understanding your core message. When in doubt, you can’t go wrong if you choose something clean with straight lines and a limited amount of text.

If you can’t find a free theme that meets your exact specifications, try looking for premium themes in third-party marketplaces.

Below are some resources to get started if you’ve opted for the WordPress CMS:

Once you’ve selected and installed a theme on your site, move on to the next step.

5. Customize your theme and templates.

Once you’ve chosen a theme, take the time to customize it and its individual templates. Your site’s design and functionality are your chance to persuade an audience to take a closer look.

It’s imperative your design makes sense to your ideal consumer and works to enhance your product’s success rather than hinder it.

That’s why you should think of your theme and templates as a starting point, rather than the final look. Depending on the website platform you’ve used to build your site, you’ll have different degrees of control over your site’s appearance.

On more flexible platforms like CMS Hub, you’ll be able to edit your theme’s global settings to make sitewide changes. That means you can make changes to your font and other elements in one place and they’ll be implemented across all pages on your site.

Here’s a great resource if you’re using WordPress:

6. Add pages to your site.

It’s important to plan exactly which pages you’ll need to include in your site. While it varies from business to business, you’ll need at least a homepage, an “About Us” page, a “Services/Product” page, and a “Contact Us” page.

You should also add a blog homepage. There are serious benefits to business blogging.

While every CMS is different, it’s typically easy to add and remove pages on whichever platform you use. Let’s take a closer look at the process on WordPress, for example.

Image Source

Once you’ve decided what pages you need on your site, make sure to add them to the navigation bar. You can rearrange page topics any way you want, or combine them.

You can visit other company websites within your industry to get ideas for how to organize your navigation bar, or which pages to include and exclude if you’re unsure.

7. Write content.

You guessed it: It’s time to write the content you’ll put on your site.

Write rough drafts for pages like your “About Us” page and landing page. Talk with coworkers and stakeholders — what message do you want to put out there? What tone do you want to set? Should you make jokes and be funny, or aim to be more inspirational?

If your online audience stumbled across your site, what questions would they have first?

Imagine your website is your only chance to have a full conversation with a potential customer.

The home page is the preliminary introduction: “Hey, we do XYZ.” Your “About Us” page digs deeper: “We are XYZ.” And your products or services pages are your big push to the finish line: “You want to work with us? Great, here’s how you’ll benefit.”

During this stage, it’s imperative you do your keyword research.

For instance, if you’re selling eyeglasses, and you notice “retro eyeglasses” is a more popular search term than “vintage eyeglasses,” you might use this research to steer the direction of the content on your site.

If you’re stuck, check out competitor’s websites to gauge what other companies in your industry are doing.

We’ve compiled a few more resources to help you get started:

8. Fill in general settings.

Once you’ve filled in your pages with optimized content, it’s time to fill in the general settings. By adding or adjusting the SEO elements, you can increase your search visibility.

It’s the same as if you were building your site on a website builder. On your pages, you should include:

Each of these elements is essential to your on-page SEO. They not only help to tell Google about your website and how you provide value to visitors and customers — but they also help optimize your site for human eyes as well as search engine bots.

9. Install add-ons.

Lastly, take a look at your site and figure out what you’re missing. Ideally, your platform will offer all the add-ons you need to extend the functionality of your site.

It’s important to note these add-ons might be called apps, extensions, modules, integrations, or plugins, depending on the platform you use.

If you’re running an ecommerce site on HubSpot, for example, you might use HubSpot’s Shopify extension.

Or, maybe you want to ensure your WordPress website is secure, to protect client data. In that case, you might download the Wordfence Security plugin for firewall protection against attacks, malware, and other threats.

If you’re lacking out-of-the-box features for security, SEO, image compression, and social media, check if your platform offers an app or integration to add that functionality to your site.

It’s much easier to do all this work in one place rather than having to log on to several disconnected platforms.

How to Make a Website with HubSpot

Let’s take a look at how to make a website with CMS Hub. If you’re already using HubSpot’s CRM platform, it probably makes the most sense to build a website within HubSpot to integrate all your sales and marketing needs in one place.

CMS Hub offers a variety of plugins and extensions, themed templates, and sophisticated tools for SEO analysis.

If you want to build a website with CMS Hub, it’s easy and intuitive. Don’t forget to get a domain name and hosting before starting to build your site.

1. Create a homepage.

Within your HubSpot portal, click “Marketing” on the dashboard at the top of your screen. Navigate down to “Website,” then click “Website Pages.”

After that, click the orange “Create” button and choose “Website Page” from the drop-down.

2. Select a theme.

Now, you’ll be taken to this “Choose a theme” page. Scroll through your options, search page templates, or check out the Marketplace. When you’ve found a template you like, select it.

3. Edit the modules.

This is your page. You can scroll over text boxes, images, or other modules to edit them. In the below picture, I scrolled over the “Practice Yoga” Banner Text, and when I click it, it allows me to edit that text.

You can also click the “Contents” tool on the left side of your screen and edit from there. For instance, I selected one “Rich Text” option, which directed me to the “Vinyasa” paragraph on the page.

You can then add text, images, sections, forms, and more when you edit it in the “Expanded” view.

4. Create other pages on your website.

When you’re happy with your landing page and want to move on, go back to your dashboard and click “Marketing” at the top of your screen, and then “Website Pages” again.

Here, you’ll click the orange “Create” button and name your page, just like your home page. Then, you’ll be taken through a similar process of choosing a template and adding content. If you want a more in-depth tutorial, check out a quick tour of website pages.

5. Incorporate social media accounts.

If you want to incorporate your social media accounts, go to “Marketing,” then “Social” on your dashboard. You can monitor all your social media accounts and also publish tweets, Facebook statuses and comments, Instagram pictures, and other content straight from your HubSpot dashboard.

6. View analytics.

If you want to check out your site analytics, go to “Reports” and then “Analytics Tools”. You’ll need to install the tracking code, which is easy to do within the HubSpot platform by clicking the orange “Install the tracking code” button.

7. Add a blog to your site.

If you want to write blog posts, go to “Marketing” > “Website” > “Blog” on your dashboard to create, publish, and monitor your website’s blog posts.

8. Install add-ons.

Last, it’s time to install an app from the HubSpot marketplace to extend the functionality of your website. Here’s how.

Once you’ve completed these steps, just click «Publish» and your site is ready for use.

This is a fairly broad and general overview to get you started building a website with CMS Hub, but there are plenty of more in-depth features and tools you might want to explore with a HubSpot specialist, or by checking out some courses on academy.hubspot.com.

Once you’re done building a website via CMS Hub, it’s important to check that you’re not missing any crucial elements or going live with any glaring errors.

Once you’ve gone through this list above and feel like you’re close to a website launch, check out your website launch checklist for a detailed list of things to check before you go live.

Build a Website: FAQs

Below, we cover some frequently asked questions about building a website.

How much does it cost to build a website?

Here’s a resource to help you gauge costs:

How hard is it to build a website?

Building a website isn’t hard at all, especially if you opt for a website builder that packages everything for you. In general, you won’t need to touch a single line of code.

How do you create a website for free?

You can create a website for free by signing up for a free subscription on a website builder platform such as Wix or Weebly.

However, you’ll have a branded subdomain from the provider (e.g. yourname.weebly.com). You’ll also have the branding on your website, and free websites are often limited in design, features, and functionalities.

We recommend avoiding it unless you’re a hobbyist or only wanting to practice before launching your site.

How do you build a website from scratch?

You can build a website from scratch using HTML, CSS, JavaScript, and sometimes, PHP. You compile these files and then upload them to your web host’s file manager. (You’ll still need to purchase a hosting service and register a domain.)

How much does it cost to hire someone to build a website?

Here are some more resources:

How long does it take to build a website?

A website takes, on average, three to six months to build if your brand is small or just getting started. If you’re creating a custom or complicated project, you can expect your website to take a year or longer before it is up and running.

Build Your Website: Tips

Ready to build your own site? Let’s take a look at tips you can use to guide the creation of your site.

Build a Website to Grow Your Online Reach

Building a website is a must-do for anyone who wants to be online. Without it, you won’t be found at all, and it can help you look more professional and established. Using this guide, you’ll be sure to publish a site that helps your business or your personal brand grow better.

Editor’s note: This post was originally published in May 2018 and has been updated for comprehensiveness.

How to build to website

Подумайте, из каких разделов будет состоять ваш сайт, в чём основная идея и задача. Например, заказчику нужен сайт для архитектурного бюро. На поверхности понимание, что должны быть их работы и контакты. Но мы уточняем: а чем бюро отличается от других?

Оказывается, что бюро специализируется на крупных, сложных проектах и является экспертом в таких заказах. Делаем вывод, что недостаточно просто хороших картинок с подписями, нужен текст — довольно подробные описания исходных данных, процесса, объяснения и обоснования решений. Также мы понимаем, что проектов много, но показывать все необходимости нет. Концентрируемся на самых масштабных. И еще момент, нужно рассказать о людях, объяснить, почему они эксперты в своем деле.

Не уходите в сторону анимации, украшательств и спецэффектов, определите сверх идею, суть — что затронет посетителя эмоционально, что его впечатлит и вдохновит.

Разработка лендинга для школы дизайна. Страница должна объяснить будущим студентам и их родителям кто такой дизайнер.

Проблема: Школьники хотят быть дизайнерами, но зачастую не понимают специфику профессии, какие есть направления в дизайне, чем они отличаются.

Задача: Помочь будущим студентам разобраться в специализациях и понять какая именно им подходит.

Идея: Что если выделить несколько основных направлений дизайна: интерактивный дизайн, графический, промышленный и взять интервью у трёх самых крутых представителей? Личные истории очень эмоциональны и хорошо работают. Рассказать чем они живут, как добились успеха, добавить классные фотографии. Людям будет интересно прочитать, они для себя увидят, что это за человек, близок он, вдохновляет ли его образ жизни.

Откройте текстовый редактор и запишите структуру в виде списка. Оцените объем и подумайте можно ли будет уместить всю информацию на одной странице. Если информации много, то сайт нужно сделать многостраничным. В этом случае подумайте какие разделы вынести в меню.

Нюанс: не пишите главную страницу как начало «дерева». Пусть страница «контакты» будет иметь тот же уровень, что и «главная». Это поможет, когда вы будете делать навигацию.