How I Made My Own Website

Introduction

So, you want to build your own website.

Maybe you open your laptop, hit Google, and type “how to make a website.” Five minutes later, you’re drowning in tech jargon—HTML, CSS, domain names, SSL, JavaScript frameworks. WordPress. Wix. It’s overwhelming, right?

But don’t worry, we’re skipping the chaos.

Here’s the truth: anyone can make their own website—even total beginners. And that’s exactly what we’re doing in this article.

We’re taking this simple sketch I drew and turning it into a fully functional website on a real domain name.

We’re covering everything: design, domains, SEO—no shortcuts, no confusion. And the best part? It’s not going to be stressful. It’ll be clear, straightforward, and maybe even fun.

Ready? Let’s do this!

What We're Building

I want to create a website for my YouTube channel, Steve Builds Websites.

If you check out my sketch, it’s a simple, clean design: a logo, a few pages, and a basic homepage.

It’s the kind of website that works perfectly for a small business or personal brand—straightforward, practical, and effective.

Choose a Tool

Our first task is to choose a tool.

There are hundreds of tools available for building websites, but to keep things simple, we can group them into four categories: frameworks, static site generators, CMS, and website builders:

Almost every website on the internet uses a tool from one of these categories.

If you don’t know how to code, you can skip frameworks and static site generators. Both require coding skills. A CMS like WordPress might involve some coding but usually less, while website builders require no coding at all.

On a spectrum of difficulty, frameworks and static site generators are the most challenging, while website builders are the easiest to use:

I’ve built websites using tools from all four categories, and here’s what I’ve learned: match the website to the tool.

For example, if you’re building something complex like Facebook, you’d want to use a framework:

But if you’re creating something simpler, like a personal or small business website—which is what we’re doing today—a website builder is the best choice.

You could also use a CMS like WordPress, especially with a plugin like Elementor, but in my experience, it’s not as straightforward. Website builders are simple, easy to manage, and perfect for a project like this.

Website Builders

We're going to use a website builder for our project — and there are plenty of website builders to choose from.

Here are some of the most popular ones:

In my experience, though, a few stand out as significantly better than the rest: Squarespace, Wix, Shopify, Webflow, Framer and Carrd.

But here's the thing: of these website builders has its own strengths. Remember when I said, "match the tool to the project"? That principle applies to website builders as well.

So here’s a quick overview of each website builder:

Squarespace and Wix

These are the best all-around website builders. They both use drag-and-drop editors, allowing you to easily move elements around your website, resize them, and reposition things exactly how you want.

Squarespace and Wix are versatile tools used for building all kinds of sites, from small business websites to portfolios, blogs, and more. Personally, I prefer Squarespace over Wix, but Wix is still a great option and deserves a mention.

Shopify

Shopify is hands-down the best option for ecommerce. If you're building a proper online store with multiple products, variations, and a streamlined checkout process, Shopify is your best bet.

It’s not as easy to use as Squarespace or Wix because it’s not a drag-and-drop editor, but its features for ecommerce are outstanding.

Carrd

Carrd is an interesting choice because it’s by far the most affordable option—but there’s a catch. Carrd is specifically designed for one-page websites.

You’ll often see Carrd used for personal websites, landing pages, or simple portfolios. If your website can be condensed into a single page, it’s worth considering.

Webflow and Framer

Webflow and Framer are the best tools for completely custom designs. With these platforms, you can build virtually any design you can imagine, complete with sophisticated animations. For example, I’ve seen people recreate Apple’s website in Webflow—it’s that powerful.

The trade-off? Both Webflow and Framer have a steep learning curve. Even if you have a web design background, expect to spend several days (or even weeks) getting comfortable with them. Framer is a bit easier to learn than Webflow, but both provide unparalleled design freedom.

Let's Choose a Website Builder

Now let’s match my project— a website for my YouTube channel — with the right tool.

• Shopify is out because I don’t need ecommerce.
• Carrd is out because I want multiple pages.
• Webflow and Framer are out because I don’t want to invest too much time learning a new platform.

That leaves Squarespace and Wix. And for this project, I’m going with Squarespace because, as I mentioned, I prefer it over Wix.

That said, you don’t have to use Squarespace. The key takeaway is to match your website project to the right tool.

With that, we’ve completed our first major goal: choosing the right tool. Squarespace is our platform of choice, and now it’s time to get to work. Let’s build our website!

Note: Many links in this article are affiliate links. Clicking them helps support my work, but rest assured, this is not a sponsored article. I currently have websites on Squarespace, Shopify, Webflow, and Carrd, and I trust these tools for my own projects.

Pages & Header

The first step is to sign up for Squarespace.

Once you're in, you’ll have the option to create a website using one of their templates or start from scratch with a Blank Template.

Choosing a Template

Squarespace offers a wide range of templates to get you started, many of which are stunning and professionally designed.

However, for this tutorial, we’re going to build a site from scratch using a Blank Template. Don’t worry—it’s more straightforward than it sounds!

To get started, click “Create Website” and choose “Blank Template”:

This will take you directly into the website editor:

Step 2: Adding Pages

Start by clicking Pages in the menu, and add five blank pages.

Once added, you’ll see these pages listed in the site’s navigation:

Step 3: Designing the Header

Next, we’ll customize the site header. Click Edit, then choose Edit Site Header.

Step 4: Adding and Designing a Button

To add a button, click on Add Elements. Squarespace offers several options, but we’ll keep it simple and add a button to our header.

Step 4: Choosing a Layout

Once the button is added, let’s adjust its design. Click on Edit Design, and choose the layout that works best for your website. After a few tweaks, we now have a clean, functional header with a button that stands out.

What Makes a Good Website Header?

You might have noticed that website headers tend to follow a consistent structure across the internet. Whether it’s Apple, Charity Water, or the cafe down the street, the layout is often the same:

• Logo on the left
• Navigation in the center
• Button(s) on the right

This consistency isn’t random—it’s deliberate. A familiar header layout ensures visitors intuitively know how to navigate your site, even if it’s their first time. Think of it like elevator buttons: they’re always in the same place, so you don’t have to hunt for them. The same principle applies to your website header.

The Importance of the Call-to-Action (CTA)

Let’s talk about the button in your header. This button is often referred to as a Call-to-Action (CTA), and it’s one of the most important elements of your website.

Your CTA should serve your website’s primary goal. Here are a few examples:

For a salon: “Book an Appointment”

For a landscaper: “Get a Quote”

For a restaurant: “Make a Reservation”

Your CTA should clearly communicate the most important action you want visitors to take.

Deciding on My CTA

For my site, Steve Builds Websites, I thought hard about the purpose of my button. With Squarespace, there are plenty of options:

• I could use Squarespace's appointment scheduling feature to let people “Schedule a Call” for personalized help.
• I could create and sell a course, with a button like “Buy My Course.”

While these are great ideas, they don’t align with my current focus. Scheduling calls sounds like a lot of work, and I feel the world already has enough online courses.

Instead, I decided to keep it simple. My primary goal for Steve Builds Websites is to drive people to my YouTube channel. So my button will say: “Watch on YouTube.”

Previewing Our Progress

With our pages added and the header designed, let’s preview the site so far.

We’ve laid a strong foundation:

• A clean, intuitive header
• A clear Call-to-Action
• A simple navigation menu

From here, we can continue building and refining the site, step by step. Next we'll create our homepage!

Create a Homepage

Before diving into creating our homepage, let’s look at a few examples of great homepages to spark some inspiration.

1. Apristin Clean

What I Like:

• A big, friendly photo that immediately draws you in.
• The ferns! They remind me of the kind of small, classy awards you see on film posters. It’s a subtle but effective detail.

2. Lizzie Markson

What I Like:

• Fun, playful colors that grab your attention.
• Lizzie has beautifully summarized her work in just five words: Find the joy and magnify it. This is a masterclass in being concise on your homepage.

3. Kelsey O’Halloran

What I Like:

• Kelsey puts herself front and center, making her brand personal and relatable.
• Her slogan is excellent: Let’s turn your website visitors into dream clients. Notice how she focuses on you instead of herself? It’s audience-first writing at its best.

Key Takeaways for a Great Homepage

From these examples, a few themes stand out:

• Be Human: Don’t hide behind stock images or stale corporate visuals. Show your personality—people connect with humans, not faceless corporations.
• Be Concise: Avoid walls of text. People don’t read websites—they browse them. Make your content scannable and easy to digest.
• Be Audience-Focused: Write for your visitors, not about yourself. If your text is filled with “I” or “we,” it might be time to revise. Make your messaging about their needs and desires.

Step 1: Add a Background Image

Theories are easy to talk about but harder to implement. Now, let’s build my homepage using these principles!

To start, we’ll give this section a background image. Like the examples we reviewed, I want to be human and relatable. So, I’ll place a photo of myself front and center.

Step 2: Add a Headline

Next, we’ll add a text block for a headline. My slogan will be:

I try every website builder so you don’t have to.

We’ll make it a heading and use Squarespace’s Scale Text feature to ensure it perfectly fits the space.

Step 3: Add Testimonials

A homepage can benefit from an element that builds trust, so let’s add testimonials.

I’ve got tons of YouTube comments that are essentially testimonials, so I’ll use those. For the design, I’ll borrow the fern motif we saw on Apristin Clean’s homepage—it’s subtle and adds a nice touch.

The testimonials themselves are simple: just two images and some accompanying text. Nothing overly fancy, but it gets the job done.

I have a confession to make...

That seemed easy, didn’t it?

…or was it?

Here’s the truth: it took me 10 attempts to settle on this homepage design!

The Reality of Web Design: Iteration

Web design isn’t about getting it perfect on the first try. It’s a process of trying different approaches, refining your ideas, and seeing what works.

One major breakthrough for me was realizing my photos weren’t working. Initially, I used photos from my YouTube thumbnails, but they didn’t feel right. Eventually, I decided to take a fresh photo specifically for the website.

Yes, I did a mini photoshoot in my basement, and it made a huge difference!

Tips for Better Photos

If you don’t have cameras or lighting equipment, don’t worry. Here are some alternatives:

• Hire a photographer for a quick session.
• Watch a few YouTube tutorials on shooting self-portraits with your phone. Today’s smartphones have incredible cameras, and with the right tips, you can take professional-looking photos yourself.

The Homepage Is Done

With the new photo in place, everything else came together seamlessly. I’m happy to say that our homepage is now complete, and I can declare it done with a clear conscience.

Let’s move on to the next step!

Let's Style the Website

Styling Our Website: Colors and Fonts

Next, let’s style our website by choosing fresh colors and fonts.

But before we jump in, let’s talk about malls for a moment.

The Mall Analogy

Think about a shopping mall. Most of the stores have the same basic shape—long rectangles.

What makes each store stand out is its entrance.

There’s a reason Apple stores are tidy and minimalist…

…while Toys “R” Us is loud and colorful.

The entrance reflects the store’s personality and appeals to the target audience.

The Same Principle Applies to Websites

Websites, like stores, communicate a vibe and tone through colors, fonts, and photography.

Building an art portfolio? You might aim for a minimalist style with lots of white space and room for large photos.

Building a food website? You might opt for something colorful, bright, and playful, perhaps using bold fonts.

Deciding on My Website’s Style

For my website, I want a playful vibe. Something that feels approachable and fun.

Fortunately, Squarespace makes this easy. If you open Site Styles, you’ll find several Themes to choose from, including a playful one that I really like:

Updating the Color Palette

I like this theme, but I want to tweak it to make it my own.

Squarespace palettes typically include:

• Two light colors
• One accent color
• Two dark colors

Here’s what I’m going for:

• The lightest shade: a soft green (a pure white can sometimes feel too harsh).
• The second light shade: a gentle mint green.
• The accent color: a playful, vibrant green.
• The first dark shade: a deep blue (I’ll leave this as is).
• The darkest shade: solid black.

Adding Splashes of Color

Now, let’s apply these colors to the homepage:

• For the button, I’ll use the accent color for the background and black for the text.
• For the heading, Squarespace has a fun feature to underline text. I’ll add an underline using the playful green accent color.

The Final Look

Nice! The website is already starting to feel more playful and fun.

Aaaand… boom! I think we’ve nailed the style!

Creating Our Next Page

Sometimes, it’s hard to figure out what pages your website needs. The key is to be thoughtful—create pages that genuinely help your audience.

For example, my mom is a therapist, and her website includes a page called “What You Can Expect,” where she explains what a typical therapy session is like.

I love this idea. For someone who’s never been to therapy, it can feel intimidating. This page helps ease their concerns and prepares them for the experience.

My mom is doing something important: she’s putting herself in her clients’ shoes. She’s answering their questions and addressing their concerns before they even step into her office.

My Promise Page

On my website, the first page I want to create is called “My Promise.”

Why?

I’m a YouTuber who reviews tools for building websites, and I imagine one question my audience might have is: “Can I trust this guy?”

This page is where I’ll make specific promises about what viewers can expect from my videos.

Building the Page

Here’s how I’m designing it:

• Start with a clear heading.
• List my promises. I’m avoiding vague statements like “You can trust me.” Instead, I’m making specific commitments and letting people decide for themselves.

To give the page more structure:

• I’ll underline the heading.
• Add lines to separate sections for better readability.

The Power of Specific Commitments

Good writing is all about being specific. Let me illustrate this with an example of what not to do.

My bank, TD Canada Trust, has a slogan: “Banking can be this comfortable,” often paired with an image of a chair that doesn’t even look that comfortable.

Here’s the problem: In Canada, banks are notoriously unpleasant to deal with. TD is making a vague promise but offers no concrete commitments to back it up.

Now imagine if their ad said something like: “No hold times longer than 10 minutes.” Boom! That’s a specific promise. That would catch my attention.

When creating your own pages, avoid vague statements like:

• “We pride ourselves on customer service.”
• “We’re committed to quality.”
• “Customers are core to our mission.”

These phrases are overused and meaningless. Instead, get specific—make promises your audience can believe.

Adding More Personality

Below the promises, I’ll include a bit of biographical information. It feels important to share a little about myself somewhere on the site.

I’ll add a photo too, and use Squarespace’s shape tool to make it visually interesting.

Writing Tip: Keep It Conversational

I’ll be honest: I find copywriting challenging. But my best advice is to write like you’re chatting with a friend over coffee.

Avoid being overly formal—good writing feels natural and conversational.

And don’t forget, tools like ChatGPT or Squarespace’s built-in AI can be super helpful for brainstorming ideas or getting started.

Adding a Unique Touch

The page still feels a little bland, so here’s my idea: I’ll add animated art to the background using Squarespace’s tools.

Sure, this might sacrifice some readability—the text can become harder to read—but I think it’s a tradeoff worth making because it adds personality and visual interest.

Ultimately, it’s your call for your website. For me, the animated background just makes the page pop.

The Other Pages

We still have three more pages to build, so let’s go through them quickly:

Popular Videos: This page is a simple gallery showcasing my most popular videos.

FAQ: Here, I’ve answered the most common questions my audience asks. It’s a helpful resource to save everyone time.

Contact: A straightforward contact page with a form for visitors to get in touch.

And just like that, the entire website is complete!

Don’t Forget About Mobile

Now, we’re missing something SUPER important: mobile optimization.

Sure, the site looks great on desktop, but how does it perform on phones?

Well Squarespace has a mobile editor where we can preview. And it looks good on mobile!

Publish to a Domain Name

The next step is to publish our site on a custom domain name.

After that, we can dive into SEO and marketing—because even the best website won’t help if no one visits it!

Setting Up a Domain

Domain names might sound intimidating, but Squarespace makes the process incredibly easy.

One important thing to know: if you register your domain with Squarespace, you can always transfer it to a different provider later. No website builder can "hold your domain hostage"—that’s not legal!

Here’s how to set it up:

• Go to Site Settings and select Domains and Email.
• Luckily for me, stevebuildswebsites.com is available. Perfect!

Keep in mind, domain names do cost money, but it’s worth it to have a professional web address.

Upgrading to a Paid Plan

To finalize everything, we’ll need to upgrade to a Squarespace paid plan. I’ll select the plan that works best for me, and that’s it—we’re done!

The Big Moment

Our website is live on its very own domain!

You can visit it right now at SteveBuildsWebsites.com. Seriously, it’s there—go check it out!

We did it! 🎉

SEO & Marketing

Now comes the fun part—SEO and marketing!

Because no matter how great your website is, it’s useless if no one visits it.

What Is SEO?

SEO, or Search Engine Optimization, is a term that gets thrown around a lot. At its core, it means optimizing your website to show up in search engine results.

Let’s break it down with an example.

SEO in Action: Common Goods Pottery

Imagine you run Common Goods Pottery, a real business in Toronto that sells ceramics and offers pottery classes.

Brainstorm Keywords

To get started with SEO, you’d think about the keywords you want to target.

A keyword is simply any word or phrase that people type into a search engine.

For example, potential customers might search for: “pottery classes in Toronto.”

Wouldn’t it be helpful to know how often people are searching for that? Good news—you can!

There are tools that provide keyword volume, which is an estimate of how many people search for a particular keyword each month.

Using Keyword Tools

I use a tool called SEMRush to check keyword volume. Let’s test it out:

• “pottery classes in Toronto” gets 3,600 searches per month. That’s fantastic!

Let’s brainstorm a bit more:

• They sell ceramics, so what about “ceramic mug”? Definitely a popular search.

But here’s the catch: if you check Google, you’ll notice a lot of big competitors like Amazon and Pottery Barn targeting “ceramic mug.” That makes it very competitive.

Refining Keywords

To avoid high competition, you can add modifiers to your keywords:

• Instead of “ceramic mug,” try “handmade ceramic mug.” This is less competitive, and it still gets good traffic.

Or, take a different angle entirely:

• Try a keyword like “housewarming gifts.” This gets plenty of searches too, and it’s a great opportunity to write a blog post with housewarming gift ideas featuring your ceramic mugs.

The Core of SEO

At its heart, SEO is about finding keywords with good search volume that aren’t overly competitive.

If you’re curious about SEMRush, I think it’s a fantastic tool but can be pricey (starting at $140/month). If that’s out of budget, there are more affordable options if you do some research.

Ranking in Google

Now that we have our keywords, how do we rank for them?

This is where SEO gets more complex. Many factors affect your ranking—far more than we can cover in this video. But here’s a quick overview:

• Page Titles: Every page has a title (not just the headline), which appears in the browser tab and Google Search results. Your title should include the keyword and be enticing enough to make people click.
• Page Content: Your page content should support your keywords. I often use a tool like Clearscope to analyze my content and suggest keywords or topics to include.
• Google Ads: If ranking organically feels overwhelming, consider Google Ads. This allows you to pay for ad placement at the top of search results for specific keywords.

Google Ads can be incredibly effective for small businesses. I’ve used it to help my brother’s concrete company and my mom’s therapy practice, and both saw great results.

Closing Thoughts

I want to leave you with this: a great website isn’t about technology.

It’s not about mastering HTML or CSS. It’s not about choosing the “perfect” platform—whether it’s WordPress, Squarespace, or Wix.

A great website is about being human. It’s about putting yourself out there and connecting with your audience.

Use colors, fonts, and design elements to create a vibe that resonates, just like the best stores in a mall do with their entrances.

You don’t have to be a perfectionist—just keep iterating until your website feels right to you.

Write conversationally, like you’re talking to a friend. Drop the corporate jargon and make your content approachable.

Be concise. Avoid walls of text. People don’t read the web—they scan it.

And most importantly, don’t make your website all about you. Step into your visitors’ shoes. Understand their needs, their questions, and their goals—and provide solutions.

Even if you don’t consider yourself a “technical” person, don’t worry. That’s not the most important part.

Follow these principles, and you can create a website that truly stands out.

Thanks for reading, and good luck with your website journey!