Add guide for creating new prototypes (using the GitHub template)

app/install.md

@@ -2,6 +2,10 @@
 layout: hub
 title: Get started
 groups:
+  - title: Creating a new prototype
+    items: collections.setup
+    clickable: true
+    columns: 3
   - title: Installing the kit on your computer
     items: collections.install-local
     clickable: true

app/install/_partials/download.md

@@ -1,4 +1,8 @@
-## 1. Create a folder
+## 1. Create a new prototype on GitHub
+
+Follow the [Create a new prototype guide](/install/creating-a-new-prototype/) to create a new prototype using the template.
+
+## 2. Create a folder
 
 {% if slug == "windows" %}
 Create a folder called <kbd>Projects</kbd> in your <samp>Documents</samp> folder.
@@ -8,32 +12,10 @@ Create a folder called <kbd>Projects</kbd> in your home folder.
 You can open your home folder by opening a new finder window and selecting <kbd><samp>Go</samp></kbd> and then <kbd><samp>Home</samp></kbd> from the top menu.
 {% endif %}
 
-## 2. Download the kit
-
-The simplest way to get the kit is to [download it as a ZIP]({{downloadUrl}}).
-
-You'll use a new copy of the kit for each new prototype you make. That way your prototypes don't interfere with each other.
-
-## 3. Unzip the kit
-
-Unzip the kit you downloaded. It should be in your <samp>Downloads</samp> folder.
-
-You should end up with a ZIP file called <samp>nhsuk-prototype-kit</samp> followed by the version number.
-
-Unpack that ZIP file by double clicking on it. You should then see another folder named <samp>nhsuk-prototype-kit</samp> followed by the version number.
-
-![Screenshot of the opened zip file](/assets/images/install/{{slug}}/download-unzip.png)
-
-## 4. Rename the folder
-
-Rename the unpacked folder to something descriptive for your prototype.
-
-For this guide, call the folder <kbd>find-a-pharmacy</kbd>
-
-![Screenshot of the renamed folder.](/assets/images/install/{{slug}}/download-rename.png)
+## 3. Download your prototype
 
-## 5. Move the folder
+The simplest way to download your prototype is to use the [GitHub Desktop](https://desktop.github.com/download/) application. Once you install this you can click on the ‘Code’ button on your project on GitHub, and then click ‘Open with GitHub Desktop’.
 
-Move the folder into the <samp>Projects</samp> folder you created in step 1.
+Alternatively if you use Visual Studio Code you can open a new window and select ‘Clone Git Repository’ and then paste in the URL of your prototype on GitHub.
 
-![Screenshot of the projects folder.](/assets/images/install/{{slug}}/download-move.png)
+You can also click the ‘Code’ button and select the ‘Download ZIP’ option – however if you do this you will not be able to synchronies your changes as easily.

app/install/advanced.md

@@ -12,11 +12,11 @@ The kit is built on the [Express](http://expressjs.com/) framework, and uses [NH
 
 [Node.js](https://nodejs.org) version 20 or higher.
 
-## Download the kit
+## Create a new prototype
 
-The simplest way to get the kit is to [download it as a zip]({{downloadUrl}}).
+The best way to create a new prototype is to [use the template repository on GitHub](/install/creating-a-new-prototype/).
 
-You can also clone or download a copy from [GitHub](https://github.com/nhsuk/nhsuk-prototype-kit).
+If you do not want to use GitHub you can [download it as a zip]({{downloadUrl}}) instead.
 
 ## Install dependencies
 

app/install/codespaces.md

@@ -16,7 +16,7 @@ This avoids the need to install Node.js on your computer. Instead, you will run
 
 You do not need any technical knowledge to use this guide.
 
-You will need a [GitHub account](https://github.com/signup?ref_cta=Sign+up&ref_loc=header+logged+out).
+You will need a [GitHub account](https://github.com/signup?ref_cta=Sign+up&ref_loc=header+logged+out) and should have already followed the guide to [create a new prototype](/install/creating-a-new-prototype/).
 
 We will show you how to:
 

app/install/codespaces/create-a-codespace.md

@@ -1,22 +1,11 @@
 ---
 title: Create a codespace
 caption: "Step 1 of 2: Codespaces"
-description: To use the kit within a Codespace you will first need to create one.
 ---
 
-## 1. Create a new prototype
+Before following this guide you should already have [created your prototype](/install/creating-a-new-prototype/) on GitHub.
 
-To create a new prototype, visit the [NHS prototype kit on GitHub](https://github.com/nhsuk/nhsuk-prototype-kit), click the <kbd><samp>Use this template</samp></kbd> button and select <kbd><samp>Create a new repository</samp></kbd>.
-
-You'll then be taken to a screen where you can enter a repository name -- this should be the name of the service you are prototyping. You can change this later if you are not yet sure of the name.
-
-You can also enter an optional description. You do not need to select the <kbd><samp>Include all branches</samp></kbd> checkbox.
-
-You can choose to make your prototype public or private. This can also be changed later.
-
-Click <kbd><samp>Create repository</samp></kbd> when you are ready. This will create a copy of the NHS prototype kit which you can then edit.
-
-## 2. Create a new codespace
+## 1. Create a new codespace
 
 On every GitHub repository page is a <samp>Code</samp> button which is used to get a copy of or to use the code held within the git repository.
 
@@ -28,15 +17,15 @@ Next click on the <kbd><samp>Create codespace on main</samp></kbd> button. This
 
 The <samp>Create codespace on main</samp> button will either be shown as a large button or a small plus symbol after the label <samp>your workspaces in the cloud</samp>.
 
-## 3. Wait for the Codespace setup to finish
+## 2. Wait for the Codespace setup to finish
 
 The Codespace will open in a new tab (or window) and begin the setup process.
 
 You will see an interface building with a progress message showing that the space (known as a 'container') is being created or rebuilt.
 
 This can take between 30 seconds and 5 minutes.
 
-## 4. Check that it has worked
+## 3. Check that it has worked
 
 Once the Codespace has been created, you will then see the 'terminal' tab with commands being exectuted to start the prototype kit.
 

app/install/creating-a-new-prototype.md

@@ -0,0 +1,32 @@
+---
+eleventyNavigation:
+  key: Creating a new prototype
+title: Creating a new prototype
+description: Use the template on the GitHub website.
+
+order: 1
+tags:
+  - setup
+---
+
+You will first need to create a free GitHub account if you do not already one, and sign in.
+
+Then visit the [NHS prototype kit on GitHub](https://github.com/nhsuk/nhsuk-prototype-kit), click the ‘Use this template’ button and select ‘Create a new repository’:
+
+![Screenshot showing a page on the GitHub.com website with the title ‘nhsuk-prototype-kit’. There are 2 green buttons on the page, one is labelled ‘Use this template’ and is circled in red, the other is labelled ‘Code’ and is not circled.](/assets/images/install/creating-a-new-prototype/use-this-template.png)
+
+You'll then be taken to a screen where you can enter some details about your project:
+
+![Screenshow showing a page on the GitHub.com website titled ‘Create a new repository’. It shows ‘Start with a template: nhsuk-prototype-kit’ and then has 4 fields grouped under ‘General’ and ‘Configuration’ followed by a green button labelled ‘Create repository’.](/assets/images/install/creating-a-new-prototype/github-create-new-repository.png)
+
+Here’s how to complete the fields:
+
+* **Include all branches**: leave this in the ‘off’ setting
+* **Owner**: this should be the name of the organisation you are working for. If you have not yet been added to your organisation on GitHub you should ask to be added.
+* **Repository name**: this should be the name of the service you are prototyping. You can change this later if you are not yet sure of the name. By convention it is lowercase and uses hyphens instead of spaces. Add the suffix `-prototype` to make it clear to others in your organisation that it is a prototype.
+* **Description**: this is optional and you can leave it blank for now, or enter a short description of what the service you are prototyping will do.
+* **Choose visibility**: You can choose to make your prototype code public or private. This can be changed later.
+
+Click the ‘Create repository’ button when you are ready. This will create a copy of the NHS prototype kit for your new prototype.
+
+You can then run and edit the prototype either on your computer or in the cloud. See [Get started](/install) for guides to both options.

app/install/mac/download.md

@@ -1,5 +1,5 @@
 ---
-title: Download and decide where to keep your prototypes
+title: Download and decide where to keep your prototype
 order: 4
 ---
 

app/install/windows/download.md

@@ -1,5 +1,5 @@
 ---
-title: Download and decide where to keep your prototypes
+title: Download and decide where to keep your prototype
 order: 4
 ---