Add tutorial for creating a basic prototype (based on GOV.UK one)

app/config.js

@@ -3,7 +3,6 @@
 module.exports = {
   // Service name
   serviceName: 'Prototype kit',
-
   // Port to run nodemon on locally
   port: 2000,
 

app/views/base/check-your-answers.html

@@ -0,0 +1,162 @@
+{% extends 'layout.html' %}
+
+{% set mainClasses = "nhsuk-main-wrapper--s" %}
+
+{% block pageTitle %}
+  Check your answers template - NHS.UK prototype kit
+{% endblock %}
+
+{% block beforeContent %}
+  {{ backLink({
+    "href": "/templates/start-page",
+    "text": "Back"
+  }) }}
+{% endblock %}
+
+{% block content %}
+  <div class="nhsuk-grid-row">
+    <div class="nhsuk-grid-column-two-thirds">
+
+      <h1 class="nhsuk-heading-l">
+        Check your answers before sending your application
+      </h1>
+
+      <h2 class="nhsuk-heading-m">
+        Personal details
+      </h2>
+
+      {{ summaryList({
+        rows: [
+          {
+            key: {
+              text: "NHS number"
+            },
+            value: {
+              text: "485 777 3456"
+            },
+            actions: {
+              items: [
+                {
+                  href: "#",
+                  text: "Change",
+                  visuallyHiddenText: "NHS number"
+                }
+              ]
+            }
+          },
+          {
+            key: {
+              text: "Name"
+            },
+            value: {
+              text: "Kevin Francis"
+            },
+            actions: {
+              items: [
+                {
+                  href: "#",
+                  text: "Change",
+                  visuallyHiddenText: "name"
+                }
+              ]
+            }
+          },
+          {
+            key: {
+              text: "Date of birth"
+            },
+            value: {
+              html: "15 March 1984"
+            },
+            actions: {
+              items: [
+                {
+                  href: "#",
+                  text: "Change",
+                  visuallyHiddenText: "date of birth"
+                }
+              ]
+            }
+          },
+          {
+            key: {
+              text: "Home address"
+            },
+            value: {
+              html: '8 Bridgewater Place<br>Leeds<br>LS11 5BZ'
+            },
+            actions: {
+              items: [
+                {
+                  href: "#",
+                  text: "Change",
+                  visuallyHiddenText: "home address"
+                }
+              ]
+            }
+          }
+        ]
+      }) }}
+
+      <h2 class="nhsuk-heading-m">
+        Medical details
+      </h2>
+
+      {{ summaryList({
+        rows: [
+          {
+            key: {
+              text: "Allergies"
+            },
+            value: {
+              text: "No allergies"
+            },
+            actions: {
+              items: [
+                {
+                  href: "#",
+                  text: "Change",
+                  visuallyHiddenText: "allergies"
+                }
+              ]
+            }
+          },
+          {
+            key: {
+              text: "Conditions"
+            },
+            value: {
+              html: "Asthma <br> Disabilities, including physical and learning disabilities"
+            },
+            actions: {
+              items: [
+                {
+                  href: "#",
+                  text: "Change",
+                  visuallyHiddenText: "conditions"
+                }
+              ]
+            }
+          }
+        ]
+      }) }}
+
+      <h2 class="nhsuk-heading-m">
+        Now send your application
+      </h2>
+
+      <p>
+        By submitting this notification you are confirming that, to the best of your knowledge, the details you are providing are correct.
+      </p>
+
+      <p>
+        Your details with be sent to Rose Medical Practice to begin your registration.
+      </p>
+
+      <a href="/templates/confirmation-page" class="nhsuk-button">
+        Accept and send registration
+      </a>
+
+    </div>
+  </div>
+{% endblock %}

app/views/base/confirmation-page.html

@@ -0,0 +1,39 @@
+{% extends 'layout.html' %}
+
+{% block pageTitle %}
+  Confirmation page template - NHS.UK prototype kit
+{% endblock %}
+
+{% block content %}
+  <div class="nhsuk-grid-row">
+    <div class="nhsuk-grid-column-two-thirds">
+
+      <div class="nhsuk-card nhsuk-card--confirmation nhsuk-u-margin-top-0 nhsuk-u-margin-bottom-4">
+
+        <div class="nhsuk-card__content">
+
+          <h1 class="nhsuk-card__title nhsuk-u-margin-bottom-4">
+            Application complete
+          </h1>
+
+          <p class="nhsuk-u-font-size-24">
+            Your reference number
+            <br>
+            <strong class="nhsuk-u-font-size-32">HDJ2123F</strong>
+          </p>
+
+        </div>
+
+      </div>
+
+      <p>We have sent you a confirmation email.</p>
+
+      <h2>What happens next</h2>
+
+      <p>Tell the user what happens next.</p>
+
+      <p>Go back to <a href="/page-templates">page templates<a>.</p>
+
+    </div>
+  </div>
+{% endblock %}

app/views/base/content-page.html

@@ -0,0 +1,32 @@
+{% extends 'layout.html' %}
+
+{% block pageTitle %}
+  Content page template - NHS.UK prototype kit
+{% endblock %}
+
+{% block beforeContent %}
+  {{ breadcrumb({
+    href: "/",
+    text: "Home"
+  }) }}
+{% endblock %}
+
+{% block content %}
+  <div class="nhsuk-grid-row">
+
+    <div class="nhsuk-grid-column-two-thirds">
+
+      <h1>
+        Page heading goes here
+      </h1>
+
+      <p>
+        Visit the 
+          <a href="https://service-manual.nhs.uk">NHS digital service manual</a> 
+        for guidance and code examples.
+      </p>
+
+    </div>  
+
+  </div>
+{% endblock %}

app/views/base/question-page.html

@@ -0,0 +1,56 @@
+{% extends 'layout.html' %}
+
+{% set mainClasses = "nhsuk-main-wrapper--s" %}
+
+{% block pageTitle %}
+  Question page
+{% endblock %}
+
+{% block beforeContent %}
+  {{ backLink({
+    "href": "/templates/start-page",
+    "text": "Back"
+  }) }}
+{% endblock %}
+
+{% block content %}
+  <div class="nhsuk-grid-row">
+    <div class="nhsuk-grid-column-two-thirds">
+
+      <form action="/templates/check-your-answers" method="post" class="form">
+
+        {{ radios({
+          "idPrefix": "example",
+          "name": "example",
+          "fieldset": {
+            "legend": {
+              "text": "Heading or question goes here",
+              "classes": "nhsuk-fieldset__legend--l",
+              "isPageHeading": true
+            }
+          },
+          "items": [
+            {
+              "value": "yes",
+              "text": "Yes"
+            },
+            {
+              "value": "no",
+              "text": "No"
+            }
+          ]
+        }) }}
+
+        {{ button({
+          "text": "Continue",
+          "id": "btn_submit"
+        }) }}
+
+        <p>(See the <a href="https://service-manual.nhs.uk/design-system/components">NHS digital service manual</a> for examples.)</p>
+
+      </form>
+
+    </div>
+  </div>
+
+{% endblock %}

app/views/base/start-page.html

@@ -0,0 +1,44 @@
+{% extends 'layout.html' %}
+
+{% block pageTitle %}
+  Start page template - NHS.UK prototype kit
+{% endblock %}
+
+{% block beforeContent %}
+{{ breadcrumb({
+  href: "/",
+  text: "Home"
+}) }}
+{% endblock %}
+
+{% block content %}
+  <div class="nhsuk-grid-row">
+    <div class="nhsuk-grid-column-two-thirds">
+
+      <h1>
+        Service name goes here
+      </h1>
+
+      <p>Use this service to:</p>
+
+      <ul>
+        <li>do something</li>
+        <li>update your name, address or other details</li>
+        <li>do something else</li>
+      </ul>
+
+      <p>Registering takes around 5 minutes.</p>
+
+
+      <h2 class="nhsuk-heading-m">Before you start</h2>
+
+      <p>You can only use this service if you live in the UK.</p>
+
+      <a href="/templates/question-page" class="nhsuk-button">
+        Start now
+      </a>
+
+    </div>
+
+  </div>
+{% endblock %}

app/views/how-tos/index.html

@@ -20,6 +20,40 @@ <h1>How to guides</h1>
 
       <p class="nhsuk-lede-text">These guides will show you how to use the prototype kit, from creating a simple page to building complex user journeys.</p>
 
+      <h2>Get started</h2>
+      <ul class="nhsuk-list">
+        <li>
+          <a href="/how-tos/make-first-prototype/start">Build a basic prototype</a>
+          <ol class="nhsuk-list nhsuk-list--number">
+            <li>
+              <a href="/how-tos/make-first-prototype/open-prototype-in-editor">Open your prototype in your editor</a>
+            </li>
+            <li>
+              <a href="/how-tos/make-first-prototype/create-pages">Create pages</a>
+            </li>
+            <li>
+              <a href="/how-tos/make-first-prototype/link-pages-together">Link your pages together</a>
+            </li>
+            <li>
+              <a href="/how-tos/make-first-prototype/use-components">Use components from the Design System</a>
+            </li>
+            <li>
+              <a href="/how-tos/make-first-prototype/show-users-answers">Show the user's answers</a>
+            </li>
+            <li>
+              <a href="/how-tos/make-first-prototype/let-user-change-answers">Let the user change their answers</a>
+            </li>
+            <li>
+              <a href="/how-tos/make-first-prototype/branching">Show different pages depending on user input (branching)</a>
+            </li>
+            <li>
+              <a href="/how-tos/make-first-prototype/link-index-page-start-page">Link your index page to your start page</a>
+            </li>
+          </ol>
+        </li>
+      </ul>
+
+
       <h2>Learn the basics</h2>
 
       <ul class="nhsuk-list">