docs: refactor getting-started codelab to be based on sample app

.gitignore

@@ -9,3 +9,4 @@ build-debug.log
 *.komodoproject
 /nbproject/private/
 tsdoc-metadata.json
+.vscode

packages/docs/docs/codelabs/getting-started/add-blockly-libraries.mdx

@@ -4,43 +4,26 @@ description: How to add Blockly libraries to an app.
 
 # Getting started with Blockly
 
-## 4. Add Blockly libraries
+## 3. Add Blockly libraries
 
-Now that you know what you'll be building, you need to add Blockly dependencies to your app.
+To start, you'll need to add Blockly dependencies to your app.
 
-Blockly releases are [published on npm](https://www.npmjs.com/package/blockly) on a quarterly basis. For this codelab you will import blockly using [unpkg](https://unpkg.com), which lets you import all of the files you need with a single script tag.
+Blockly releases are [published on npm](https://www.npmjs.com/package/blockly) regularly.
+There are multiple ways to use Blockly in your project, but for this codelab you will be installing Blockly with npm. 
 
-### Add the script tag
+### Install dependencies and run your app
 
-Open `starter-code/index.html` in a text editor and scroll to the end. You can see two script tags:
+For this codelab, you'll use npm to run your app. Use the following instructions
 
-```html
-<script src="scripts/music_maker.js"></script>
-<script src="scripts/main.js"></script>
-```
+1. Install [node.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm) if you haven't already.
+2. Navigate to the starter code folder `packages/docs/docs/codelabs/getting-started/starter-code/` 
+in your terminal.
+3. Run `npm install` in your terminal. npm install will install the necessary dependencies that are defined in package.json, including Blockly. 
+4. Run `npm start` in your terminal. 
 
-Add Blockly just before these two scripts. The order is important, because you will use Blockly objects later in `main.js`. Your imports should now look like this:
-
-```html
-<script src="https://unpkg.com/blockly/blockly_compressed.js"></script>
-<script src="https://unpkg.com/blockly/blocks_compressed.js"></script>
-<script src="https://unpkg.com/blockly/javascript_compressed.js"></script>
-<script src="https://unpkg.com/blockly/msg/en.js"></script>
-<script src="scripts/music_maker.js"></script>
-<script src="scripts/main.js"></script>
-```
-
-### Default imports
-
-Importing Blockly this way loads four default modules.
-
-- Blockly core: The main Blockly library, which defines the basic Blockly UI and logic.
-- Built-in block definitions: Common blocks such as loops, logic, math, and string manipulation.
-- The JavaScript generator: Converts blocks into JavaScript, and contains block generators for all built-in blocks.
-- English language files: String tables for all messages on built-in blocks and the Blockly UI, in English.
+After following these steps, a browser page should open automatically, or you can copy-paste the address that includes `localhost` into your browser. 
+The page should be blank. Don't worry, we'll add in our Blockly workspace in the following step.
 
 ### Alternate imports
 
-There are many ways to import a library in JavaScript, and this tutorial does not cover all of them. For samples that show how to integrate Blockly in your project, look at the `examples` folder in [blockly-samples](https://github.com/RaspberryPiFoundation/blockly-samples).
-
-You can also define your imports more carefully to get [different generators](https://www.npmjs.com/package/blockly#blockly-generators) and [locales](https://www.npmjs.com/package/blockly#blockly-languages).
+There are many ways to import a library in JavaScript, and this tutorial does not cover all of them. For samples that show how to integrate Blockly in your project, look at the `examples` folder in [blockly-samples](https://github.com/RaspberryPiFoundation/blockly-samples).

packages/docs/docs/codelabs/getting-started/codelab-overview.mdx

@@ -23,24 +23,19 @@ Blockly includes everything you need for defining and rendering blocks in a drag
 
 ### What you'll build
 
-MusicMaker, a web app where you can program buttons to play different sounds, using Blockly.
+A version of Blockly's sample app, built from scratch. 
 
 <Image
-  src="/images/codelabs/getting-started/play_mode.png"
-  alt="image"
-  className="codelabImage"
-/>
-
-<Image
-  src="/images/codelabs/getting-started/d4_three_times.png"
-  alt="image"
+  src="/images/codelabs/getting-started/full_page_finished.png"
+  alt="Blockly workspace with a toolbox, blocks, and a code preview window that shows code generated from blocks in the workspace."
   className="codelabImage"
 />
 
 ### What you'll need
 
 - A browser
 - A text editor
+- npm installed ([instructions](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)).
 - Basic knowledge of HTML, CSS and JavaScript
 
 This codelab is focused on Blockly. The app structure, non-relevant concepts and code are glossed over and are provided for you to simply copy and paste.