To use this website fully, you first need to accept the use of cookies. By agreeing to the use of cookies you consent to the use of functional cookies. For more information read this page.

ClickIt: A web based application to aid the learning of web development in an educational environment

2 Introduction

2.1 Introduction

The software I am developing, ClickIt, is a web based application designed to assist with web development and has been targeted at children at secondary level school aged between twelve and sixteen years of age. It aims to make the currently challenging field of web development more accessible and easier to learn. Web development in school as it stands currently involves learning several programming languages such as HTML, CSS, JavaScript, PHP and SQL. This can be discouraging as well as difficult for many, and integration of these languages makes this job even more difficult. ClickIt aims to fix this situation by providing a visual drag-and-drop application in which students drag-and-drop code in the form of HTML elements and CSS styles and produce web pages. To my knowledge, to this date this style of HTML development has never been attempted in the way outlined in this document.

2.2 Purpose of this document

This document serves as a software requirements document for the project of building a web based tool (ClickIt) to support the learning of web programming for school children. The document is intended for use by Heriot-Watt University.

2.3 Aims and objectives

The aim is of the project is to develop an engaging online learning environment that can encourage children to develop websites using HTML and CSS whilst also to make this new method of developing HTML and CSS easier than what already exists for doing the same task.

This aim can then be broken down to the following objectives:

  • Develop an interface that is easy to use, making development of HTML pages easier than is currently possible, whilst also presenting a learning tool that can be used in education.
  • Develop an application that lowers the learning curve of web development and improves the learning gain obtained from the application
  • Develop an application that gives the user an alternative to existing methods of developing a website

2.4 Project scope

The purpose of this project is to develop an application that will aid users with web development. The application will be designed for, but not limited to, children aged 12 to 16 to assist with learning HTML and CSS as part of the school curriculum in Scotland. The eventual aim after using this application is that the user has improved their own web programming fluency and understanding of the subject.

2.5 Definitions of terms used

Term Definition
Scratch An application to aid learning software programming for children using a graphical approach developed by MIT.
Logo An application designed to aid general programming skills with children with a graphical approach in mind
ToonTalk An application designed to aid general programming skills with children using game-like styles and animations to improve usability.
WYSIWYG What You See Is What You Get is a type of editor that allows the user to drag elements on to the web page and the editor generates the code
Web programming Developing a webpage using HTML and CSS through code rather than using a What You See Is What You Get editor
Web development The whole project of building a website.
Responsive web design (RWD) A design methodology that means that websites will scale to a range of different screen sizes, support multiple forms of input and device types.
IDE An IDE or Integrated Development Environment is a piece of software that provides assistance to developers when developing programs.


  1. Computing Science Project General assessment information, SQA, 2015 . Available from: . Accessed 12 Nov 2015
  2. Maiorana, F, 2014. Teaching Web Programming . University of Catania, pp. 49
  3. Jenkins, T, 2001. Teaching Programming - A Journey from Teacher to Motivator. University of Leeds, pp. 1 - 3.
  4. Kahn, K, 1995. ToonTalk - An Animated Programming Environment for Children . Stanford University, pp 198 - 201.
  5. SuperLogo, Axe Valley Community College, Available from: . Accessed: 11 Nov 2015
  6. Maloney, J, Resnick, M, Rusk, N, Silverman, B, 2010. The Scratch Programming Language and Environment . Massachusetts Institute of Technology, vol. 10, pp. 2 - 8.
  7. Hourcade, J P, 2001. Interaction Design and Children . University of Iowa, pp. 282 - 283
  8. Hanna, L, Risden, K, Alexander, K, 1997. Guidelines for Usability Testing with Children
  9. Texas Child Care: Back Issues, Lee, T, 2011. Available from: . Accessed: 17 Nov 2015
  10. Kolb’s Learning Styles, Business Balls, 2015. Available from: . Accessed: 17 Nov 2015


  1. W3C HTML5 and CSS2 and CSS3 specifications
  2. PHP Reference library
  3. SQA Curriculum for Excellence
  4. SQA Higher and Advanced Higher Computing course notes and past examination papers
  5. ToonTalk website (
  6. Logo versions website (
  7. Scratch website (
  8. Zurb Joyride website (