Tutorials and guides

Tutorials

Download and install

• Getting started on the Prototype Kit
  • Create a prototype
  • How to run the kit
• Getting started - advanced guide

Get started

• Build a basic prototype
  1. Open your prototype in your editor
  2. Create pages
  3. Understand basic HTML
  4. Link your pages together
  5. Use components from the Design System
  6. Show the user's answers
  7. Let the user change their answers
  8. Show different pages depending on user input (branching)
  9. Link your index page to your start page

Basic usage

• Create pages from templates
• Add or change Nunjucks components
• How to use layouts
• Install and use plugins
• Share usage data
• Add CSS, JavaScript, images and other files
• Store your code online with GitHub and GitHub Desktop
  • Store your new prototype in GitHub
  • Download an existing prototype from GitHub
  • Collaborate on prototypes using GitHub Desktop
• Set up Git using terminal
• Publish your prototype online
• Pass data from page to page
• Change the content within a page based on a user's answers
• Update to the latest version of the Prototype Kit
• Use error messages in the kit
• Run multiple prototypes

Advanced usage

• Create routes (server side programming)
• Branching journeys
• Use filters to change how answers appear
• Use filters to add dates
• Change the service name on one page
• Store data in session
• Use GOV.UK Notify to prototype emails and text messages
• Template partial areas
• Migrate an existing prototype to version 13

Creating plugins

• Create a plugin
• Tutorial - Create your first plugin
• Configure your plugin

GOV.UK Design System

GOV.UK Design System is a guide to making your prototype look like a GOV.UK service, including typography, forms and more.