Skip to main content

How to build a website from scratch

build a website
(Image credit: Unsplash)

Starting a new website can be daunting, particularly if you’re working hard to get your business off the ground at the same time. Your website is vital to your online success, so it pays to get it right from the start. But where do you start?

In this article, we’ll cover website building options and go through an example of how to build a website using one of the top website builders available today. 

build a website

The HTML code behind the ITProPortal website (Image credit: Future)

Step 1: Deciding on a site-building method

The way that you choose to create a website depends on how much time you have to spare and how much money you’re willing to spend. Building a website from scratch could mean writing every line of HTML, CSS, and JavaScript code by hand, but unless you’re a computer science student interested in learning every detail of how a website ticks, this is too slow. Website development knowledge is useful, but there’s little point in re-inventing the wheel.

The next option is to use a content management system (CMS) like WordPress, Joomla, Drupal, Magento, or Shopify. You install the CMS on your web hosting space, and it gives you a framework to build a website on. CMS are getting increasingly versatile, but each one usually has strengths that make it best suited to certain industries. Shopify, for example, is great for ecommerce websites.

Even more versatile are website builders. A website builder aims to be a tool that you can use to create any type of website without touching a line of code. The best website builders do let you add in your own website code if you want something specific, though. Top choices today include Weebly, Wix, and Format, but in this guide, we’ll look at the website builder from Squarespace. Other website builders follow a similar process, they just have different interfaces.

build a website

Shopify is a popular content management system for online stores (Image credit: Shopify)

Step 2: Choose a site category

Squarespace, like most website builders, has an on-boarding wizard that enables you to set up your website with a default look and feel that matches your industry. Choose a site category by describing your business or selecting from the list.

You’ll also be asked about your top goals for your website. The selections you make will populate your website with a few default options. For example, if you select that you want to collect donations online, your website will start with a donation button.

build a website

Enter details of your business to get a customized site to build upon (Image credit: Squarespace)

Step 3: Select a template

Choose from the list of designs for your website. There are hundreds of templates from which to choose. This template will be a framework for your website, but you can change all text, images, and pages.

build a website

Choose a template to start creating your website (Image credit: Squarespace)

Step 4: Create an account and name your website

If you don’t already have a Squarespace account, it’s time to sign up. You can use Google, Apple, or Facebook logins or sign up with your email. Another wizard will take you through the steps of naming your website once you’ve signed up.

build a website

Create a free account with Squarespace (Image credit: Squarespace)

Step 5: Change fonts, colors, and animations

Squarespace’s tools are found on the left-hand side of the page. Click on Design, and explore the options available to you. Changes here are global, so they’ll be reflected on all pages. You can choose a new color palette, the global text types of your website, and the animation style of site elements as they appear on the page.

If you want to, you can change the style and shape of buttons, the look and feel of your site’s products, and the 404 page that visitors see if they arrive at a page that doesn’t exist. There’s a huge list of customization options, and you can use custom CSS if you need to make style changes that aren’t available in the Squarespace interface.

When you’re happy with the changes you’ve made, click Save.

build a website

When you set the color palette for your website, it updates across the entire site (Image credit: Squarespace)

Step 6: Edit the site header

On any page, click on Edit, move your mouse to the top of the page, and choose Edit Site Header. Here, you can upload your own logo and change the title of your website. You can also choose the elements that appear in your header. Note that in our example, because we specified that we wanted to take donations online, the header has already been populated with a Donate button.

build a website

Using your own logo in the site header gives your website more personality (Image credit: Squarespace)

Step 7: Replace text and images

Browse through your entire website, and click Edit on each page you want to change. In Edit Mode, you can click on any text, image, or page element to edit it. You can change the style and formatting of text, and replace the template images with your own. Squarespace has a built-in image editor that you can use to adjust the brightness, contrast, and saturation of images. It’s also easy to choose different layouts for your images, such as collages or lightboxes.

build a website

You can add captions to images in Edit mode (Image credit: Squarespace)

Step 8: Add and remove pages

By clicking on the Pages menu item, you can add new pages to your website. You don’t have to start with a blank page either. You can add a designer page layout, a blog, a store, a portfolio, or an events page.

Pages can be organized into folders, and you can specify which pages don’t appear on the navigation menu.

build a website

It’s easy to add and remove pages from your website (Image credit: Squarespace)

Step 9: Set or connect a domain

Click on Settings and choose Domains. You’ll see the built-in Squarespace domain where your website is available, even if you don’t own your own domain name yet. Click on your Squarespace domain, and choose a more user-friendly URL for your website. 

You can also buy a top-level domain from Squarespace, transfer your existing domain name to Squarespace, or point your domain name to Squarespace without changing the domain registrar.

build a website

Our website will be available at thepodcast.squarespace.com permanently (Image credit: Squarespace)

Step 10: Publish your website

To publish your website, you need to upgrade to a paid plan. Every website builder has different pricing. Squarespace starts at $12/month if you pay annually. Payment is made by credit card. 

Once you’ve paid for the plan, your website can be published by clicking on Settings and choosing Public from the Site Availability menu.

build a website

Squarespace has four plans that start from $12/month (Image credit: Squarespace)

Summary

There is more than one way to build a website from scratch. One of the easiest, fastest, and most versatile methods is using a website builder. In this article, we showed you how to get a website off the ground quickly by using Squarespace, but there are many other top website builders you can use. Try out a few, and see which feels the most intuitive to you.