alphagov · claireashworth · May 16, 2024 · May 7, 2024 · May 7, 2024 · May 7, 2024
diff --git a/source/changes-to-govuk-frontend-v5/index.html.md.erb b/source/changes-to-govuk-frontend-v5/index.html.md.erb
@@ -1,6 +1,6 @@
 ---
 title: Changes to GOV.UK Frontend v5.0.0
-weight: 5
+weight: 95
 ---
 
 # Changes to GOV.UK Frontend v5.0.0

diff --git a/source/configure-components/index.html.md.erb b/source/configure-components/index.html.md.erb
@@ -121,7 +121,7 @@ For example, when:
 * Component templates have missing changes from our release notes
 * Component JavaScript configuration does not match our documentation
 
-If our inline JavaScript snippet from [Import CSS, assets and JavaScript](../import-javascript/#before-you-start) was not added to the top of the `<body class="govuk-template__body">` section you'll see this error:
+If our inline JavaScript snippet from [Import JavaScript](../import-javascript/#before-you-start) was not added to the top of the `<body class="govuk-template__body">` section you'll see this error:
 
 ```
 SupportError: GOV.UK Frontend initialised without `<body class="govuk-frontend-supported">` from template `<script>` snippet

diff --git a/source/get-started/index.html.md.erb b/source/get-started/index.html.md.erb
@@ -1,98 +1,10 @@
 ---
 title: Get started
-weight: 20
+hide_from_sitemap: true
+hide_in_navigation: true
+prevent_indexing: true
 ---
 
 # Get started
 
-Get one GOV.UK Frontend component working in your application, so you can test everything works before you add more components or styles.
-
-You will need to do all the following steps to get your component working.
-
-1. Install GOV.UK Frontend.
-2. Add the HTML for a component to your application.
-3. Get the CSS working.
-4. Get the font and images working.
-5. Get the JavaScript working.
-
-## 1. Install
-
-[Install GOV.UK Frontend using npm](../installing-with-npm/).
-
-If you've installed using precompiled files, get started with [a basic page](../install-using-precompiled-files/#check-an-example-page) instead.
-
-## 2. Add the HTML for a component to your application
-
-Go to the [example accordion component](https://design-system.service.gov.uk/components/accordion/#accordion-example) on the GOV.UK Design System website, then copy the HTML.
-
-Paste the HTML into a page or template in your application.
-
-## 3. Get the CSS working
-
-1. Copy the `/node_modules/govuk-frontend/dist/govuk/govuk-frontend.min.css` file into your application.
-
-2. Add your CSS file to your page layout if you need to. For example:
-
-    ```html
-    <head>
-      <!-- // ... -->
-      <link rel="stylesheet" href="<YOUR-STYLESHEETS-FOLDER>/govuk-frontend.min.css">
-      <!-- // ... -->
-    </head>
-    ```
-
-3. Run your application and check that the accordion displays correctly.
-
-The accordion will use a generic font until you get the font and images working, and will not be interactive until you get the JavaScript working.
-
-There are also different ways you can [import GOV.UK Frontend's CSS](../import-css/), including into your project's main Sass file:
-
-    ```scss
-    @import "node_modules/govuk-frontend/dist/govuk/all";
-    ```
-
-## 4. Get the font and images working
-
-Your component will not use the right font or images until you've added GOV.UK Frontend's assets to your application.
-
-1. Copy the following 3 items:
-
-  - `/node_modules/govuk-frontend/dist/govuk/assets/images` folder to `<YOUR-APP>/assets/images`
-  - `/node_modules/govuk-frontend/dist/govuk/assets/fonts` folder to `<YOUR-APP>/assets/fonts`
-  - `/node_modules/govuk-frontend/dist/govuk/assets/manifest.json` file to `<YOUR-APP>/assets`
-
-2. Run your application, then use [the Fonts tab in Firefox Page Inspector](https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Edit_fonts#The_Fonts_tab) to check the accordion is using the GDS Transport font.
-
-In your live application, we recommend [using an automated task or your build pipeline](../import-font-and-images-assets/) instead of copying the files manually.
-
-## 5. Get the JavaScript working
-
-1. Add the following to the top of the `<body class="govuk-template__body">` section of your page template:
-
-    ```html
-    <script>document.body.className += ' js-enabled' + ('noModule' in HTMLScriptElement.prototype ? ' govuk-frontend-supported' : '');</script>
-    ```
-
-2. Copy the `/node_modules/govuk-frontend/dist/govuk/govuk-frontend.min.js` file into your application.
-
-3. Import the file before the closing `</body>` tag of your page template, then run the `initAll` function to initialise all the components. For example:
-
-    ```html
-    <body class="govuk-template__body">
-      <!-- // ... -->
-      <script type="module" src="<YOUR-JAVASCRIPTS-FOLDER>/govuk-frontend.min.js"></script>
-      <script type="module">
-        import { initAll } from '<YOUR-JAVASCRIPTS-FOLDER>/govuk-frontend.min.js'
-        initAll()
-      </script>
-    </body>
-    ```
-
-4. Run your application and check it works the same way as the Design System accordion example, by selecting the buttons and checking the accordion shows and hides sections.
-
-In your live application:
-
-- you must use `initAll` to initialise all components that use GOV.UK Frontend's JavaScript, or some components will not work correctly for disabled users who use assistive technologies
-- we recommend [using an automated task or your build pipeline](../import-javascript/) instead of copying the files manually
-
-You can now get the full code for page layouts and other components from the [Design System website](https://design-system.service.gov.uk/).
+This page has been archived. The guidance for getting CSS and JavaScript working can now be found on the page [Install with Node.js package manager](../installing-with-npm/)
diff --git a/source/index.html.md.erb b/source/index.html.md.erb
@@ -5,13 +5,18 @@ weight: 0
 
 # GOV.UK Frontend
 
+GOV.UK Frontend provides the elements developers need to create consistent, easy to use, fast and secure government services.
+
 Use this technical documentation to find out how to:
 
-- install GOV.UK Frontend
-- set up a test page to check your installation is working
-- configure components and use the API references
-- use previous versions of GOV.UK Frontend
+- [install GOV.UK Frontend](/installing-with-npm/)
+- [use Nunjucks](/use-nunjucks/) as an option to generate the HTML for pages and components
+- [configure components](/configure-components/) to customise their behaviour
+- use the [JavaScript API reference](/javascript-api-reference/) and the [Sass API reference](/sass-api-reference/)
+- use previous versions of GOV.UK Frontend such as [GOV.UK Frontend v4.x](/v4/)
+
+You can also use the option to [copy and install precompiled files](/install-using-precompiled-files/) to test how GOV.UK Frontend works in your application.
 
-You can see live examples of GOV.UK Frontend components, and guidance on when to use them in your service, in the [GOV.UK Design System](https://design-system.service.gov.uk/).
+There are live examples of GOV.UK Frontend components, and guidance on using them in your service, in the [GOV.UK Design System](https://design-system.service.gov.uk/).
 
 [Contact us](https://design-system.service.gov.uk/get-in-touch/) if you have any questions or feedback.
diff --git a/source/install-using-precompiled-files/index.html.md.erb b/source/install-using-precompiled-files/index.html.md.erb
@@ -5,14 +5,14 @@ old_paths:
   - /installing-from-dist/index.html
 ---
 
-# Install using precompiled files
+# Try GOV.UK Frontend using precompiled files
 
 You can install GOV.UK Frontend by copying our CSS, JavaScript and asset files into your project. If you install this way, you can try GOV.UK Frontend in your application without having to make many changes.
 
 <%= warning_text('In your live application, you should <a href="/installing-with-npm/">install with Node.js package manager (npm)</a> instead.
 ') %>
 
-## What you cannot do after installing
+## What you cannot do with the precompiled files
 
 You’ll not be able to:
 
@@ -21,15 +21,15 @@ You’ll not be able to:
 - import an individual component’s CSS or JavaScript
 - use GOV.UK Frontend's colours or mixins in your custom code
 
-## Copy the files
+## Copy and install the precompiled files
 
 1. Download the `release-<VERSION-NUMBER>.zip` file at the bottom of the [latest GOV.UK Frontend release note](https://github.com/alphagov/govuk-frontend/releases/latest).
 2. Unzip the zip file.
 3. Copy the `assets` folder to the root of your project’s public folder. This is so, for example, `<YOUR-SITE-URL>/assets/images/govuk-crest.png` shows the `govuk-crest.png` image in your users’ browsers.
 4. Copy the `.css` and `.css.map` files to a stylesheets folder in the root of your project’s public folder. This is so, for example, `<YOUR-SITE-URL>/stylesheets/govuk-frontend-<VERSION-NUMBER>.min.css` shows the CSS file in your users’ browsers.
 5. Copy the `.js` and `.js.map` files to a JavaScripts folder in the root of your project’s public folder. This is so, for example, `<YOUR-SITE-URL>/javascripts/govuk-frontend-<VERSION-NUMBER>.min.js` shows the JavaScript file in your users’ browsers.
 
-## Check an example page
+## Create an example page to check for errors
 
 1. Create a page in your project using the following HTML (in your live application, you should use the [Design System page template](https://design-system.service.gov.uk/styles/page-template/) instead):
 
@@ -54,7 +54,7 @@ You’ll not be able to:
     </html>
     ```
 
-2. Replace `<VERSION-NUMBER>` so the 3 filenames match the files you [copied from GOV.UK Frontend's GitHub repo](#copy-the-files).
+2. Replace `<VERSION-NUMBER>` so the 3 filenames match the files you [copied from GOV.UK Frontend's GitHub repo](#copy-and-install-the-precompiled-files).
 
 3. Go to the [example accordion component](https://design-system.service.gov.uk/components/accordion/#accordion-example) on the Design System website and copy the HTML from the first example.
 
@@ -64,4 +64,7 @@ You’ll not be able to:
 
 You can now get the full code for page layouts and other components from the [Design System website](https://design-system.service.gov.uk/).
 
-If the accordion does not work, you can [find out more about how to import GOV.UK Frontend's CSS and JavaScript](../import-javascript/).
+If the accordion does not work, you can find out more about how to import GOV.UK Frontend's CSS and JavaScript in:
+
+- [Import CSS](../import-css/)
+- [Import JavaScript](../import-javascript/)
diff --git a/source/installing-with-npm/index.html.md.erb b/source/installing-with-npm/index.html.md.erb
@@ -19,9 +19,9 @@ weight: 10
 
 3. Install [Dart Sass](https://www.npmjs.com/package/sass) - version 1.0.0 or higher.
 
-    If you're using Dart Sass 1.33.0 or greater, you may see deprecation warnings when compiling your Sass. You can [silence deprecation warnings caused by dependencies](../import-css/#silence-deprecation-warnings-from-dependencies-in-dart-sass) if required.
+    If you're using Dart Sass 1.33.0 or greater, you might see deprecation warnings when compiling your Sass. If required, you can [silence deprecation warnings caused by dependencies](../import-css/#silence-deprecation-warnings-from-dependencies-in-dart-sass).
 
-    Do not use either LibSass or Ruby Sass, which are deprecated, for new projects.
+    Do not use either LibSass or Ruby Sass for new projects as they are deprecated in GOV.UK Frontend.
 
     Although GOV.UK Frontend currently supports LibSass (version 3.3.0 and above) and Ruby Sass (version 3.4.0 and above), we will remove support in future. If you're using either of these Sass compilers, you should [migrate to Dart Sass](https://sass-lang.com/blog/libsass-is-deprecated#how-do-i-migrate) as soon as you reasonably can.
 
@@ -37,4 +37,80 @@ npm install govuk-frontend --save
 
 When the installation finishes, the `govuk-frontend` package will be in your `node_modules` folder.
 
-You should now get started by [getting the CSS, assets and JavaScript working](../get-started/) with one GOV.UK Frontend component.
+## Get the CSS, Assets and JavaScript working
+
+Add the HTML for a component to your application. We recommend the accordion component as this makes it easier to spot if JavaScript is not working.
+
+Go to the [example accordion component](https://design-system.service.gov.uk/components/accordion/#accordion-example) on the GOV.UK Design System website, then copy the HTML.
+
+Paste the HTML into a page or template in your application.
+
+### Get the CSS working
+
+1. Copy the `/node_modules/govuk-frontend/dist/govuk/govuk-frontend.min.css` file into your application.
+
+2. Add your CSS file to your page layout if you need to. For example:
+
+    ```html
+    <head>
+      <!-- // ... -->
+      <link rel="stylesheet" href="<YOUR-STYLESHEETS-FOLDER>/govuk-frontend.min.css">
+      <!-- // ... -->
+    </head>
+    ```
+
+3. Run your application and check that the accordion displays correctly.
+
+The accordion will use a generic font until you get the font and images working, and will not be interactive until you get the JavaScript working.
+
+There are also different ways you can [import GOV.UK Frontend's CSS](../import-css/), including into your project's main Sass file:
+
+    ```scss
+    @import "node_modules/govuk-frontend/dist/govuk/all";
+    ```
+
+### Get the font and images working
+
+Your component will not use the right font or images until you've added GOV.UK Frontend's assets to your application.
+
+1. Copy the following 3 items:
+
+  - `/node_modules/govuk-frontend/dist/govuk/assets/images` folder to `<YOUR-APP>/assets/images`
+  - `/node_modules/govuk-frontend/dist/govuk/assets/fonts` folder to `<YOUR-APP>/assets/fonts`
+  - `/node_modules/govuk-frontend/dist/govuk/assets/manifest.json` file to `<YOUR-APP>/assets`
+
+2. Run your application, then use [the Fonts tab in Firefox Page Inspector](https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Edit_fonts#The_Fonts_tab) to check the accordion is using the GDS Transport font.
+
+In your live application, we recommend [using an automated task or your build pipeline](../import-font-and-images-assets/) instead of copying the files manually.
+
+### Get the JavaScript working
+
+1. Add the following to the top of the `<body class="govuk-template__body">` section of your page template:
+
+    ```html
+    <script>document.body.className += ' js-enabled' + ('noModule' in HTMLScriptElement.prototype ? ' govuk-frontend-supported' : '');</script>
+    ```
+
+2. Copy the `/node_modules/govuk-frontend/dist/govuk/govuk-frontend.min.js` file into your application.
+
+3. Import the file before the closing `</body>` tag of your page template, then run the `initAll` function to initialise all the components. For example:
+
+    ```html
+    <body class="govuk-template__body">
+      <!-- // ... -->
+      <script type="module" src="<YOUR-JAVASCRIPTS-FOLDER>/govuk-frontend.min.js"></script>
+      <script type="module">
+        import { initAll } from '<YOUR-JAVASCRIPTS-FOLDER>/govuk-frontend.min.js'
+        initAll()
+      </script>
+    </body>
+    ```
+
+4. Run your application and check it works the same way as the Design System accordion example, by selecting the buttons and checking the accordion shows and hides sections.
+
+In your live application:
+
+- use `initAll` to initialise all components that use GOV.UK Frontend's JavaScript, or some components will not work correctly for disabled users who use assistive technologies
+- we recommend [using an automated task or your build pipeline](../import-javascript/) instead of copying the files manually
+
+Once your testing is complete you can use the full code for page layouts and other components from the [Design System website](https://design-system.service.gov.uk/).
diff --git a/source/staying-up-to-date/index.html.md.erb b/source/staying-up-to-date/index.html.md.erb
@@ -138,6 +138,6 @@ npm install govuk-frontend@next
 
 ### Updating to the latest version if you installed GOV.UK Frontend using precompiled files
 
-Follow the [instructions for installing using precompiled files](/install-using-precompiled-files/), replacing any files that already exist.
+Follow the instructions on the page ['Try GOV.UK Frontend using precompiled files'](/install-using-precompiled-files/), replacing any files that already exist.
 
 You should also remove older versions of the precompiled CSS and JavaScript, and any other files that no longer exist in the latest release.