Slides badge

Web design

Learning Intentions

  • Be able to develop a website using an appropriate information architecture

Success Criteria

  • I can explain the term information architecture
  • I can build a website with an appropriate information architecture


  • In the industry, web development is considerably different to how we develop it within school.
  • For a start, websites are structured in folder layouts called an information architecture.

Information architecture

  • The first step to developing a website properly is to develop this information architecture. 
  • In the industry, this is often done using techniques such as card sorting where the developers get together and figure out what pages go where. 
  • Creating these folders also can help generate the URL of the webpages on the website. For example, in the previous example structure, the URL to add a user to the site is


  • Every folder in the information architecture will include an index file, normally the index.html webpage. 
  • For example, and are the exact same webpage.

Frameworks and libraries

  • On the web there are tons of free frameworks and libraries
  • Examples of frameworks include HTML5 Boilerplate, Bootstrap and Foundation

We are going to begin building a website from the ground up. The first step is to decide what you are going to build your website on. When you have done that, write down what pages you will need on your website. Create the information architecture of your website. 


We're going to do this with HTML code, CSS and JavaScript.

What we are going to work on is more advanced than what you would be expected do in National 5 Computing Science, but we've got more time to do this!


Presentation Overview
Web Design
© 2020 - 2024 J Balfour
15:54 | 23-05-2024
Join Live Session
Start Remote
Save Progress
Slideshow Outline
Presenter Mode
Widget Screen
Canvas Controls
Random Selector
Volume Meter
Binary Converter
Python Editor
Show Knox 90
Provide Feedback
    DragonDocs Management
    Random selector
      Binary conversion
      Denary to binary conversion
      Binary to denary conversion
      Feedback 👍

      Apply a filter:

      All slideshow files