How to Build a Website From Scratch: Your Step-By-Step Guide

As a marketing consultant, my favorite projects to work on are those where I get to build websites from scratch. From the layout and content to the copy and conversions, I love being able to help a creative and effective website come to life.

I understand if building a site from the ground up is a daunting prospect, even with a nice user-friendly website builder. There are lots of moving parts to think about, and it’s easy to get stuck at different steps if you haven’t thought them out beforehand.

So, I’m here to give you a step-by-step guide so you don’t end up unpicking your newly-minted website design or make a mistake that can cost precious time and resources. Let’s dig into it!

Starting from the ground up with a website is like any project. You need to know what you’re doing, the outcomes you expect, and a timeline for when you need to get each piece done. Follow along with the steps here, and you’ll have a logical, clear pathway to getting your site up and running.

HubSpot's Free Website Builder

Create and customize your own business website with an easy drag-and-drop website builder.

• Build a website without any coding skills.
• Pre-built themes and templates.
• Built-in marketing tools and features.
• And more!

Get Started for Free

1. Focus on the purpose of your website.

The purpose of your website for visitors and the action you want them to take when they land on it should inform everything you decide about building your new site.

I work with clients in a lot of different industries. Professional services want their website to establish trust, explain their services, and build thought leadership. Software companies want to showcase their product’s value and generate new free trial users.

Local businesses might want online orders or to drive more footfall. A freelancer in creative services needs a portfolio to showcase their work and build their social media presence.

I always take the end goal(s) of the website and make all my decisions from there. So if you’re unsure of where to start, start with defining the purpose and goal of your site.

Pro tip: One of the reasons I like working with website builders like Wix or the CMS in HubSpot to create a site is the themed templates they provide based on use cases like those I’ve outlined above (but more on that later).

2. Scope your target audiences and define personas.

Fully defining the purpose of your site means understanding your target audience in as much depth as possible.

Your target audiences are the general demographics and interests of your target website visitors. Audience personas, on the other hand, are living, breathing characters that embody the typical members of a target audience.

I usually name them and describe everything from their hobbies and interests to their typical resume, depending on the circumstances. Essentially, I include everything I can that will help me get to know my typical website users.

There are two main reasons I chose this point to define target audiences and personas.

Firstly, I find copywriting a great way to test the page layout I’ve come up with. It lets me know if the flow is working or if I need to add extra sections or rearrange the page so it makes more sense for the user journey.

Secondly, one of the most important things I’ll be doing is writing copy for the website pages themselves. Good copy speaks to your audience like a person, rather than an indifferent brand. Personas help me picture the people I’m writing to as I build out the headings, taglines, and paragraphs of each page.

3. Sketch out your site structure.

Image Source

At this stage, I usually feel ready to build out what the overall structure of the site will look like. Even though things might change a little as I create the site, I want to know:

• What the layout of my homepage will look like and what type of content and messaging I want to include
• Which other pages I want to create, such as product or services pages, an “About Us” page, a blog page, etc.
• How my main navigation menu will look in the website header and how I’ll group different pages together
• What my main call-to-action will be for visitors (book a demo, see our locations, buy now, etc.) and where I’ll place them on different pages.

Plan ahead as much as you can here, even if you end up adding another page or two into the mix later on.

4. Outline your brand guidelines.

If you look at any good website, you’ll see colors and graphic types are not used at random. The whole site needs to have a cohesive look and feel. That’s where brand guidelines come in.

If I get brand guidelines from a designer, I’ll stick to those closely. Otherwise, I need to give myself some clear guideposts for how to build the visual appeal of the site. At a minimum, your brand guidelines should include:

• A logo
• The main colors and variations of them that you want to use
• How and when to use those colors (page or element backgrounds, call-to-action buttons, etc.)
• Any uniform icons or graphics you can use throughout the site
• The font you’ll use for both headings and paragraph text

Pro Tip: I usually add in some guidance on imagery, too. Even images should have a similar content when it comes to warmth level, for example. Or if you use a transparency level on some of your visuals, this should be defined in the guidelines to keep it consistent.

Image Source

Even if you don’t consider yourself a graphic designer, I recommend completing this exercise even if you base the answers off a premade template in your website builder. It will stop you from veering off course and ending up with pages that don’t look quite right visually.

5. Choose a website builder.

You can do this at any point in the process really, but now would be the time to select a website builder if you haven’t already.

I mentioned above that my personal favorites are Wix and HubSpot CMS, but there are lots of other options out there. Other popular choices include Squarespace and Shopify. I recommend checking them all out before you decide. If you want to build a website from scratch for free, they’re all available on free plans or have free trials.

Want to try your hand at more in-depth website development? Start with these free coding templates.

Pro Tip: When I’ve been asked by clients which one to choose, my answer varies. Wix and HubSpot are great options for any type of site and have great plugins and integration options for extra functionalities you might need. For ecommerce sites, Shopify is a good one-stop-shop, and for professional portfolios or super visual websites, Squarespace also has some really sleek templates available.

6. Register a domain for your site and set up hosting.

Some people choose to do this at the end before publishing their site, but I recommend getting this step out of the way now.

Your domain refers to the website address where your site can be found online. These domains need to be purchased, usually with a subscription, and connected to your website builder. Hosting is the platform that handles the storage of your website to ensure it gets delivered to browsers when people visit your URL.

Lots of website builders do this as a one-stop shop. In Wix, for example, you can find and purchase a domain and take care of your hosting all in one place.

If you’d prefer to use dedicated domain registrars and hosting providers, some well-known examples are GoDaddy and Bluehost. But I find that if you’re not very confident with website development, these site builders are just the trick.

Pro Tip: If you’re not confident about domain purchasing and hosting, I recommend sticking with your website builder's in-app options. You can always move your hosting to another provider later on if you need to.

7. Write your website page copy.

At this stage, I’ll go back to the site structure I sketched out earlier. Before I move onto designing and building the website pages themselves, I want to have some copy ready to go.

Some people prefer to design their web pages and add the copy in after. I don’t recommend this, for a few reasons.

Firstly, I find copywriting a great way to test the page layout I’ve come up with. It lets me know if the flow is working, or if I need to add in extra sections or rearrange the page so it makes more sense for the user journey.

Secondly, building out your design and trying to retrofit better copy is a much more time consuming task. You need to rearrange layouts, add extra sections, shuffle around images and graphics — and doing this on a drop-and-drag website builder can take a lot of time and get frustrating.

8. Build your website pages.

Now that my layout is set and I’m satisfied with the copy, I can start putting it all together. I’ve been working with websites long enough to have decent coding skills. But if it’s your first time building a website, I recommend sticking closely to a template and switching out colors and sections according to your brand guidelines and page layout.

I also highly recommend making liberal use of the Preview function on your site builder as you work. The pages can look quite different in the editor versus checking what an end user will see.

Pro Tip: Make sure you also check the mobile view when previewing your pages. Mobile experience is very important since 63% of all internet traffic now comes from mobile devices. You might need to play around with the mobile layout separately to keep it user friendly.

I generally build all the website pages I need separately and then finalize my website menu at the very end.

9. Optimize your pages for organic search.

Search Engine Optimization (SEO) is the practice of ensuring sites like Google and Bing can access and serve your site in their search results. This means including keywords related to your products or services in multiple places, such as the meta title, description, and URL, otherwise known as metadata.

Most website builders have a specific SEO section in the settings of each page where you can add this information and ensure it’s keyword-optimized.

I use tools like Keywords Everywhere and Semrush for keyword research, but you can also use free tools like Google Ads. This tool has a Keyword Planner that you can use even if you don’t end up running any real ads.

10. Connect any integrations or plugins you need.

Some functionality does not come out of the box in website builders. Typically, I’ll need to add an integration or two with other apps to round out the functionality of the site. Examples of this might include ecommerce plugins, like Wix Stores for online store functionality, or integrating my HubSpot site with Google Analytics to track the site’s performance.

So, if there’s anything you’d like to add to your site, I recommend browsing the plugin or integrations section of your site builder. If you already use a CRM, for example, you’ll want to integrate it with your site to capture new leads through any form fills that occur.

11. Test everything repeatedly.

Once I’m happy with the look and feel of a new site, the final step is to make sure everything is working as it should. So, page by page, I’ll go through the website in Preview mode and check for errors. This includes:

• Fixing any broken links
• Making sure there are no grammar or spelling errors
• Testing every button for the correct destination
• Checking any forms to make sure the data goes where I need it to
• Double checking that SEO metadata has been added to every page
• Ensuring all visuals are good quality and switching out any blurry images or graphics

These items all have a big impact on the user experience of your website, which has a direct impact on your conversions.

12. Publish your site.

Once I’m happy with the design and functionality, it’s time to set everything live! Make sure your draft site is connected up to your domain (usually found in the main site settings of your website builder) and hit “Publish.”

Pro Tip: Even though you tested everything before publishing, I recommend repeating this process after you go live. Sometimes, things can break a little in the process of publishing, and you might have missed something during the first round of testing, too.

13. Make plans for future changes.

In my experience, a website is never a finished product. There are always improvements to make and things to try out. Once a site is live, I’ll immediately run a critical eye over it for areas I’d like to improve. Or, I may already have ideas for other pages and user journeys I’d like to build out over time.

Getting a plan in place for future development straight away ensures you're making continual improvements for a better, more user-friendly website.

Practice Makes Perfect When it Comes to Website Building

Starting from scratch with a website can feel intimidating. However, the only way to get good at developing sites from the ground up is to dive into the process.

I’ve made (and still make) plenty of mistakes when creating websites. But, each mistake is a learning experience that makes me more capable and my websites better. These steps are a great way to put structure around your process to minimize time delays while you learn.

HubSpot's Free Website Builder

Create and customize your own business website with an easy drag-and-drop website builder.

• Build a website without any coding skills.
• Pre-built themes and templates.
• Built-in marketing tools and features.
• And more!

Get Started for Free