Building a website. Ugh. Sounds like a headache, doesn't it?
Well, I’m here to help.
I built my first website two decades ago. Writing a beginner’s guide to building a website back then would have just been coding tutorials.
But things have changed.
Today, anyone can build a website— and this guide will show you how!
Start Here: 3 Things To Do Before Starting Your Website
There is nothing wrong with just jumping in and getting started but a little bit of planning can go a long way.
Here are three things I’d suggest you do before starting your website:
1. Choose a goal for your website
Your website isn’t an end in and of itself. It needs to accomplish a goal for you or your business.
Here are some example goals:
- Generate leads
- Sell products
- Get newsletter subscribers
- Take donations
This goal should inform every design and content decision you make. Every website question can be solved by asking: “will this help us accomplish our goal?”
2. Decide on how you’ll make your website
The 3 most common ways are:
- Using a website builder like Wix or Squarespace
- Using a CMS like Wordpress
- Coding from scratch with tools like Jekyll or Gatsby.
When I’m building something more sophisticated— for example, Atlist— I code from scratch.
3. Register your domain name
This is just a good thing to lock down early.
4. Create a plan (optional)
It can be helpful to plan out the structure for your website.
Here’s an example:
1. Using A Website Builder To Build Your Website
What is a website builder?
Website builders are all-in-one website building tools.
They often have a drag and drop visual editor and include everything a typical website might need: templates, photo galleries, web hosting, forms, and more.
Website builders are commonly used for portfolios, blogs, small business websites, online stores, and more.
What’s the best website builder?
The best website builder depends on your needs. Here’s what I’ve found:
- Squarespace — Has outstanding templates, thoughtful features, and intuitive design. I chose it as the best all around website builder.
- Shopify — Has a clear interface, useful app store, and industry-leading innovations and is the best website builder for e-commerce;
- Webflow — A great custom design tool with a full CMS. Great if you want to create your own templates.
- Square Online — The best free website builder.
A Step-by-Step Guide To Building a Website With Squarespace
Now that you’ve got an overview of website builders, let’s walk step-by-step through creating a website with Squarespace.
You can see the final version of website we’ll build here.
Step 1: Choose A Template
Sign up to Squarespace to get started.
The first step is to choose a template. Squarespace provides a bunch we can choose between:
Think of each template as a starting point— we’ll be customizing it so that it will have its own unique look and feel.
I am going to choose the Paloma template:
Next up, we’ll sign up for Squarespace’s free trial— there’s no credit card required at this point.
Signing up with Squarespace.
After completing signup, we’re in Squarespace! Nice!
Step 2: Creating Pages
We’ll begin by adding some pages. So click Pages:
Delete Demo Pages
Squarespace gives you some demo pages to start off— but we’re just going to delete those.
Now let’s add our pages. Click the plus (+) icon to add pages:
We’re going to add 3 blank pages (Songs & EPs, About, and Contact) and 1 blog page (Blog). These will make up our main navigation.
Step 3. Add A Logo & Customize The Header
Next, we’re going to add a logo and customize the header.
So click Edit to open the editor:
Then hover the header with your mouse and click Edit Site Header:
Remove The Social Icons
Next, we’ll remove the social icons and customize the button in our header.
So click Elements:
And we’ll do two things. First, let’s turn off the social links toggle. Second, let’s make the button link to my Spotify:
How To Add Your Logo
Go back to the header editor. Then click Site Title & Logo:
And from there, you can upload a logo image:
I don’t have a logo for my music— that’s why I’m using the Nike logo as an example.
So I’m just going to stick with the default text logo Squarespace provides:
Customize The Navigation
Next, I’d like to align the navigation to the center.
So go back to the header editor and click the Desktop icon:
From there, we can select where we’d like navigation to show— let’s set ours to centered:
And there we go— our header is customized! Here’s how it looks:
Step 4: Styling The Website With Fonts & Colors
Next, we are going to customize the fonts and colors. This is a useful way to establish the brand.
Choosing Custom Fonts
Click the paintbrush icon to open Site Styles:
Then choose Fonts:
The Global Text Styles let us select the fonts that we want to use across our entire website:
I am going to select Freight Text Pro for headings and Helvetica Neue for paragraphs, buttons, and misc.:
Setting Custom Colors
Setting custom colors is a great way to establish your brand— so let’s do that.
Click the paintbrush icon to open Site Styles:
Then choose Colors:
And click Edit Palette:
Your website colors will come from this palette— changing the palette will automatically adjust the colors across your entire website.
The most important color in your palette is the Accent Color. You’ll want your most important brand color here. I choose a royal blue for mine:
Step 5: How To Edit Pages In Squarespace
Now let’s start designing the content of our website— we’ll start with our homepage. So navigate to the homepage and open the website editor (remember, you just have to click the Edit button).
Changing The Background Image
Let’s start by changing the Section background. So click the pencil icon (below) to open the Section Editor:
Then click Background and upload a new background image:
You can use the Overlay Opacity to add some darkness to your background. This helps text standout:
To edit the text in Squarespace, you can just click it and the text editor will pop up:
Click the blue + icon if you’d like to add a new text Content Block:
We are going to add a video Content Block:
Here's how it looks— we have text and a video content blocks:
How To Change Section Height & Width
You can also change the height and width of the section when in the Section Editor.
For example, here’s a Large section:
And here’s a Medium section:
Create Sections From Scratch
Let’s create the Contact page next. So navigate to the Contact page click Add Section:
Squarespace includes pre-built sections so that you don’t have to create each page from scratch.
We’re going to choose one of these pre-built contact page sections…
…. And now we have our Contact page!
Setting The Color Of A Section
We just need to change the color background to a darker color to match the rest of the website.
So click Edit Section:
Then click the Colors tab and choose a darker color:
Step 6: Creating A Blog
- Note: Just skip this step if you don’t need a blog on your website!*
By now, you should have a pretty good sense of how Squarespace works. So I’m going to move a bit quicker.
So navigate to the Blog page.
And let’s add a Headline section:
There, that looks good:
Customizing The Blog Layout
Now I want to change the layout of the blog— which we can do by clicking Edit Section:
From there, I’ll make a few customizations:
- Changed Layout to Masonry
- Changed Width to Inset
- Put posts in 3 columns
- Hide Excerpts and Read More Links
- Put Meta Content below the title
- And centered all text
So it looked like this:
How To Add Blog Posts In Squarespace
Open the Blog Editor to add new posts.
You can open the editor this by clicking Manage Posts on a blog page:
From there, simply click the post you want to edit:
Step 7: Edit The Footer
We still haven’t edited the Footer of our website. So navigate to the bottom of the page and click Edit Footer:
To begin, let’s remove everything in the footer:
Then I’m going to add this pre-built section Squarespace provides:
From here, I customized the text and added Social Links and Newsletter content blocks.
I also changed the color to dark to match the rest of the website:
Step 8: Add A Domain Name
So now our website is done!
(Note: To save you time, this article doesn’t show you building the Songs & EPs page and the About page— but you should know how to create those pages by now.)
Here’s how our website looks:
Now let’s publish this website to a custom domain name!
First: Upgrade Squarespace
In order to add a domain name, we’ll need to upgrade to a paid plan.
Paid plans can be either Monthly or Annually. I’m going to choose an annual plan because it includes a free domain name for 1 year.
I’m going with Personal— the cheapest plan:
Claim Your Free Domain Name
Once you upgrade to a paid plan, you’ll have an option to claim your free domain name. Click this box:
Then click Get Domain:
From here, we can search for our free domain name! I’m going to go with this one:
Last Step: Publish The Website
Once you have your domain name chosen, the only remaining step is to publish the website!
So go to Settings and click Site Availability:
Then set the site to Public:
And from there our website is live on our domain name!
2. Using A CMS Like Wordpress To Build Your Website
WordPress (to be precise, WordPress.org) is a CMS (or Content Management System). It’s a software platform that lets you create, store, search, and edit content.
Unlike website builders, you can’t design your website with a CMS — you will have to rely on templates, blocks, or page builders that go on top of the CMS.
CMSs are more flexible than website builders, though. That’s thanks to numerous plugins and hosting options available. However, there’s a learning curve. (You can read this WordPress vs Website Builders comparison to learn more.)
Here’s how a typical process of building a website with CMS looks:
- Register a domain name.
- Pick a hosting plan that supports the CMS.
- Point your domain to the hosting plan. (You’ll need to learn about DNS and Nameservers)
- Install the preferred CMS. (Again, might need technical knowledge)
- Choose or upload a theme on top of it. If you want to make any changes to the theme, there’s no drag-and-drop — you’ll have to edit HTML and CSS.
- Set up CMS (add plugins, create users, set up security, etc.).
- Start publishing content.
Just like website builders, there are many CMS options out there- Joomla, Drupal, Netlify, etc.
The most popular of all is WordPress. It powers more than one-third of websites on the internet. You’ll get access to thousands of themes and plugin options if you decide to go with it — however, you’ll need a bit of technical expertise to build the website exactly as you like.
Here’s a Step-by-Step Guide to Build a Website With WordPress:
Step 1 : Register the Domain
The first step is to register a domain name. I recommend using Namecheap or Google Domains for domain registrations.
Step 2: Pick a Hosting plan
Almost all web hosting companies offer WordPress hosting. Most even have managed WordPress plans.
Though I haven’t tested all web hosts like I have reviewed website builders, I do have experience with a few. I recommend using Kinsta or Siteground for the best WordPress performance.
Step 3: Point your Domain to the Hosting Plan.
Say you bought a domain name from Namecheap. You’ll find a Nameservers option when you click on Manage Domain.
There, you’ll have the option to change nameservers. Add your hosting nameservers to point the domain to the hosting plan.
Step 4: Install WordPress
There are two ways to install WordPress:
- Downloading and uploading to your server: If you choose a web host that doesn’t offer a WordPress installer or wish to run the site on your own server, you’ll need to install it manually—a lot of technical stuff in there.
- Using a WordPress installer: If you choose a managed plan, you’ll most likely have WordPress pre-installed. In case you go with shared hosting, your hosting provider might have a one-click installer. For instance, Namecheap includes Softaculous app installer that has the WordPress script, among many others.
Using it, you can install WordPress in a couple of minutes.
Step 5: Choose/Upload a Theme
Under Appearance on the WordPress dashboard (which will be accessible at yourdomainname.com/wp-admin), you’ll find the option to add a theme.
Choose one from the WordPress marketplace or upload a third-party theme.
Remember: You’ll have to make do with whatever functionalities/visuals the theme has. There’s no drag-and-drop builder to customize the visual elements of the theme. Want to change something? Know HTML, CSS, and PHP!
Step 6: Install Plugins:
The best way to add functionality to your WordPress site is through plugins.
You’ll find plugins for almost anything on the WordPress plugin store- SEO (search engine optimization), security, cache, forms, social media sharing, analytics, landing pages, e-commerce (using Woocommerce), and more. Install what’s needed.
Step 7: Start Publishing Content
That’s it. Your WordPress website’s ready.
3. Coding From Scratch To Build Your Website
This is always an option— though this can have a big learning curve.
Side Note: I used to code all my websites from scratch. Now I almost never do. These days it’s just easier and faster for me to use a website builder for most small websites.
Tips & Tricks: The Secrets To Great Websites
So I’ve shown you how to build a website. But in this section, I want to share tips and tricks that will help you build a great website.
Tip #1: Choose a Goal
Your website isn’t an end in and of itself. It needs to accomplish something for you. Almost all decisions can be solved by asking: “will this help us accomplish our goal?”
On my website, the goal is to get more listeners— so I gave the most valuable real estate on the website to a ‘Listen On Spotify’ button:
Your goal might be different: for example, if you want to generate leads, maybe the button should link to a contact page!
Tip #2: Be Human
Human works on the internet.
People will respond to your website if you make it clear there is a real, live human behind it— don’t try to hide behind corporate language or vague stock photography.
This website is an excellent example of being human— don’t you feel like you know Josh just from the photo and colors?
Tip #3: Less Is More
People don’t read websites; they scan websites. Distill everything down to the essentials.
No walls of text.
Tip #4: Keep Navigation Simple
Think of website navigation like elevator buttons: people use it to get somewhere. It needs to be simple and positioned in a consistent place.
Tip #5: Avoid Jargon & Corporate Language
Most people use corporate jargon or vapid catchphrases about customer support when they try to write content for their website.
Don’t be those people.
Tip #6: Write Conversationally
Imagine you're having a coffee with a friend, and they ask you to explain your business. How would you talk? What words would you use? That’s how you should write on your website.
Good writing is conversational.
Tip #7: Add Testimonials
Testimonials build trust with customers. A good testimonial addresses fears and concerns in order to build trust.
Tip #8: Show, Don’t Tell
Whenever possible, show visitors— don’t tell them. Remember: visitors don’t read websites, they scan websites.
The best way to do that is with photography.
Try to avoid stock photography. Stock photography is usually corny when it’s trying to be a metaphor— for example, a handshake to signal customer service. Ugh. Studies have found that these types of photos are often ignored.
Tip #9: Make Your Contact Details Obvious
Don’t try to get clever here. Make your contact details super obvious.
Frequently Asked Questions
How can I create a website for free?
There are definitely free website builders— just be aware that many include an advertisement on your website.
How much does it cost to create a website?
Most DIY website builders start at around $144 / year. If you're looking to save some money check out the cheapest website builders. However, if you are thinking of hiring a professional, the average cost to build a website is around $3200.
What's the best website builder?
Does Google have a website builder?
Google has Google Sites though it's quite limited— there is only website layout for example.
How to build a website from scratch?
You can obviously code, but I recommend Wix and Webflow to build from scratch.
How long does it take to build a website?
Most DIY website builders have pre-made templates and an easy-to-use editor. Therefore, it takes only an hour or two to make a website.
Do I need technical knowledge to create a website?
Absolutely not! Website builders are a beginner-friendly way to build a website. Even I — someone who used to code his websites from scratch — build most of my websites (with DIY builders) without writing a single line of code.
Is WordPress free?
Yes, WordPress is free. You’ll need to pay for the domain, hosting, themes, and plugins that go on top of it, though.
Should I use Squarespace or WordPress?
For most conventional sites, Squarespace is simply easier and faster to use. I’ve discussed it in detail here.