Websites For Dummies: How To Make A 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:

1. Using a website builder like Wix or Squarespace
2. Using a CMS like Wordpress
3. Coding from scratch with tools like Jekyll or Gatsby.

These days I typically choose a website builder if I’m building a smaller website— for example I used Squarespace for my music or for a business.

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.

I use Namecheap and Squarespace to register my domain names.

4. Create a plan (optional)

It can be helpful to plan out the structure for your website.

Do not overcomplicate it ⁠— you can use a tool like Gloomaps or XMind to plan it visually.

Here’s an example:

Rough structure of SBR

These days I typically choose a website builder if I’m building a smaller website— for example I used Squarespace for my music or for a business.

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 after comprehensive website builder reviews of 30+ platforms:

• 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:

Choosing a Squarespace template.

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:

Choose the 'Paloma' template.

Sign Up

Next up, we’ll sign up for Squarespace’s free trial— there’s no credit card required at this point.

Signing up with Squarespace.

Signing up with Squarespace.

After completing signup, we’re in Squarespace! Nice!

Welcome to Squarespace!

Step 2: Creating Pages

We’ll begin by adding some pages. So click Pages:

Welcome to Squarespace!

Delete Demo Pages

Squarespace gives you some demo pages to start off— but we’re just going to delete those.

Delete the pages marked as "DEMO" pages.

Add Pages

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:

Click edit to open the website 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:

Adding my logo!

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:

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:

Our customized header.

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:

Click the paint brush icon to open Site Styles.

Then choose Fonts:

Select fonts in Site Styles.

The Global Text Styles let us select the fonts that we want to use across our entire website:

Global text styles.

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:

Click the paint brush icon to open Site Styles.

Then choose Colors:

And click Edit Palette:

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:

The Accent Color is the most prominent of the colors.

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:

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:

Setting Overlay Opacity.

Editing Text

To edit the text in Squarespace, you can just click it and the text editor will pop up:

Editing this text.

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:

I put a video on my homepage.

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:

Wide section.

And here’s a Medium section:

Medium section.

Create Sections From Scratch

Let’s create the Contact page next. So navigate to the Contact page click Add Section:

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…

Choosing from the pre-built contact pages.

…. And now we have our Contact page!

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:

Click the 'Edit Section'

Then click the Colors tab and choose a darker color:

Customizing the color of the section to match the rest of the website.

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.

Navigate to the blog.

And let’s add a Headline section:

Click 'Add Section' to add a headline to the blog.

There, that looks good:

Adding a headline to the blog

Customizing The Blog Layout

Now I want to change the layout of the blog— which we can do by clicking Edit Section:

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:

These blog customizations are a personal preference!

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:

Open the Blog Editor.

From there, simply click the post you want to edit:

Blog editor.

Happy blogging!

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:

Editing the footer of the website.

To begin, let’s remove everything in the footer:

Delete everything currently in the footer.

Then I’m going to add this pre-built section Squarespace provides:

I liked the look of this section.

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:

Here is the final footer!

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:

Our website is looking good— now it's time to add a domain name!

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:

Choosing the Personal 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:

Click this box to claim your free domain name.

Then click Get Domain:

Click 'Get Domain'

From here, we can search for our free domain name! I’m going to go with this one:

This is the domain name I chose.

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:

Click 'Site Availability'

Then set the site to Public:

Set your website to Public in site availability.

And from there our website is live on our domain name!

Our website is live!

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.

CMS vs. Website Builder

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:

1. Register a domain name.
2. Pick a hosting plan that supports the CMS.
3. Point your domain to the hosting plan. (You’ll need to learn about DNS and Nameservers)
4. Install the preferred CMS. (Again, might need technical knowledge)
5. 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.
6. Set up CMS (add plugins, create users, set up security, etc.).
7. 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.

Changing DNS

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:

1. 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.
2. 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.

Softaculous WordPress installer

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.

WordPress themes - I installed Generatepress

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.

Adding plugins on WordPress

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.

Start adding pages and posts you need.

This is always an option— though this can have a big learning curve.

To build the most basic website by coding, you’ll need to learn HTML, CSS, and JavaScript. I recommend Freecodecamp, Codecademy, and Team Treehouse to learn web development step by step for free. However, it’s only recommended if you aspire to become a web developer or a web designer.

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.

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.

Instead…

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.

These are GREAT testimonials.

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.