Site Builder Report logo Menu
Take my Website Builder Quiz to find out which is right for you → X
Home Ask a Question

How To Make A Website

The complete guide to creating a website without ever touching code. Step by step, for beginners.

Last Updated October 16 2020

Steve Benjamins

Written By Steve Benjamins

I’m going to walk you step-by-step through creating a new website for my friend Nick.

Nick runs Sgt Nick’s Drums, a company selling handmade, decorative drums. Right now, Nick sells the drums on Etsy but I’m going to show you how I built Nick’s new website that looks like this:

A look at that final website we built for Nick.

My name is Steve Benjamins. My websites have been featured in Wired, The Next Web and Forbes. And in this guide for beginners I’m going to show you how to create a website, step by step.

Here’s my promise to you: if you just buckle down for the next 30 minutes— you’ll know more about building good websites than a lot of web designers.

I’ll cover all the secrets to the trade:

  • Where to find free stock photos that don’t suck.
  • How to make logos transparent.
  • The honest, no-BS truth about SEO.
  • How to put that little © in your footer
  • Setting up email on your own domain name.
  • Why your business might not need social media.
  • What to write and HOW to write it.
  • … And much, much more.

Read on to learn how to create great websites without ever touching code.

Note: My work is supported by affiliate commissions. Read more »

What I Believe

There are my three rules for great websites. I’ll refer back to them throughout the guide:

1. Choose a Goal

Your website isn’t an end in of itself. It needs to accomplish something for you. Sgt Nick’s Drums is an artisanal business— so my goal is to introduce customers to Nick, the real-life, artist making each drum by hand.

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. This is doubly true for an artisanal business like Sgt Nick’s Drums.

3. Less Is More

People don’t read websites, they scan websites. Distill everything down to the essentials. (Doubly important because website content needs to fit on mobile screens as well as desktop screens.)

What Tool We'll Use

You don’t need to code to build a website in 2019.

I’m a professional web developer and I don’t code small websites by hand anymore. It’s stupid. It’s overkill.

These days I just use Squarespace to build small websites. I use Squarespace for my Mom’s therapy business, my personal website and my band’s website.

We’re going to build Nick’s website with Squarespace— though the guide will still have plenty of helpful information if you’re using something else.

This is Squarespace. It's my tool of choice for small websites. It's like the Apple of website builders.

This is Squarespace. It's my tool of choice for small websites. It's like the Apple of website builders.

If you buy Squarespace through a link on this page I will earn a commission— though I’m not just recommending Squarespace because they pay me an affiliate commission.

In fact, other website builders have offered to pay me 4 times whatever Squarespace is paying me and I turn them down. I recommend Squarespace because I really sincerely believe it’s the best option for most people.

I’ve written dozens of articles explaining why I recommend Squarespace over competitors like Wix and Wordpress— but the short version is that Squarespace has beautiful templates that turn into beautiful websites. Plus it’s intuitive to use.

And hey, if that’s not enough— even Elon Musk uses Squarespace.

Page #1: My Story

Let’s build our first page: My Story. This page could also have been called About Us but I decided to name it My Story because I wanted it to feel intimate— Nick is selling a handmade product after all.

So navigate to ‘My Story’, hover over the body and click Edit:

Click 'Edit' to being editing 'My Story'.

Click 'Edit' to being editing 'My Story'.

Then let’s add a heading:

Create a heading by writing text and then setting it as 'Heading 1.'

Create a heading by writing text and then setting it as 'Heading 1.'

Next we’re going add a bio that I wrote for Nick. I’m going to arrange his bio into columns to give it a readable, newspaper-style feel:

You can snap text into columns by dragging and dropping.

You can snap text into columns by dragging and dropping.

When arranged in columns I felt the text was a little wide— so I added spacers on both sides:

I added spacers so the text wasn't quite so wide.

I added spacers so the text wasn't quite so wide.

How To Write For Websites

In order to write Nick’s story, I actually interviewed him. I did this because I wanted Nick to talk conversationally.

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.

Good website writing is conversational. 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.

That’s why when I set out to write Nick’s Story, I started by talking about a Christmas gift:

It started with a Christmas present.In 2017, my wife and I thought it would be cool to give her father a Sgt Peppers style decorative drum for Christmas.We looked around the Internet and were surprised that we couldn’t find any— which seemed liked a shame.So instead of buying I decided I would just make it myself.I started by re-creating…

Admittedly I’m a web designer— not a copywriter. So my writing might not blow you away but it should at least feel conversation.

One last tip: People don’t read websites, they scan websites. So don’t bombard them with walls of text. I tried to distill Nick’s story down to the essentials. Less is more.

Tip: Don’t Write About Yourself

Writing about yourself is a common mistake. Instead, write about your audience. What does your audience want? What do they care about? What problem are you solving for them? That’s what you should write about.

Admittedly I don’t do a great job of this with Sgt Nick’s Drums— in part because it’s an artisanal product and I wouldn’t to tell Nick’s story. So instead let me demonstrate with an example of a cleaning service.

Here’s an example of writing for yourself:

We are a professional house cleaning service based out of Toronto, ON. We serve the greater Toronto area and have the best rates in town. Our cleaners are professional and punctual. We offer the highest level of service to all our customers.

And here’s an example of how to write for an audience— this is much better:

Are you tired of cleaning your own home? Our greater Toronto area cleaning service specializes in helping busy professionals like yourself. We promise to get your house squeaky clean so you have more time to do the other things you need to do.

Adding A Hand-Written Signature

Because Nick makes hand-made drums I wanted to add a hand-written signature under his story. I thought it’d give it a human feel.

Here's how I added a signature beneath Nick's story.

Here's how I added a signature beneath Nick's story.

First I got Nick to write out his signature on a piece of paper with a marker:

Nick's signature.

Nick's signature.

Then I cropped the signature out of the image:

Cropped Nick's signature.

Cropped Nick's signature.

Finally I used Lunapic to cut out the background and create a transparent PNG:

Then I added it to the Squarespace website and put some spacers on each side to center it:

You can see I used spacers to position it correctly.

You can see I used spacers to position it correctly.

Testimonials

Testimonials build trust with customers. A good testimonial addresses fears and concerns in order to build trust.

Fortunately Nick has lots of great testimonials on his Etsy story. So I grabbed a few and edited them down:

I grabbed a few testimonials from Sgt Nick's Etsy page.

I grabbed a few testimonials from Sgt Nick's Etsy page.

Before adding the testimonials, I added a spacer and a line to create some distance between the signature and the testimonials:

Adding a spacer and a line.

Adding a spacer and a line.

Next I added a small heading (Heading 2):

Adding a heading.

Adding a heading.

Finally I added three quotes using the quote element and snapped them into columns:

The testimonials are using the Quote element.

The testimonials are using the Quote element.

Instagram Feed

The last thing I want to add to this page is an Instagram feed.

An Instagram feed may not be necessary for your website, but Nick has a great Instagram account I thought it could be a nice human touch.

So I added another spacer, line and a small Heading 2:

Then I went to Nick’s Instagram page and saved twelve photos I liked using GramSave— a free tool for saving Instagram photos. Then I added them as a grid photo gallery, with six photos per row:

Twelve of my favorite photos from Nick's Instagram.

Twelve of my favorite photos from Nick's Instagram.

Finally I added a button below the photo gallery so customers can follow Nick on Instagram:

And with that we completed all the content for the ‘My Story’ page! Next up we’re going to style the page to make it look nicer.

Here is what we have so far:

Website Style

Right now we’re just using the default style settings that Squarespace gives us. Which is okay but I’d like to give Nick’s site a unique look and feel.

So open your Site Styles (found under design).

Let’s start by customizing Heading 1. I’m going to change it to a font I like called Libra Baskerville. I’m also going make font size a bit smaller and remove the uppercasing:

Our new Heading 1 style

Our new Heading 1 style

Next up is body text— the most important design element on your website.

Right now our body text isn’t very readable. It’s too small and low-contrast. Designs should never require low-contrast text to work. Text is meant to be read, never sacrifice legibility!

So let’s increase the font-weight (boldness) to 400 and the font-size of the Body Text:

Increasing the body text weight and size.

Increasing the body text weight and size.

Next let’s change the Body Text color to #333333 which is a very dark grey but not quite a pure black (pure black tends to be a bit too intense):

#333333 is a dark shade of black— but not completely black.

#333333 is a dark shade of black— but not completely black.

Now let’s style our Heading 2:

New style for Heading 2

New style for Heading 2

Then we’ll style our Quote Block. We’ll start with the Quote Font:

Our Quote Font style.

Our Quote Font style.

Next let’s customize the Source Font:

Source font style.

Source font style.

And finally let’s change our button font to Proxima Nova to maintain consistency:

Making the button the same style as the rest.

Making the button the same style as the rest.

Now ‘My Story’ is looking a lot tidier!

How our page looks after styling.

How our page looks after styling.

Squarespace websites are responsive— which means they expand and contract based on the viewport size. Because of this, the website can get quite WIDE on a large screen. So I’m going to change design to Constrained Width so it doesn’t get too wide:

Set the design to Constained Width and the width to 1500px.

Set the design to Constained Width and the width to 1500px.

Finally, Squarespace websites often have a lot of padding. But we can get rid of some of that padding since we’ve made the navigation substantially bigger. So I’m going to take the header top padding from 30px to 15px:

Adjusting the top header padding.

Adjusting the top header padding.

… And then take the content section padding from 90px to 30px:

Adjusting the content section padding.

Adjusting the content section padding.

Styling Individual Elements

You might have noticed that Squarespace doesn’t allow you to style individual elements.

For example, Squarespace doesn’t let us change the font size of this particular instance of body text (below):

There's no option for increasing the font-size here— you have to do that in Site Styles.

There's no option for increasing the font-size here— you have to do that in Site Styles.

So why does Squarespace do this?

Well on one hand, this helps you maintain a consistent look and feel. You shouldn’t design pages to be their own separate entity— instead a website should have a consistent look and feel.

But there’s also an even deeper reason.

Websites are made of HTML. Text is not just text in HTML— text is always wrapped by a tag. Tags tell browsers and search engines what’s in a tag— for example a heading tag or a paragraph tag.

The H2 and P are examples of HTML tags.

The H2 and P are examples of HTML tags.

Tags are critical to websites and SEO. For example when Google crawls the web, they don’t just see big text and assume it’s a heading. Instead Google needs to see a heading tag to know it’s a heading. Squarespace doesn’t let you change font-size individually because they don’t want you to make headings by just increasing font-sizes— they want you to do it the right way.

Choosing Colors

Choosing colors can be one of the most intimidating tasks of design— I’ve been designing websites for over 15 years and I still don’t really understand how to match colors.

Because of that I lean heavily on preset palettes. For example, I use the Material Design Toolkit for any color I use on my website.

I use colors from the Material Design Toolkit for all my websites.

I use colors from the Material Design Toolkit for all my websites.

Don’t re-invent the wheel, if you’re not totally confident in your color decisions, just lean on a color guide like the Material Design Toolkit. (Another great resource: ColourLovers).

Note: Always think about contrast when choosing colors. Contrast is the foundation of graphic design. Thoughtful contrast makes designs interesting. The most basic form of contrast is between light and dark.

Design Tips

It took me several hours to get the design right for Nick’s website. And those hours were filled with lots of little tweaking. That’s what design often looks like: zooming in and zoom out while making lots of little tweaks.

If there’s one design tip I can give you, it’s this: iterate. A dramatic website re-design can be exciting but the real work is in refining and redesigning over time. Design is about evolution, not revolution.

The design of Site Builder Report has dramatically changed over time— but only by a serious of iterations.

The design of Site Builder Report has dramatically changed over time— but only by a serious of iterations.

Here are some more tips:

If a design isn’t working, try to fix the small, bothersome details— then pull out to assess the big picture. Those “small” details are often the solution to what feels like a “big” problem.

Avoid ornamentation. Don’t add elements to websites merely for the sake of visual appeal (underlining a heading, putting borders around pages etc). There should be purpose behind everything.

Make important elements obvious. Visitors can’t use something they can’t find. Critical elements should be consistent and obvious. Never make a visitor probe or search for important elements.

Kinfolk is an example of a website with beautiful typography.

Kinfolk is an example of a website with beautiful typography.

Websites should be scannable. People don’t read websites, they scan websites. Make your website scannable: highpght words, break up paragraphs and use lists when possible.

Paragraphs should be double spaced. Text needs room to breath.

Paragraphs should be between 40-70 characters per line. Don’t let them get too wide. You don’t want paragraphs to look like this:

Paragraphs on Wikipedia can get too wide!

Paragraphs on Wikipedia can get too wide!

Avoid system fonts. For a long time, websites could only use system fonts (for exammple: Times New Roman, Georgia, Arial and Comic Sans MS). Fortunately those days are over, and today you’re better off choosing a web-font.

Try not to choose too many web fonts. Web fonts are nice but they come with a performance cost— try not to use more than 2. With Squarespace you can use the ‘Font on Site’ to check where all the fonts your using are.

Find real people and watch them use your website. The best way to assess a design is to see it in context. Ask a friend to browse your website. Don’t step in to show them how to do things— instead watch what they do. You’ll learn a lot.

Photography

Websites are just text and images— that’s really it. So finding the right photography is critical. This is doubly important for ecommerce.

Whenever possible, show visitors— don’t tell them. Remember: visitors don’t read websites, they scan websites.

Try to avoid corny 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.

Avoid lame stock photography.

Avoid lame stock photography.

Since Nick sells products over the internet I knew photography was going to be critical— so I did something drastic. I bought a $100 photo studio box on Amazon:

The photo box I bought off of Amazon

The photo box I bought off of Amazon

It was the best decision I made.

The photo box made it easy to get white-backdrop, full-lit product shots:

The product shots I got using the photo box.

The product shots I got using the photo box.

I used my DSLR camera but you could EASILY get a good shot with modern smartphones.

This crappy, grainy photo is me using the photo box.

This crappy, grainy photo is me using the photo box.

I did do basic editing of the photos but if you don’t know how to edit your photos there are on-demand services like Pixelz who do photo editing for as cheap as $1 / image.

Where To Find Free Stock Photos

If you need stock photos you’re in luck— the web is full of excellent free stock photos. Here’s the three places I search:

Page #2: Shop Drums

Now that we have some excellent product photography, it’s going to be really easy to make a ‘Shop Drums’ page.

Navigate to ‘Shop Drums’ and add a Heading 1 and a Heading 2. If you’re wondering how I got the little arrow after ‘Get a quote’, hang tight— I’ll get to it shortly.

Nick also makes custom drums— so I linked to the Contact page here.

Nick also makes custom drums— so I linked to the Contact page here.

It’s going to be much easier to to create our ‘Shop Drums’ page since we already have some nice product photos. There’s no reason to over-design a page— if you can make it simple, make it simple!

So I uploaded 2 product photos, added a Heading 2 and a link to Etsy (where Nick’s customers can fufill their order):

Then I replicated this for a few more products— and we have our page!

Our 'Shop Drums' page.

Our 'Shop Drums' page.

I also added a button link to the Etsy store at the bottom of the page!

Unicode Icons

You might have noticed I used two icons within the text of ‘Our Drums’. I used a middle dot (·) and a double arrow (»).

These are Unicode Characters and you can copy and paste them into the text of any website— including Squarespace. You don’t need to add them as an image or anything.

You can go to TopTal to browse hundreds of unicode icons.

FYI: Unicode characters work in most modern browsers but users with old browsers may not be able to see them— so only use them if the meaning is clear without the unicode chacter.

Page #3: Homepage

Next up let’s make our Homepage. The key with this homepage is to make your website purpose clear. You want to visitors to understand what this website is about.

So I made a very clear Heading 1 to start the page. I favour clarity over cleverness— I could have made this headline something like “March To The Beat Of Your Own Drum” or something but I’d rather be clear then clever.

Heads up! In order to get the text to be full width, I needed to add spacers on either side. It's a bit of a 'hack'!

Heads up! In order to get the text to be full width, I needed to add spacers on either side. It's a bit of a 'hack'!

Next I added a photo of three drums side-by-side:

Adding an image

Adding an image

Then I snapped two buttons into columns and changed their alignment to be left and right to create a centering effect:

Adding Buttons

Adding Buttons

And from there I felt good about the homepage. It’s communicates the purpose of the site effectively and moves visitors on to the next step quickly— either learn our story our shop drums!

Be Human

This homepage took my a while to design— which seems surprising because it’s so simple.

The final homepage.

The final homepage.

It took me so long because I kept trying to find a way to put Nick on the homepage. I believe websites should always be human. That’s my only regret. Websites can’t be perfect! Better to launch then seek perfection!

Page #4: Contact

Contact pages are workhorses— they’re a small but critical part of lead generation.

Visitors often come to this page to find information so make sure your contact page includes the following if necessary:

  • Hours of Operation
  • Holiday Hours
  • Directions
  • Map
  • Address
  • Phone Number
  • Email
  • Contact Form

Since the ‘Contact’ page is responsible for lead generation— it should be site-wide and obvious. Never make a visitor probe or search for it by hiding it in the footer.

So let’s start by adding two headings. I added a heart emoji for a bit of playfulness (Mac users can always bring up the emoji keyboard by pressing CTRL + CMD + SPACE).

The emoji adds a little playfulness.

The emoji adds a little playfulness.

Next, let’s add a contact form.

Adding a form.

Adding a form.

Make sure that the form is sending submissions to the right email address. Squarespace doesn’t store submissions to this form— so you’ll want to connect it to Google Drive so that all form submissions are saved.

Make sure this is the right email address.

Make sure this is the right email address.

It also doesn’t hurt to edit the post-submit message and the submit button label to give a more personal touch:

This gives a more personal touch.

This gives a more personal touch.

Now Nick has decided he’d rather not include his address or phone number here— so instead I’m going to add a photo of him. Again, we just want to keep putting him front and center to show that there is a real-life human underneath this business.

A photo adds another human touch.

A photo adds another human touch.

And just like that we have a nice ‘Contact’ page:

The full contact page.

The full contact page.

Mobile

Studies have shown that visitors are five times more likely to leave a site if it isn’t mobile-friendly— so it’s critical that websites be mobile-friendly.

It can be tempting to forget about mobile because we design websites on desktop computers and laptops— but that’s a mistake. It’s critical for websites to be mobile friendly.

The best way to make a website mobile friendly is with a responsive theme. A responsive theme shrinks or expands to the device size:

Responsive themes are not the only way to create a mobile-friendly website but it is the recommended way.

Responsive themes are not the only way to create a mobile-friendly website but it is the recommended way.

Fortunately all Squarespace templates are responsive. So it’s all mobile friendly out of the box— but we just need to make one style adjustments.

Start by clicking this mobile button to change the website preview to Squarespace:

Let’s change the mobile menu to be Top Right:

Changing the menu to Top Right.

Changing the menu to Top Right.

SEO & Favicon

Search Engine Optimization (or SEO) is optimizing websites to rank in search engines like Google for specific keywords.

There’s a few optimizations in Squarespace that we’ll want to make sure we’ve covered.

For starters, we want to be able to adjust the title of our pages. The title is what shows on search engine result pages:

The title of your page is what shows on search engine results.

The title of your page is what shows on search engine results.

So in Squarespace navigate MarketingSEO and we’re going to change the SEO Title Format:

We're going to change this.

We're going to change this.

If the SEO Title Format intimidates you, you can skip this step. It’s honestly not going to make-or-break your SEO, but it is a nice to have.

Basically there are three types of pages: Home, Pages and Items. Home is your homepage, pages are pages and items are for ecommerce.

Titles are automatically generated with %s (the title of your Squarespace website— set in DesignSite Styles), %p (the title the page) and %i (the title of the item).

For Nick, I actually want to write my own title tags for each page— so I changed both Home and Pages to %p:

I changed this for the homepage too.

I changed this for the homepage too.

Now we can navigate to pages and write custom titles for each page. Ideally a title a descriptive and possibly includes an important keyword for the page. So for example, here’s what I wrote for the homepage:

I'm able to include an important keyword 'decorative drums' and mention Nick's company.

I'm able to include an important keyword 'decorative drums' and mention Nick's company.

Important: Don’t Keyword Stuff — Don’t try to shoehorn a bunch of keywords here. It should make sense and be readable to human beings. Keyword stuffing is an outdated SEO tactic that can be dangerous.

SEO Shortcuts— There Are None

Setting a custom page title is really just the start. SEO is a whole discipline unto itself.

I’ve had a lot of success with SEO. For example, my website, Site Builder Report is ranked number one if you search best website builders in Google— beating companies like GoDaddy and Wix.

So how did I do it? Well here’s my best advice: avoid shortcuts. The way to rank in Google is simple— but hard.

I boil SEO down to a few key ingredients:

  1. Keywords — Keywords are the search terms your target audience is searching. We want to rank for those.
  2. Content That Stands Out — Google wants to reward the best content, so go overboard creating outstanding content. This guide that you’re currently reading is over 6,5000 words. It took me weeks to write— but it’s also going for a highly competitive keyword (how to make your own website) so it needs to be outstanding.
  3. Links — Having other websites naturally linking to your website is critical for SEO. Don’t try to manipulate this. Google is good at weeding out unnatural links.

Are telemarketers promising you the #1 spot on Google? They’re lying. What they mean is they’ll buy Google Ads to promote your website. No one can gurantee you the #1 spot on Google. It’s nonsense.

I’d recommend these 4 resources if you’d like to learn more about SEO:

Hiring SEO Consultants — Avoid anyone who promises SEO results or speaks with authoritative certainty. The two best SEO consultants I’ve hired (Evolving SEO and Siege Media) didn’t hard sell me. Instead, they spoke candidly and honestly about expectations.

Local SEO

Local SEO is SEO done for searches with local intent. You’re probably seen these types of searches in your own Googling:

Local 3-Packs are the most common local result:

A local 3-pack result.

A local 3-pack result.

Knowledge cards show when people search for specific businesses:

A knowledge card result.

A knowledge card result.

Google Maps is also considererd Local SEO:

Ranking in Google Maps is part of local SEO.

Ranking in Google Maps is part of local SEO.

So how can you rank in these local SEO results? Here are three best practices:

1. Google My Business Listing

Your Google My Business listing appears in Google Search (in the knowledge panel) and in Google Maps. You’ll definitely want to make sure have control over this listing.

2. NAP

NAP stands for name, address and phone. These three details are the signature that Google uses to follow your business across the web. The more “local citations” you have with this information, the better.

You’ll want to keep you NAP as consistent as possible— inconsistent NAP can confusing to Google— so make sure your business is properly listed on the main review platforms such as TripAdvisor, Yelp, and Facebook.

3. SEO

Regular old website SEO also effects your local business listing— so you’ll want to make sure you’re hitting on the fundamentals of SEO: links, anchor text, linking domain authority and more. See my chapter on SEO for more info.

I am not an experrt in Local SEO. So don’t take my word for it— if you’d like to learn more, I’d suggest these resources:

Favicon

Your favicon is the small icon for your website that appears in your browser window:

These are website favicons.

These are website favicons.

To add a favicon in Squarespace, navigate to DesignLogo & Title and upload on browser favicon:

Favicon's are a perfect Square— fortunately Nick's logo works nicely here!

Favicon's are a perfect Square— fortunately Nick's logo works nicely here!

Written By Steve Benjamins

I’ve been building websites for over 20 years and websites have been featured in Wired, The Next Web, Smashing Magazine, The Huffington Post and Forbes. Read More →