Skip to content

Building a website to provide prototyped forms to support classes for people to learn digital skills

License

Notifications You must be signed in to change notification settings

ashmanq/DigitalSkillsTool

 
 

Repository files navigation

Digital Skills Tool

This is the code for a website to support classes to help refugees and other participants to improve their digital skills by training on prototyped forms of exisiting services.

There is about 1 in 7 people in Scotland who can’t get online (that’s about 800,000 people)

The course is developed for the East Renfrewshire Council and the website supporting the classes is the result of the work of many people who either: mapped the forms, coded them, or tested them:

This is using the GOV.UK Prototype kit

You can visit the website here: https://erc-tool.herokuapp.com/ you will be asked for a username and password, both are: erc-tool

You can also learn more about the project in this blog post

Watch this video or look at this PDF if you prefer.

How we are using the tool

Different forms are needed to support the classes. Some are Council forms, some are GOVUK form and others are Scottish Government forms.

Different layouts have to be created for each and even among each category, there is a variety of layouts:

For example, the DVLA have a different layout and style compared to HMRC, or the Social Security Scotland have it's own style.

Important files and paths

Layout files in app>views>

  • layout.html - default GOV.UK layout
  • layout_erc.html - customised for Council forms
  • layout_sg.html - customised for Scottish Government
  • layout_sss.html - customised for Social Security Scotland
  • layout_tool.html - look like the council one but for high level pages of the tool

CSS/SASS files in app>assets>sass>

  • application.scss - default GOV.UK css plus some we added for GOVUK forms
  • erc.scss - styles to support the council forms
  • sg.scss - style to support the Social Security Scotland and Scottish Government forms
  • other.scss - style for other forms

Each form has a folder app>views>forms>

Route.js app>

This file is key to introduce logic and validation to the forms. It is shared by all the forms.

Examples of template page

A GOV.UK page - desktop view



screenshot of a GOV.UK page - desktop view



A GOV.UK page - mobile view



screenshot of a GOV.UK page - mobileview



A basic council form



screenshot of a council page



A basic Scottish Government page



screenshotof a Scottish Government page



A basic Social Security page - desktop view



screenshot of Social Security - desktop vie



A basic Social Security page - mobile view



screenshot of applying for a provisional licence



The start page for: Apply for a provisional driving licence



screenshot of applying for a provisional licence - start page

About

Building a website to provide prototyped forms to support classes for people to learn digital skills

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • HTML 86.6%
  • JavaScript 7.1%
  • SCSS 4.7%
  • CSS 1.6%