How to Make a Website – The Complete Beginner’s Guide

Learn how to build your very first website from start to finish in less than a couple of hours.

The Best Free Step-by-Step Guide of 2018

Here’s why our guide is the best you’ll find online!

Easy to Follow

An easy and straightforward guide showing you all the required steps to build a professional website in record time. It’s a lot easier and faster than you may think!

Made for Non-Techies

You don’t have to be a developer to create a simple website for your business. I’ve created this guide for beginners. If you’ve never built a site before, this is for you.

Free Help and Support

Finding it difficult to setup your hosting account? Not sure about which domain to register? Can’t change a feature on your site? Send me an email, and I’ll help you out!

WB Step 1 Icon

Step 1 – Choosing a Website Platform

Watch Video

Let’s get into it. I really want to make sure we go over the entire process of building a website, without wasting any of your time. Make sure you watch our video too, it complements this guide really well!

Before doing anything else, you need to choose which platform you’re going to use. There are several options and website builders out there, from WordPress to Wix, Joomla to Squarespace, and so much more.

These tools are called Content Management Systems, and they are how websites are born.

What is a Content Management System (CMS)?

First off, don’t even think about hand-coding your site. It’s a waste of time, and with the numerous CMS platforms out there, it really makes no sense to do so.

Like the name indicates, a Content Management System, commonly referred to as a CMS, is a platform that allows you to create and distribute digital content around the web.

It’s a simple application that you install on your server (more on this below), which allows you to add, edit, remove and manage all of your content.

You can easily add pages, posts and upload images with a simple drag and drop. You can also add additional features to your site from a huge add-on library to make your site stand out from the crowd.

WB CMS Diagram

According to W3Techs, WordPress is currently the most used CMS, powering almost 30% of all the websites online. WordPress is by far the preferred CMS, and it’s the one I recommend.

What is WordPress? Why Should You Use It?

WordPress is a powerful CMS that will allow you to build your own unique site in the time it takes to read this beginner’s guide to website design. It’s full of tools that make site building easy and allow for limitless customization. We’re going to take a look at the most important features in just a minute.

Before I get into the details, there’s a common misunderstanding about WordPress that needs to be addressed. When we talk about WordPress, we are talking about, not This is also true for about 99% of the tutorials you’ll find online. Logo
WB Software Icon Software – Open source platform that you install on your server. Most hosting companies have a 1-click install. It’s super easy to do (I’ll show you below). Software – Web based platform to access and edit your site. You cannot customize existing settings. It’s all done on’s hosting, not yours.
WB Domain Icon Domain – You can use your own domain once you register it ($5.00-$15.00/year) Domain – You can’t use your own domain unless you get one of their paid plans ($36.00-$299.00/year).
WB Hosting Icon Hosting – You need your own hosting account to use ($4.00-$10.00/month) Hosting – Free hosting for up to 3GB of space with’s servers. You don’t need your own hosting account.
WB Themes Icon Themes and Plugins – Unlimited use of any themes and plugins, free or paid. Get analytics, funnels, SEO, e-commerce stores, membership sites and so much more. Themes and Plugins – Very limited use of plugins and themes unless you buy their higher tier package ($299.00/year).
WB Branding Icon Branding and Control – Your own branding everywhere. You have full control over your site, brand, content, monetization and more. Branding and Control – Limited control of your brand and especially monetization. Unless you buy one of their paid plans, you can’t decide how to monetize your site or which ads are shown.

So, the difference between the two comes down to how much control you want to have over your site. Unless you want to build a super simple blog, there’s really no point in getting a account for your website.

For all the additional features and control that you have with 1-click installation from your hosting account, the additional $60-$100/year is totally worth it.

WordPress is our platform of choice for a variety of reasons, but one of the main advantages of WordPress over other platforms comes down to the community.

Because so many people use WordPress, the amount of free resources, plugins, themes, Facebook groups and support out there makes the platform a no-brainer for anyone building their first website.

WB Step 2 Icon

Step 2 – Setting Up Hosting and Buying a Domain

Watch Video

Now that you’ve decided which platform you’re going to use to build your website, it’s time to buy a domain and hosting account.

A lot of companies will sell you both the domain and hosting at the same time. If you’re just starting out, that’s definitely the way to go. It’s a lot easier to have all the necessary tools on the same dashboard, and since you’re going to need both anyway, you might as well get them from the same provider.

What is a Domain? Which Domain Should You Register?

A domain name is the name of your website. It’s essentially your virtual address. This will allow anyone to go to that address and find your business online. Our website’s domain name is for example.

The average domain costs about $10/year. This is the yearly registration fee that gives you ownership of that domain.

Not sure which domain name to pick? Here are a few things to consider…

  • Relevancy – Your domain should be as relevant to your brand or company name as possible, but certain parts can be omitted. If your legal company name ends with LLC, for example, I would drop that part and just use the rest.
  • Location – For most people, getting a .com is what makes the most sense. I personally prefer .coms over other options, simply because they are the domains people are the most familiar with. Alternatively, if you’re in the UK and you’re marketing primarily to the UK market, it makes total sense to use a country-specific domain, like a
  • Length – Avoid lengthy domains. Go for a name that is easy to memorize, read and understand. The last thing you want is people misspelling your domain name.
  • Characters and Numbers – Generally, I would avoid using characters like “-“ or numbers in your domains. For certain brand names it makes sense, but for most, it doesn’t.
Ultimately, don’t overthink it. The domain is important, but it’s not necessarily going to be that critical when it comes to the success of your website.


What is Web Hosting?

While the domain name is your virtual address, web hosting is the actual physical space. It’s where all of your files are hosted, from your pages and posts to your database files, and so on.

There are thousands of different hosting options out there, and prices vary greatly between them. Generally, you can expect to pay about $4-$10/month (usually paid annually) for hosting.

I’ve used 50-60 different web hosts over the last few years, so we’re experts when it comes to choosing the very best. In 2018, SiteGround is our complete beginner’s website building guide top pick. At $4/month for the first 12 months, their StartUp Plan offers an all-inclusive starting point with exceptional service. And you can always upgrade it at any point to the other two packages if you need to host additional domains, get priority support, and speed up your website.

How to Setup a Hosting Account?

Here’s the step-by-step processing on setting up your hosting account…

1 – Go to SiteGround

Starting by going to SiteGroud’s shared hosting page. If you’re starting out, their StartUp Plan is perfect. Keep in mind that you can always upgrade your plan as your website grows.

WB Screenshot

2 – Choose Your Package

Click on the button labelled GET STARTED for the plan that best suits your needs. At this point, SiteGround will ask you about your domain.

WB Shared Screenshot

If you already have your domain registered elsewhere, choose the option I already have a Domain. Once you’re done with the hosting account setup, SiteGround will give you the correct nameservers to point your domain to.

If you need to register your domain, choose Register a New Domain, and enter the domain name of your choice.

WB Buy Domain Screenshot

Click PROCEED once you’re ready,

3 – Order Confirmation and Payment

Make sure you enter all of your details correctly. Confirm the final amount and proceed with the payment.

As you finish up, check your plan one last time and see whether you want to add any additional services to your hosting account.

We recommend purchasing domain privacy, but it’s not required to get started.

WB Details Screenshot

Once you’re happy with everything, agree with the terms of service, and click on PAY NOW.

4 – Account Setup and Security Certificate.

Congrats! You just bought your first domain and hosting account.

Now, before we install WordPress and start building your website, we’re going to install a security certificate on your domain.

We want to make sure that your website is as secure as possible. Luckily, SiteGround has a free SSL (Secure Sockets Layer) option, so we’re going to install it on your domain to encrypt your website’s data and information.

Start by going to the extra services hosting services provided by SiteGround (once you login).

WB Extra Services Screenshot

And then make sure the Let’s Encrypt SSL is enabled and HTTPS is enforced on your site.

WB Free SSL Screenshot

WB Step 3 Icon

Step 3 – Building Your Website

Watch Video

Finally, the moment you’ve been waiting for…

It’s time to build your site!

The steps that I’m going to show you below are based on an example site that I’ve created. Take a look here:

WB Mike Wong Home Screenshot

I’ve decided to build a simple one-page site so we can explore the different theme options, plugins that you should install, how to create a custom page with a drag-and-drop plugin and more!

The idea is to show you the basic features of WordPress and how you can come up with a simple and professional website for your business!

How to Install WordPress? The 1-Click Installation…

Most hosting providers will provide you with 1-click installation for a lot of different applications. Because WordPress is so popular, if you choose a half-decent hosting company, you’ll also have this feature.

It’s super easy to do; just go to your hosting provider’s panel, look for the WordPress icon, click it and start your installation.

Here’s how to do it on SiteGround (the process will be very similar for other hosting providers…).

1 – Log in to SiteGround

Once you log in to your SiteGround account, find the cPanel button. This is the control panel for your server. It allows you to create emails, add subdomains, install applications, access the database and so much more.

WB Dashboard Screenshot

2 – Find WordPress

Look for the WordPress icon under AUTOINSTALLERS and click the icon.

WB cPanel Screenshot

3 – WordPress Installation Details

Now it’s time to customize your installation, choose your domain, site name and so on. You’ll be able to change a lot of these things later on, so don’t overthink it!

Choose Protocol – Remember when we installed the security certificate (SSL) earlier on? Here’s where we use it. Make sure you choose either https:// or https://www. If your certificate was correctly installed in the beginning, SiteGround will allow you to install WordPress with the https version.

Choose Domain – Pretty self-explanatory. Just choose your domain name.

In Directory – Don’t worry about this option; just leave it empty. If your hosting account adds a directory by default, like /wp or /blog (which happens with some providers), remove it.

Site Name – Add your brand name here. This is one of the settings that can easily be changed once we access WordPress, so you can leave the default name and change it later if you want.

Site Description – Add your site description/tagline here. Similarly to Site Name, we’ll be able to change this later.

WB WP Installation Part 1 Screenshot

Admin Account – Choose a username, password and admin email for your account. You’ll be able to add and remove users once you install WordPress, but make sure you save these account details!

WB WP Installation Part 2 Screenshot

Leave everything else as it is and click Install.

Content, Images and Videos

A big part of your website will inevitably be the actual content for the different pages and posts as well as your images and videos.

You want to make sure you’re using royalty free images from free and paid resources. You can’t simply go to Google and use one of those images for your site. You’ll most likely need a license to use those images, so keep that in mind.

Here’s a great article explaining the different types of licenses and how to look for free images for your website and blog.

Copyright Free Images

For the sample site, I used images from Pixabay and Pexels, which are completely free. Both websites are under the CC0 License Agreement, which allows you to use their images for commercial use without any attribution.

WB Pixabay Screenshot

Outsourcing Logo an Graphic Design

If you need help designing your logo, or finding high-quality icons and graphics for your website, you can always outsource it.

There’s a lot of outsourcing sites out there, here are two options that you may want to consider:

  • Fiverr – don’t expect to pay $5 and get a $500 service. This is a great option if you want to save some money, but still get something done. If you just search for graphic design gigs on their marketplace, you’ll be able to find someone with great reviews and portfolio.
  • Upwork – this is a leading freelancing platform. It doesn’t really have “gigs” per se, but you can post a job for free, and then hire the best candidate for the job. Make sure you’re very clear about what you want, give them a proper briefing, and then invite freelancers with a proven track record to bid on your project!

WB Fiverr Screenshot

How to Choose a WordPress Theme?

There are thousands upon thousands of themes out there, both free and paid. If you’re on a tight budget, there are plenty of great free themes that you can use, but it may be worth it to look at some paid themes as well.

In this guide, I’m going to show you how to build an awesome looking website using a free theme from SiteOrigin called Vantage.

Finding a Premium Theme

If you’re looking for a premium theme, I recommend going to Theme Forest. It’s a marketplace with almost 40,000 paid WordPress themes, and you’ll likely find one that suits your business needs.

There’s one great benefit about buying a theme from Theme Forest. For many of their themes, you’ll be able to deploy one of their demo sites. This is a great starting point if you don’t want to spend any time with your images, design and development. It’s as simple as doing a little modification to your text and plugging it into the default setup that comes with the theme.

WB Theme Forest Popular Premium

Make sure to go to their Popular Items page under WordPress to look for the best sellers. Be prepared to pay a one-time fee of $30-$60 for a premium theme.

Finding a Free Theme

Like I said before, for this guide, I’m going to use a free theme which comes with a ton of different customization options.

Once you login to WordPress, go to Appearance > Themes and click on the button Add New.

WB Themes Library WordPress Screenshot

You’ve now landed in WordPress’s free theme library where you can literally find thousands of different themes. I recommend going with Vantage, which is what we’ll use for this tutorial.

Search for Vantage in the top-right corner, install it and activate the theme.

Here’s the site we’re trying to replicate:

How to Customize a WordPress Theme?

Now that you have installed Vantage, we’re going to customize its basic settings! Here’s how to do it…

1. Go to WordPress Customize Panel

From your WordPress dashboard, go to your menu and find Appearance > Customize.

WB WP Customize WordPress Screenshot

2. WordPress Theme Settings

Since you’re using Vantage, the first customize menu item you’ll see is Theme Settings. Click on this to change the basic settings of your Vantage theme.

WB WP Customize Theme Settings Option Screenshot

I’ve attached the screenshots of the different setting that I’ve selected for each. Feel free to change them to whatever fits your needs.

In the video tutorial, I go over each setting one-by-one, so if you’re not exactly sure how to do it, I recommend that you watch the video! (And as always, I’m happy to help! Just send me an email!)

3. WordPress Page Template Settings

This is going to make sure that all of your pages use the same template. You don’t want similar pages and posts to have different layouts and configurations, at least for the majority of them.

Again, you can find the different settings below!

WB WP Customize Page Template Blog WordPress Screenshot

4. WordPress Site Identity

This is a feature that you’ll see in every single theme. It’s a WordPress default setting, and it allows you to choose your website name, tagline, site icon and logo.

WB WP Customize Site Identity WordPress Screenshot

5. Theme Design

Time to customize how your site looks! We’ve already done a ton of work, so don’t feel discouraged just because you’re not seeing the full site yet.

This part is mostly about colors, images and simple styling. We’re going to be choosing our fonts, buttons, menu styles, sidebar, footers and more.

WB WP Customize Theme Design WordPress Screenshot

In the video, I also go over each of these design settings, but here are the screenshots for each of them:

6. Menus

Here’s where we create the menus for our website. WordPress lets you create as many menu combinations as you want and then add those menus to different places on your site.

Different themes have different menu options. For Vantage, you’ll simply have to click on Create a New Menu, enter the menu name and check the menu location checkbox.

WB WP Customize Menus New Menu WordPress Screenshot

Click Next and then Add Items and start customizing your menu.

WordPress has different menu item types. For this website, we’re going to use Custom Links and Pages. Those, along with Categories, are the most common, and they’re the ones you’ll end up using the most for your menus.

WB WP Customize Menus Edit Menu WordPress Screenshot

In terms of customization, this is going to be it for now. Click on the large blue button on the top left corner labeled Publish, and go back to the WordPress admin panel.

How to Add Plugins to WordPress? Which Plugins to Install?!

Before we build our pages, we need to add a few plugins.

In WordPress, plugins are essentially extensions, or additional features that you add to your site. For example, we want to have contact form on our website. WordPress doesn’t have that option by default, so we’ll install a plugin for that.

Jetpack by

This plugin adds a ton of features to your website, from speeding up your images to small security tweaks, or even social media buttons on your posts. You’ll also be able to track your visits from WordPress itself, look at the most visited pages and so on.

Once you install the plugin, you’ll have to create and activate your account. Enter your details and choose the free option.

WB Jetpack Part 1 Website Screenshot

After you’re done creating the account, Jetpack will redirect you back to your website, where you’ll be able to choose the features that you want to add.

For now, just go with the recommended features given to you by Jetpack, and move on.

Page Builder by SiteOrigin

This is a must for the website that I’m going to show you how to build. As I’ve mentioned before, SiteOrigin has a super easy to use page builder that will allow you to create a page with a drag-and-drop interface.

It adds several types of widgets that you can use with the page builder, giving you everything from contact forms to buttons, sliders, testimonials and more!

WB SiteOrigin Page Builder Screenshot

All you have to do is install and activate the plugin. I’ll show you exactly how to use it for your homepage below.

SiteOrigin Widgets Bundle

This plugin will add even more widgets to your page builder. You’ll have access to more options and different widgets for all the sections you want to build on your pages.

Once you activate the plugin, go to Plugins > SiteOrigin Widgets and check the additional widgets that you wish to activate.

WB SiteOrigin Page Builder Widgets Screenshot

Black Studio TinyMCE Widget

This is a very simple plugin that will add a text widget to WordPress, which will be very useful once we start building our pages.

W3 Total Cache

There are a ton of caching plugins out there. The main goal of these plugins is to speed up your site.

With a caching plugin, the idea is to store some of the information on your site locally. When someone goes to your site, some of the information will be stored in their browser. In this way, the browser won’t have to process new information every time the user visits your site.

WB W3 Total Cache Plugin Screenshot

You’ll notice a slight performance improvement as soon as the plugin is activated, but here’s an awesome article by wpmudev showing you how to make the most out of your W3 Total Cache plugin.

Wordfence Security

There are two major security plugins for WordPress. Most people use Wordfence or Sucuri. I actually like to use both, as they have different features that complement each other.

Once you activate Wordfence, your site will be more secure than it was before. Will it be 100% safe? Unfortunately, it’s impossible to have a site that’s impenetrable.

WB Wordfence Security Plugin Screenshot

Yoast SEO

Arguably the most popular SEO WordPress plugin out there, Yoast is what we use for all of our websites as well as our clients’ sites.

SEO, or Search Engine Optimization, is essentially the combination of techniques and strategies that you can use to optimize your website for search engines, like Google and Bing.

There’s both on-page and off-page optimization, and Yoast SEO is a WordPress plugin that helps you with your on-page. It’s not going to do everything for you though!

WB Yoast SEO Plugin Screenshot

If you want to make the most out Yoast SEO, check out this great article. Once we get to building the home page, I’ll show you how to customize the description and title that show up on search engine result pages using Yoast.

There are a lot more plugins that you can add to WordPress. As a rule of thumb, try to only install plugins that are tested with the current WordPress version and that have a minimum of 2,000-3,000 installations (ideally 10,000+).

How to Create Your First Page on WordPress? Building Our Home Page

Time to build our first page!

As I’ve said before, we’re going to build a home page just like To do that, we’re going to use SiteOrigin’s page builder, which you’ve already installed.

Here’s the exact step-by-step process on how to build your first page…

1. Add a New Page and Create a Title

Head over to Pages > Add New on your WordPress menu and create your very first page. The very first input you’ll see lets you add the page title. Let’s start with that.

WB WordPress Add Page Screenshot

2. Enable the Page Builder

WordPress lets you create and edit a page in a variety of ways. The default page and post editor is the visual builder, which works very similarly to normal word processor software, like Microsoft Word.

Let’s click on Page Builder.

WB Enable Page Builder Screenshot

You now have 3 main options:

  • Widget – This is a building block of your page. Each widget type has its own functionalities and lets you add that specific feature to your page. For example, if you want to add a button, SiteOrigin has a widget button that you can use. If you want a text box, there’s a text widget that you can add. Widgets are added to rows and columns.
  • Row – This is a row on your site where you’ll add different columns, backgrounds and colors and where you can customize the size and style of your rows and columns.
  • Prebuilt Layout – This is where you can import a layout, either from another page that you’ve built or from someone else that provided you with that layout. SiteOrigin has some layouts available, or you can download the layout from below!

Get the Mike Wong Consulting Layout for Free!

3. Creating Your Hero Section

The hero section is the very first part of your website, where people typically add sliders. I’m not a fan of sliders, and here’s why! At the end of the day, what matters is conversions. A nice hero section with a static background image and a simple tagline is all you really need.

WB MWC Hero Example Screenshot

Our hero section is going to have a background image, a text widget and a button widget.

Add a Row with Two Columns

Make sure they are 50%-50% in width, and on the right-hand side you’re going to click on Layout. Make sure the Bottom Margin is 0px and the Padding is 170px on the top/bottom and 0px on the left/right.

Row Layout should be set to Full Width (we’ll do this for almost every row). You also want to go to Design and add your Background Image.

WB MWC Hero Part 1

Save everything and close the popup.

Add a Text Widget

Now, click on Add Widget, and select Visual Editor (it should be the last one on your list). Simply add your text there.

WB MWC Hero Part 2

Add a Button

We also want to add a button to our hero section. Add a widget again and select SiteOrigin Button. Now you have to edit it, add your Button Text and Destination URL. Scroll down to Design and Layout and edit your colors. Here are the settings I’ve chosen for Mike Wong Consulting.

WB MWC Hero Part 3

Your hero section is done now. You can save your page, publish it and open the live site to see how it looks. You’re doing great so far!

4. Creating a Brands Section

The idea behind this section was to simply add brands that the consultant Mike Wong has worked with. This section can either be omitted (depending on the type of site that you’re building) or changed to other brands, mentions, etc…

WB MWC Brands Example

For this section, I simply added a 100% width column on a new row and added the SiteOrigin Image widget. The settings for your row are very similar to what we saw above but without that increased padding. This makes the section to a bit shorter.

WB MWC Brands

5. Creating a Features Section

We want to add 3 features to our page that characterize the service provided by Mike Wong. Before the three small features, make sure you add a Visual Editor widget with the sub-title for this section.

WB MWC Features Example

The next widget you want to add is the SiteOrigin Features widget.

Customize Row

Edit your row settings to make sure the dimensions are set appropriately. Go to Layout and make the Bottom Margin equal 0px, the Padding as 40px on Top and Bottom and the Full Width Row Layout.

Go back to Attributes, which is just before the Layout settings, and add an ID (in this case, “expertise”) to the Row ID. Once we create our menu, we’ll link a menu item called “Expertise” to this section of the homepage.

WB MWC Features Part 1

You’ll have to do this again for the other sections that you wish to create a menu item for.

Add a Feature

Once you click on Edit to customize the widget, go to Features and click on Add. Make sure the Container Position is set to Top, choose your Icon Image, Title text and then Text inside the editor provided.

WB MWC Features Part 2

You can then duplicate these features and just edit them for the new ones.

Customize Widget

Once you’ve included all the features you want to add, scroll down and make sure Container Shape is set to None, Container Size and Icon Size to 70px, Features per row as 3, and enable the Responsive Layout.

WB MWC Features Part 3

6. Creating an Industries Section

The industries section that I created for Mike Wong’s site was simply a row of three columns with a Visual Editor in each of them.

WB MWC Industries Example

But there’s a small trick!

You have to edit the section and make sure the text is white. You can do that with the visual editor settings.

Then, go to Layout and set the Padding settings according to the following values: 230px 40px 40px 40px. Next, go to Design and change the Background Image. Make sure Font Color is set to white.

WB MWC Industries Part 1

Go through the same process for all three columns, change the text and image and you should be able to achieve a very similar result.

7. Creating a Call-to-Action Section

Call-to-Action sections are very important, and your pages should always direct users to an action that you want them to take. In this case, the goal of this home page is to drive contacts. We want to have people contact Mike Wong for a business consultation.

WB MWC CTA Example

Customize a Row

Add a new row to your page layout and make sure you have two columns, one with 75% and the other with 25%.

As you’ve may have guessed by now, your Bottom Margin should be zero, and you also want a Full Width Row Layout. I also added a dark-blue image background here.


Adding the Elements

You’ll have to use a Visual Editor widget for the text. Make sure this text is white as well. As for the second column, you’ll have to add a SiteOrigin Button widget just like we did for the hero section.

8. Creating a Testimonials Section

Testimonials are a great way to display some glowing feedback on your website from previous clients that were happy with your work or products.

WB MWC Testimonials Example

Luckily, SiteOrigin also has a Testimonials widget. That’s  what we’ll use for this section.

Once you add the widget, you’ll see that it’s very similar to the Features widget. For each testimonial, add a Name, Location, Image and the testimonial Text.

WB MWC Testimonials Part 1 Screenshot

Again, you can simply duplicate the first testimonial and edit it for any others that you end up adding.

Scroll down to Settings and make sure you’re showing 2 Testimonials per row. For Design, make the Testimonial image shape Round, and the Image Size equal 100.

WB MWC Testimonials Part 2 Screenshot

Keep scrolling down until you get to Colors. Add a Padding of 10, set the User Position to Left and set the Testimonial Layout to Side by Side.

WB MWC Testimonials Part 3 Screenshot

You’re done!

9. Creating a Contact Section

Now, the last element of our home page is the contact section. The row settings are very similar to the ones we saw in the Call-to-action section.

We want a dark-blue image background, nice padding on the top and left, white colors and so on. Although for this one, we’ll only have one column.

WB MWC Contact Example

Add a Visual Editor widget once again to introduce the section and then add a SiteOrigin Contact Form widget.

Adding Fields

Once you start editing the widget, go to Fields and click on Add. Choose a Field Type and Label and set it as a Required Field if you need it.

For this site, I added a Name, Email, Subject and Message field.

WB MWC Contact Part 1 Screenshot

Styling the Form

Scroll down to Design and make sure there’s no Background Color. Set the Padding to 10px and  Border Width to 0px.

WB MWC Contact Part 2 Screenshot

For the Field Labels, make sure the Position is set to Inside and Left Align. The Padding should be 10px (this is for the fields themselves) and Border Rounding should be set to 20.

WB MWC Contact Part 3 Screenshot

You can also style the submit button to match the other buttons on the site.

Before saving it, go to the Layout on the right-hand side and make sure your Left and Right Padding is set to 200px.

WB MWC Contact Part 4 Screenshot

Congrats! You’ve built your first WordPress page.

Save it, publish it and take a look. If it’s not everything you imagined, don’t worry! You can always go back and improve it!

Make sure you watch my video for this section as well. It goes through every single step very thoroughly.

10. Adding a Meta Title and Meta Description (Yoast SEO)

This is optional, to be honest. As a person who builds websites that are specially designed and developed for the SEO industry, and because I’m so passionate about SEO, I couldn’t really talk about building a site without taking a super basic look at it!

If you scroll down the WordPress page editor, you’ll get to the Yoast settings.

Here you can add your custom title, which will show in the search engines, as well as a meta description. You want to make sure that these are catchy and action-driven.


Potential customers will be scrolling through the search engine result pages and you want to make sure they click on your page, not your competitor’s!

How to Add Posts to WordPress? Publishing Our First Post

Ok, now that you know how to create and customize a page, let’s add a simple post to your WordPress site.

Posts are a huge part of WordPress. You can add, edit or delete posts as well as schedule them, leave them as drafts, change publishing dates, add images, categories, change URLs etc… There are so many options, all of which are very intuitive.

So, here’s the process for creating and adding your first post to WordPress…

1. Go to the Post Editor and Add Your Title

Head over to the right side of WordPress where you’ll find the admin menu. Click on Posts > Add New. This is identical to the page editor, so add your title first.

WB New Post Screenshot

2. Adding Text

For your posts, don’t worry too much about the Page Builder. Just use the normal Visual builder, add in your media throughout the post with the Add Media button, add your sub-headings and so on.

3. Adding Categories

You don’t want to overuse categories. I usually add 1-3 categories per post, depending on what the goal of the site and the post is. Categories can be found on the right-hand side once you start scrolling down.

4. Adding a Featured Image

This is very important. Make sure you scroll down completely and click on Set a Featured Image. Choose something related to your post, either from your own photo library or from an image database like Pixabay and Pexels.

When you share your posts and links on, say, social media, these sites will attempt to include an image. This is where they get it from, so make sure it has the proper dimensions.

Also, when you create, for example, a blog page on your site, WordPress will show your featured image in a blog card, similar to what you see below. So don’t ignore it!

5. Publishing Your Post

Once you’re happy with everything, hit the Publish button, and your post is live. It’s that simple!

How to Add Widgets to WordPress? Customizing Our Footer

Most themes have two major widget sections. One is in the sidebar, and the other is in the footer. You can add all sorts of widgets to your site, from search bars to calendars, recent post widgets and so much more.

Here’s how to do it…

1. Go to the Widgets Editor

Go back to your admin menu, and click on Appearance > Widgets.  On the left side of the panel, You’ll see a huge list of Available Widgets, and on the right side, all the possible widget areas.

This is a simple drag-and-drop editing area, so feel free to play around with the different widgets and areas available.

WB New Widget Screenshot

2. Adding Widgets to the Footer

For this site, I’m going to keep it super simple. I’ve only added a Visual Editor widget to the footer area with the copyright text. You can add as many widgets as you want though.

As a general rule, I wouldn’t add more than 3-4 columns to the footer of your site. You can have more than one widget per column, but for most sites, it doesn’t make a lot of sense.

Final WordPress Tweaks

We’re almost there! There are just a few more adjustments needed to make sure your site works properly.

Reading Settings

Go to Settings > Reading and make sure Your homepage displays is set to “A static page,” and choose the Homepage as Home. This will ensure that the page we just built is the default homepage of your website. It’s very important that you tell WordPress the page that you want to set as your home.

WB Settings Reading Screenshot

Permalinks Structure

Go to Settings > Permalinks. This is the default structure of your URLs. There are a variety of options, but the cleanest and best option is the Post name structure.

WB MWC Settings Permalinks

Congrats! You’re Done!

Aaaand you’re done! It’s likely that you’ve made small mistakes on your first try, but that’s pretty normal. It’s all part of the learning process.

The great thing about WordPress is that it’s super easy to go back to all of your settings, pages and posts and make the necessary adjustments.

I’ve made a huge video documenting the entire process from registering the domain to building the site. My step-by-step video guide compliments this written tutorial to help you set everything up.

If you have any questions about any specific part of the process or any feedback on this complete beginner’s guide to website design, please let me know! I’m here to help you with any question you may have! Email me at [email protected] with your questions. I’m looking forward to hearing from you!

And don’t forget to send me your site when you’re done. I want to see what you’ve built!

by Gonçalo Costa

After working with hundreds of clients, and building thousands of websites, I've decided to launch a website to help people build their own websites.

Not every person has the budget to hire professionals to design and develop their websites, so I wanted to launch a free online resource to help those people. Building a professional website doesn't have to take very long, nor do you have to spend thousands of dollars to do it.

Subscribe to Website Beginner

Looking for the best tips and tricks on how to build a website? Join our email list and get the best of Website Beginner straight in your inbox!

Pin It on Pinterest

Share This