How to build a website: a step-by-step guide from scratch
It's a daunting task to create a website as it takes a lot of time, patience, effort, and learning from mistakes. Follow this guide for steps on how to do it from scratch.
The world is becoming more and more digital every day. Gen Z and Gen Alpha have grown up with sophisticated smartphones, tablets, and apps since they were born. The older generations have learned quickly to adapt to the new digital realm. For businesses, the online world has changed marketing, advertising, and customer service, with access to many domestic and international markets.
Building a website improves a business's competitive edge, gains the trust of shoppers, and maximises revenue. If you would like expert assistance with creating a website, the WebCap team is happy to help. Please fill in our short design checklist and/or development checklist so we can get started on your project.
If you are interested in building a website on your own, feel free to follow this guide for steps on how to do it from scratch.
Step 1: Get a domain name
A domain name is the URL for your website. It's worth taking time and care to choose a domain name, as not only is it how online customers will find your business, but it is an important part of branding.
How to choose a suitable domain name
1. Use your business name
First, check if your business name is available as a domain name. You can see if it is already taken by using a domain registration company, such as GoDaddy, Google Domains, or Bluehost. If it's available, purchase it as soon as you can, as domain names get snapped up very quickly.
2. Keep it in line with your business image
Think about how your domain name will look to customers visiting your website. Most businesses, whether they are legal consultants, children's party planners, or an artist studio, will choose a domain name that is simple and professional.
3. Short and sweet
Short domain names are easier for customers to remember, type, and trust. A long domain name is difficult to read, and customers can make mistakes trying to search for it. For example, www.thisisthebestartiststudioofalltime.com looks confusing and could be associated with a spam website that would give the user a computer virus.
4. Opt for .com
The most common and trusted domain uses the ending .com. It is used worldwide by businesses and so it appeals to online customers as being credible and authoritative. If the .com option isn't available or too expensive, don't worry; using an alternative is not a huge problem.
5. Pick a domain name extension
Aside from .com, there are many domain name extensions to choose from, including .org (organisation), .net (network), .gov (government), .edu (education), and .co (company). You could also choose extensions related to your niche, for example, .coffee, .consulting, and .design. You can opt for .city (such as .london, .paris, .ny) or .country (such as .co.uk, .de, .fr, .es) to show where your business is based.
Registering your domain name
To register your domain name, choose a domain provider, select your domain name, and purchase. Domain names are an annual payment. Depending on your name and extension choice, they are usually affordable.
Step 2: Choose a hosting service
A web hosting service allows you to store your website's files so that your website can function. You will need a web hosting service if you choose to build a website with a platform that doesn't include hosting.
Types of hosting
Web hosting providers offer different types of hosting depending on how they store your web files on servers. The type of hosting affects your website speed, security, and performance.
- Cloud hosting is great for high website traffic. It works by using the cloud to store your web files. Shared hosting is affordable as multiple websites share servers for hosting.
- Virtual private server (VPS) hosting provides a more stable service as you have your own dedicated server partition.
- Dedicated hosting is recommended for advanced hosting and website needs, such as an e-commerce store.
- WordPress hosting is designed specifically for websites built with WordPress.
Check which web hosting features you need
Web hosting providers vary in the features they provide with each hosting type.
- Storage is how much space a server has for your website's files. Decide on how much storage you need based on your website and its content.
- Bandwidth is how much website traffic your server can handle. Based on your data transfer requirements, you can choose metered (a monthly cap on how much traffic your website can take) or unmetered (very high capacity to handle increased levels of traffic to your website).
- Security is the protection your web hosting provider gives your website. This includes firewalls, malware scanners, and SSL certificates.
- Email hosting is a business email connected to your website. It is recommended for websites that prefer to display a professional image to website users and customers.
- Migration assistance is to help you move your website from one web hosting provider to another.
Buy with a domain name
Many companies sell domain names and hosting together in a bundle. Providers such as GoDaddy, NameCheap, BlueHost, 123 Reg, and HostGator offer these services in one place. This can sometimes be cheaper and easier. With this option, you won't need to change your DNS settings.
Set up the DNS settings
You will need to adjust your DNS settings if you choose to have a separate provider for the domain and hosting. This is to connect them. Edit the DNS settings by pointing your domain name to the web hosting provider.
Step 3: Design your website
Think carefully about the design of your website, as this will affect how long visitors stay, how many pages they browse, and if they take action. Your website should encourage visitors to enquire or purchase a product.
Choose your website pages
First, decide which web pages you will have on your website. These are some essentials that every website should feature:
- A home page to show clearly and briefly what your website is about and what you sell or promote
- An about page to explain in more detail about your business or project
- A contact page for your target audience to enquire, send a business proposal, or ask for customer support
- Product or service pages to display and give details about what you are selling
- A blog to regularly post content related to your business or expertise
Creating a smooth user experience
User experience (UX) refers to how easy-to-use and intuitive a website is. The goal of a website is to make it simple for users to find the information they need and act upon it. If certain information is difficult to locate, for example, if there are too many pages to go through, or the page they need is hidden within overcrowded menus, then you will lose website visitors. Think about who will be using your website:
- What do they need to do on your website?
- What information do they need to find?
- How can you make this easy for them? You can use this information when designing your website layout.
This is a method of designing a website. The content for the website is considered first before creating a design. Especially if your website will be focused on visual content such as product photos, then using a content-first design will work best for you. For example, websites for e-commerce or a visual portfolio.
Another method of designing a website is to think about smartphone users. Mobile-first design involves the design of a mobile-friendly website before creating a desktop version. In this case, mobile users are the target audience and are given priority for the design needs.
Creating a site map
A site map is a layout of a website's structure. Drawing out a basic site map is a good way to visualise how your website visitors will navigate your site. Here's how:
- Think of categories you want to include (for example, a beauty e-commerce website might have hair care products, skincare products, and makeup products)
- Organise your categories to create your main menu and sub-menus
- Keep the "Contact" page as a main option on your menu as this makes it quick for customers to call and enquire
- Prioritise your web pages with a hierarchy and put your most important web pages high on each sub-menu
Design pages with wireframes
A wireframe is a sketched plan of a web page. They are used to draft a prototype before it is developed and published. It is similar to starting a painting. You should first start with a sketch to map the proportions of the subject. Then build the layers and add details to produce the finished piece. There are three ways to make wireframes:
- Use a pencil and paper
- Digital drawing software (e.g. Adobe PhotoShop, Adobe Illustrator, Freeform, Krita)
- Wireframe software (e.g. Figma, Moqups, Justinmind, Uizard)
A low-fidelity (lo-fi) wireframe isn't as complicated as it sounds. It is the most basic drawing of a web page. It helps draft the placement of web page elements before diving into details such as graphics, colours, and copywriting. This type of wireframe is made very quickly. Steps for drawing lo-fi wireframes:
- Only use black and white
- Use boxes to represent images, photos, videos, and buttons
- Use lines to represent text
- Divide each web page with a line to represent the "fold," this shows the first things visitors see "above the fold" before scrolling down
- Use annotations if desired
The next step is to create high-fidelity (hi-fi) wireframes. This just means adding more detail to the sketches you have made. Steps for drawing hi-fi wireframes:
- Add in some colours
- Add text for headlines, buttons, call-to-actions, and menus
- Draw more details for images and graphics
Themes are website templates that are pre-made. They can help you save time and money as professional web designers have already designed and created them. Templates are available for website builders and CMS, with many themes to choose from and install. These include free or paid themes.
It's worth noting that installing a theme or migrating your website from one template to another can become a technical task. For those who aren't experienced or confident with coding, be prepared to hire a web developer. Usually, these issues occur with CMS, whereas website builders offer simpler templates with less expert skills.
Step 4: Build your website
Now, it's time to start building your website. There are three main methods to do this, each with pros and cons.
Using a website builder
Website builders are platforms for creating a website without coding or technical knowledge. They feature a drag-and-drop interface to make visualising the website's design easy. Examples of website builders include Wix, Squarespace, Weebly, Shopify, and Google Sites.
When should you use a website builder?
A website builder is a good option for those with a lower budget for web development. This might include:
- A personal blog
- A personal portfolio
- Business websites with few pages
- Small businesses
- Small e-commerce store
Benefits of Website Builders
- User friendly
- Affordable or free
- Quick to build
- Ready-made themes
- Coding not required
- Great for beginners
Disadvantages of Website Builders
- Very limited options for customisation
- Ready-made themes are basic and generic
- Free options don't include a custom domain name
- Not good for search engine optimisation (SEO)
- Not very mobile-friendly
- Not suitable for larger businesses
- Lack of customer support
Using a content management system (CMS)
CMS is a level up from using a website builder. It offers more flexibility and advanced options for the design and functionality of your website. Examples of CMS are WordPress, Joomla, Drupal, Magento, and PrestaShop.
When should you use CMS?
If your business expands, it will soon outgrow a website builder. Due to website builders' limited features and functionality, it's recommended to opt for CMS. This type of website creation and management is useful for:
- Large websites with multiple pages
- Small to medium e-commerce stores
- Large e-commerce stores
- Businesses that want to impress customers
- Businesses that want to improve sales conversions
- A professional portfolio
- A customisable blog
- Multilingual websites
Benefits of CMS
- User friendly
- Relatively quick to build
- Easily customisable
- Very few coding skills needed
- Ready-made themes
- SEO friendly
- Enhance performance with plugins
- Mobile friendly
- Good customer support
- Suitable for all business sizes
- Great for confident beginners to advanced users
Disadvantages of CMS
- Hidden cost of plugins
- Hidden costs of premium themes
- Steep learning curve for non-technical users
- Security risks if not updated regularly
- Web pages are slower to load than hand-coded websites
Hand-coding a website
Lastly, manual coding is the most advanced option for building a website with the most impressive results. If you can do this yourself, it will require some time to put together. Otherwise, you can hire a web developer to do this for you.
When should you hand-code a website?
The costs of paying professionals to hand-code a website mean that this option is usually limited to those with a comfortable budget. The results, however, will be visually stunning with exceptional user experience. Those who might consider this option include:
- Large e-commerce stores
- Large businesses
- Anyone with a higher budget for web development
Benefits of coding a website
- Enhanced performance
- Quicker web page loading times
- Advanced customisation
- SEO friendly
- Robust security
- Mobile friendly
- Suitable for all business sizes
- Good customer support
- Disadvantages of coding a website
- Requires advanced coding skills
- Time-consuming to complete a website
- Higher costs of hiring a web developer
- More complex to update and improve the coding
Step 5: Add content
After deciding on the web design, the next step is to add the content. This includes the text, also known as copy, images, and videos. Start with the most important web pages, such as the home page, about page, and contact page. Then, move on to the product or service pages, blog, and landing pages.
Write the text
Website copywriting refers to the creation of written content. These are the carefully selected words used to write compelling headlines, product descriptions, company news stories, online guides, or other customer information. Writing for the web is different to essay or academic writing. It borrows techniques from creative writing and storytelling but with an online audience in mind.
Preferences of Internet users
- They skim read
- They want information quickly
- They don't like jargon
- They prefer simple text
Online copywriting tips
Knowing this information, you should adjust your written content:
- Use short sentences
- Don't use too many adjectives, fluffy, or flowery language
- Break up your text into short, bitesize pieces (usually up to three sentences or less)
- Include the most important information at the top of the page
- Write from the point of view of the customer and talk less about yourself
- Clearly state what you offer, the features, and benefits
Entice your audience to do something
The purpose of a website is usually to encourage an online visitor to take action. That might be to call, email, create an account, sign up for a subscription, make a purchase, download a resource, or sign up for an email newsletter. These are known as calls-to-action (CTA). These actions should be encouraged on every web page. Here's how:
- Add a CTA at the top of each page (above the fold)
- Insert CTAs throughout the content of each web page
- End each web page with a CTA CTAs can be hyperlinks within your copy or a button for the reader to click.
Use images and videos
Graphics and multimedia content are useful and add visual appeal for your website visitors. Without images and videos, your website will be flat, uninteresting, and less attractive than your competitors' websites.
Choose your photos wisely
Poorly chosen photos or those with low resolution are a quick way to turn off your website audience. These are some tips for making a good impression:
- Take your own photos if you are a confident and skilled photographer
- Hire a professional photographer for high-quality product or team photos
- If using stock photos, choose images that aren't cheesy or an unrealistic representation of your business
- Don't use photos from Google Images without checking the usage rights
Add videos to spark interest
Videos are a great addition to web pages. They are a helpful tool for website users who don't want to read all the information on your website. It's also useful for:
- Adding value to your website content
- Increasing the time website users stay on your web page
- Increasing YouTube views and engagement (also boosting your SEO)
- Audiences connect with videos featuring a human presenter
Graphics for creative flair, branding, and advertising
Other forms of visuals to use on your website include branding, such as the company logo and banners. Advertisement graphics include banners for seasonal and limited-time promotions. Illustrations or infographics are graphics that could be used on web pages, blog posts, ebooks, guides, and whitepapers.
Step 6: Add marketing features
There's a variety of marketing features to take advantage of. These can help you gain more website visitors, increase your brand awareness, and increase your enquiries and sales. The best part is that it's not complicated. Many of these features are added to your website by installing plugins. Each CMS has a plugin store to access free or paid plugins and extensions. These are some ideas:
- A contact form lets users send a message
- Social media buttons let users find and follow your social accounts
- Share buttons encourage users to share your content
- SEO plugins improve your search engine ranking
- E-commerce plugins to enhance your online shop
- Pop-up banners to grab attention
- Email newsletter sign-ups could increase by using a plugin
- Landing page builders help you to create pages for target audience segments
Step 7: Test and optimise
Before publishing your website to the world, make sure to test it. A website with broken links, spelling errors, grammar mistakes, coding issues, security issues, and incorrect formatting will cause big problems for website visitors. Here's how to test your website:
- Use different browsers to check the website, for example, Firefox, Safari, Google Chrome, and Microsoft Edge
- Use different devices to check the website, for example, desktop or laptop PCs, tablets, game consoles, and smartphones
- Run website testing applications to find errors that you might miss
- Use copywriting AI to look for spelling, grammar, and writing mistakes by using apps such as Grammarly, Wordtune, or Jenni AI
- Ask people to view your website and provide feedback When testing is complete, fix errors to optimise loading and user experience.
Step 8: Publish your website
Finally, publish your website. This will take your website from development and editing mode to live mode. There will be a button to do this on website builders and CMS programs. Now, online users will be able to find and visit your website. Remember that it takes time to build your SEO ranking, so don't worry if the website traffic is low. You can boost your website visibility by:
- Paying for search engine ads such as Google, Bing, and Yahoo
- Paying for social media ads such as Facebook, Instagram, LinkedIn, TikTok, or YouTube
- In an email newsletter, if you have a mailing list
- Business cards can feature the website URL
- Social media accounts should link to the website
- Posters, flyers, or bulletin boards can display the website address if you have a physical shop or office
- Press releases online and offline can include the website address in news stories
- Print marketing materials can feature the website URL
In short, there are three main ways to build a website. Decide whether a website builder, CMS, or manual code will be the best option to suit your website needs, short-term and long-term costs, and increased web traffic as your business grows.
Your budget and time allocated for creating your website will be the most influential factors for the outcome. The quality of the website design, pre-made or custom themes, marketing plugins, and content will also depend on how much technical skill you have yourself or whether you can outsource a team to create an excellent online experience for your customers.
Lastly, if you are building an e-commerce website, this will greatly affect the costs due to the addition of payment gateways to the website, incurred costs with international customer payments, and monthly e-commerce plugin subscriptions.
Don't forget that Millenials, Gen Z, and soon Gen Alpha make up the majority of online shoppers, and their standards for websites are high. With digital advancements rapidly increasing every year, you need to build a website that won't get left behind and your sales lost to your competitors.
What is the fastest method of building a website?
For the fastest method of creating a website, use website builders. They are easy to use, and you can expect to have a basic website ready in just a few hours.
What is the cheapest way to build a website?
This depends on the purpose of your website. A website builder will suffice for a very basic website to advertise your business. For e-commerce, CMS is the most cost-effective method for creating a website. Shopify, for example, is a well-known website builder for e-commerce stores. However, it can quickly become expensive as the hidden costs of plugins and online payment gateways add up.
What is the best method of creating a website?
Manual coding is the best solution if you want to impress your clients, take payments online, have custom features, and create a more advanced online platform. Following in at a close second place is CMS.
Do website builders look bad?
This is sometimes true. Although, it depends on the website builder you choose and how much time you have to create your website. Website builders are extremely limited in options to make a truly beautiful and functional website. It is often obvious to an online visitor that the website was made with a website builder, as the templates are plain and used by many other businesses. With more advanced website builders such as Shopify, you can make a good-looking e-commerce website.
Need help with building a website?
It's a daunting task to create your website. It takes a lot of time, patience, effort, and learning from mistakes. If you would like expert assistance with creating a website, the WebCap team is happy to help. Please fill in our short design checklist and development checklist so we can get started on your project.