Skip to Main Content

Learning Portal - Digital Skills : Building Websites

Building Websites

Beautiful websites are possible with no coding experience required! There are lots of templates to choose from! In this module, you can learn how to create a great simple website.

Back to the Learning Portal 

Back to Digital Skills

Tutorial

About This Tutorial

Creating a website may seem like an intimidating task, but these days, it is possible to create a beautiful website without any coding experience. This module will cover:

  • Using website tools

  • Designing your website

  • Choosing website content (text, images, and multimedia)

  • Creating an accessible website

  • Website privacy

  • Keeping your website secure

  • Maintaining and updating your website

What to consider before you begin

Before you start building your website, consider the following questions:

  • What type of website are you building?Your websites could be a way to give information about a topic or service, a portfolio, a blog, or an online shop. Knowing what you're building is important when choosing website tools.

  • Will you need a website host?A website host provides servers which will hold your site and allow others to access it. Depending on your website’s needs, there are many different free and paid hosting options available. It is important to consider if your website will need room to grow, if you are willing to have advertisements on your website, how quickly you need to create your site, and how much you are willing to spend. These are all factors that should influence your decision when choosing a website host.

  • What will your domain name be?Your domain is the address of your website. Choose something easy to type and remember, and that is relevant to your website.

Choose a Website Tool

In order to build your website, you’ll need to choose a tool to publish it. Luckily, there are many free or inexpensive platforms available that make website publishing easy. Click on the different tools below to find out which one is best for you to use when building your website.

Wix

Check out a video here. Wix is a drag-and-drop website builder with hundreds of customizable templates. This tool is great for beginners as it is easy-to-use and offers customizable designs.

Your free website will be hosted by Wix, so you do not need to buy external hosting but, there will be advertisements on your site that you do not control, and you cannot customize your domain.

There are three ways to use Wix to build your website:

  • Artificial Design Intelligence (ADI)Wix’s ADI will automatically create your website for you. After answering several questions about your goals for your website, you will be provided with your own site, including content. Of course, you can easily customize your website’s design, layout, and content to ensure it matches your vision. Learn more at Creating an ADI Site

  • Wix’s EditorBy using Wix’s Editor you can build your web pages to exactly how you want them to look whether you start from fresh or use a template. Learn more at Using Your Wix Editor - Tutorial

  • Velo by WixIf you are already an experienced website builder, Velo by Wix is the best option for you. Velo by Wix will give you the most control of design but you will need to have experience working with code. Learn more at About Velo by Wix

 

WordPress

Check out a video here. WordPress is slightly more advanced than some of the other website creation tools out there. It may take you a little longer to get your website up and running but your website will look a lot more polished and professional.

There are two ways that you can use WordPress:

  • By using free hosting on WordPress.com:

    Your website is hosted by WordPress.com, and a basic site is free. The downsides are that you cannot add a custom theme from an external website, there will be advertisements on your site that you do not control, and your domain name will end in ‘wordpress.com’.

  • By hosting your site through a hosting provider:

    Hosting through an external provider may cost you a monthly fee, but you have more control over your website. You won’t have advertisements automatically added to your site, and you can add plugins and custom themes.

 

Blogger

Check out a video here. As the name suggests, Blogger is a publishing tool that is designed for blogging; however, it can also be used to create a website. The only difference between using Blogger for a blog and using it for a website is that with a blog mostly everything is a ‘post’, but with a website, you'll have most of your content in ‘pages’ with the odd post as updates.

Your website will be hosted by Blogger, so you do not need to buy external hosting; however, there will be advertisements on your site that you do not control.

 

Google Sites

Check out a video here. Google Sites is a simple, fast, and free website creation tool. To use Google Sites, you must have a Google account. Google Sites is a useful tool for short-term projects or if you are looking to create your website quickly.

 

Other Tools

Beginner

  • Weebly: a customizable drag-and-drop website builder.

  • Tumblr: a microblogging site that facilitates sharing content. 

Advanced

These tutorials from Lynda.com can help the more advanced user create websites with more control.

Website Design

The design of your website is how you present your content. It includes the appearance and how elements are laid out, as well as the structure of the site and pages. 

Structure

Just as every video should start with a script or storyboard and every infographic should start with a sketch, every website should start with an outline.

When creating your outline, consider:

  • Plan out the important pieces of your site. What pages will you have? What content will appear on each page? How will the pages fit together?

  • Keep your navigation clear and simple. You want it to be easy for your audience to find information, so make sure the organization of the page is logical.

  • Your outline is known as a wireframe. A wireframe is a basic outline of a website’s layout, content, and functionality.

  • Your plan doesn't have to be perfect. It always helps to have an outline of everything you wish to include in your website.

Check out this video (The Learning Portal Ontario, 2021) to find out more on wireframes. 

 

Appearance

When creating the appearance of your website, you can start with and existing template or start from scratch. Learn more about each option below.

Use a template

When designing a website, unless you’re an expert in web design, the easiest way to design your site is to start with a template. A template is basically a premade website that you can customize with your own pages, text, images, etc.

Tools such as WordPress and Blogger have free built-in templates and themes that you can use as a starting point. You can also buy a template from one of the websites below:

What to remember when designing your website:

  • Choose a design that matches your purpose. Like with website tools, when you are choosing your template, keep the purpose of your website in mind.

  • Responsive design is an asset. Your audience may view your site on a mobile device, so a responsive template (one that automatically adjusts how it displays content based on screen size) is a great thing to have.

For inspiration, take a look at some of the websites listed on AWWWARDS.

Start from scratch

If you’re more comfortable with web design and want to customize your website beyond what you can find in a template, these tutorials from LinkedIn Learning can help.

Website Content

The content of your website is the information you provide on your pages. There are several different types of content for the web.

Text 

When you’re writing for the web, it’s important to make your content clear and easy to read.  A website is not an essay, so you can’t simply cover your website in huge blocks of text if you want to reach your audience. Here are some tips for effective web writing:

  • Keep your intended audience in mind. Know who you are writing for and write at a level that will be meaningful for them. Use words your users will understand.
  • Chunk your content into manageable sections. Clear headings and subheadings are a good way to tell your audience what to expect in each section.
  • Front-load the important information. Use the journalism model of the ‘inverted pyramid’. Start with the content that is most important to your audience.
  • Use short sentences and paragraphs. Write out your content, then go back and remove all unnecessary words.
  • Use bullets and numbered lists. Bulleted and numbered lists can be a good way to break up your text and highlight information but be sure to use them in moderation.

Images

Images can be an important element of your site. Your brain can process information faster in an image than in a block of text, so using them makes your information easier to absorb.  Images can also make your page more visually appealing.

Here are some things to remember when using graphics:

  • Use meaningful images.The images you choose should be related to the text content of your site.
  • Don’t overcrowd your site with graphics.Your brain experiences cognitive overload when there is to much visual information, so make sure your images aren’t competing with each other or with your background.
  • Make sure you have permission to use the image.Images you find online are likely protected by copyright, and it is illegal to use them without permission. You can find free or open licenced images in the websites listed below.

Find Images

Find free or open images using the websites below. Remember: read the copyright/use guidelines for each image and include any citation or credit that is required when using the image.

  • The Noun Project - The Noun Project offers open-license photos and icons. The content can be used for free, but proper attribution must be provided. Alternatively, members can purchase a NounPro account and receive access to royalty-free photos and icons which do not require attribution.
  • Flickr (Click Any License → Creative Commons)
  • Google Images (Click Search Tools → Usage Rights → Labelled for Reuse)
  • Creative Commons Search - Browse through millions of free, open-license images.
  • Pixabay - All images are open and available to use for free. Attribution is encouraged.
  • Pexels - All images are open and available to use for free. Attribution is encouraged. .
  • Open Clip Art Library

Other Media and Content

Media can really bring content to life in a website. You can find existing media, such as YouTube videos, or you can create your own media. Remember: if you use someone else’s media, follow all copyright and usage rules for that content.

Resources

Create an Accessible Website 

When you are creating a website, it is useful to remember that not everyone will be able to access your content in the same way. Some people may be colour blind, or use a screen reader to read the content. Creating an accessible website allows people with disabilities to access your content.

Here are some accessibility tips to keep in mind:

  • Provide text alternatives for non-text content: If you are including an image, include alternative text that describes the image. An image of text does not count as text.
  • Use heading tags: When you are creating headings, you must label them as headings; you can’t simply make the text bold. Make sure you stick to a logical order (i.e. heading 1> heading 2>heading 3, not heading 1> heading 3> heading 2).
  • Don’t use colour as the only way of explaining something: Not everyone will see the colours on your site, so saying something like ‘click on the green button’ can be confusing.
  • Have enough contrast between text and the background: With too little contrast between the colour of your text and the colour of your background, the text can be hard to read. You can use tools such as WebAIM’s Color Contrast Checker to check if you have used enough contrast.
  • Make your links descriptive: If you are including links on your page, make sure the link text describes what the linked page is. Do not say ‘click here’ or include the URL as the clickable text. The links should make sense out of context because people using a screen reader might want to read through only the links. For example, let’s say I want to link to The Learning Portal (the underlined text represents a link):
    • Good link text description:The Learning Portal (the text describes where the link leads, so it makes sense if you’re just reading links)
    • Bad link text description:to visit The Learning Portal, click here (If you read ‘click here’ without the sentence, you don’t know what the link leads to.)
      visit The Learning Portal at www.tlp-lpa.ca (screen readers will have to read out every letter, period, slash, etc, and you still don’t have a good sense of where the link leads.)

 

Accessibility Resources 

Protecting Your Privacy

Most websites are designed to be seen by the public. However, there are several reasons why you might want to make your site private or limit your audience:

  • It is for a school assignment.

  • It is an online resume or portfolio that you don’t want someone to copy or plagiarize.

  • The site contains personal/private information about you or others. You can protect your website by adding a password and only providing it to those you give permission to view your page.

How Do I Make My Website Private?

Each website platform has its own set of procedures for making a site private. Click on the website building tools below to see how to change your privacy settings.

Keeping Your Website Secure 

No way of transmitting data over the Internet and no method of electronic storage is perfectly secure. No one can guarantee the absolute security of your site or account but, there are a few things you can do to help protect your data. Read these steps below:

 

Step 1: Strengthen your password

The first and simplest way to strengthen your login security is to change your password—especially if you're using an easily guessed phrase such as "123456" or "qwerty". Every password you use should be easy to remember and hard to guess.

There are many different approaches to generating a strong password, but password managers and passphrases are two of the best practices.

Here are some other tips to strengthen your password:

  • Never reuse passwords

  • Never include obvious words (such as friends or family member’s names or your favourite sports team)

  • Include a mix of capital letters, numbers, and symbols to add complexity to your password

  • Don’t write down or store your logins anywhere, especially not on your devices

  • Don’t share your passwords with anyone

  • When you’re creating a password or just want to test your current ones, visit How Secure is My Password?

 

Step 2: Use 2-step authentication 

Two-step authentication is a method of securing accounts requiring that you not only know something (a password) to log in but that you also possess something (your mobile device or a physical key). The benefit of this approach to security is that even if someone guesses your password, they need to have also stolen your possession in order to break into your account. It adds a small extra step to the login process but makes your account much more secure.

Here is a list of popular authentication applications:

 

Step 3: Log out of your account 

You can protect your account by logging out when you are finished working. This is especially important when you are working on a shared or public computer. If you don’t log out, someone may be able to access your account just by viewing the browser history.

 

Step 4: Backup your website

No matter what security measures you take, it is still possible for your website to be hacked. Best practice is to backup your entire website on a regular basis so that in the event that your website is compromised, you can recover your data.

In the event of a security breach, ensure you can pick up where you left off by using an online backup service such as BackupGuard or GoDaddy Website Backup.

If you are unsure if your website’s security has been breached and would like to check, try using of the website security checkers listed below:

Additional resources

Attributions

The content in this tab, “Security” was created by The Learning Portal using the following sources:

The Security tab is a derivative of the works above and is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.

Keeping Your Website Up-to-Date

Once you have created and launched your website, it is important to keep your pages and content relevant and up to date.

On a regular basis, you should review your site and check for any issues such as:

  • Broken or out-of-date website links

  • Missing, outdated, or incorrect content

  • Formatting issues

Using an editorial calendar is a great way to remind yourself to add new or updated content to your site and review old content.

Additional resources


Attribution 

Unless otherwise stated, the material in this guide is from the Learning Portal created by College Libraries Ontario. Content has been adapted for the NWP Learning Commons in June 2021. This work is licensed under a Creative Commons BY NC SA 4.0 International License.

All icons on these pages are from The Noun Project. See individual icons for creator attribution. 

Grande Prairie Campus 10726 106 Avenue
Grande Prairie, AB   T8V 4C4
780-539-2911
1-888-539-4772 (Toll-Free)
StudentInfo@NWPolytech.ca
Fairview Campus 11235-98 Avenue   PO Bag 3000
Fairview, AB   T0H 1L0
780-835-6600
1-888-999-7882 (Toll-Free)
StudentInfo@NWPolytech.ca
National Bee Diagnostic Centre 1 Research Road   PO Box 1118
Beaverlodge, AB   T0H 0C0
780-357-7737
NBDC@NWPolytech.ca
We acknowledge the Indigenous people and their ancestors, whose land we are on.
© Northwestern Polytechnic - All rights reserved