updated page

content/hands-on.md

@@ -5,17 +5,13 @@ nav_order: 3
 has_children: true
 ---
 
-# Hands On: Build Your Own Web Map
+# Hands On
 
-Before we start working on our map, let’s put things into perspective: This is an introductory workshop meant to get you started with the tools and skills to move forward on your own. Within the greater web mapping ecosystem context, we’re touching on the essentials. To give you an idea of where this workshop fits into that ecosystem, take a look at [this diagram from Maptime](https://maptime.io/anatomy-of-a-web-map/#84). Note the .html document and the internet browser.
+This section will guide you through building an interactive web map powered by Leaflet. To begin, we will look at the code that loads a basemap in order to understand what each element does. Next, we will add data to this basemap and, building upon the given code to create an interactive map visualizing buildings on UBC-V Campus. 
 
-## Set-up
+## Open Data in Code Editor
+Open Visual Studio Code (VS Code). Open your unzipped `intro-leaflet-data`  folder with VS Code. Do not click into the folder, but rather select the entire folder to be opened with VS Code. Once opened, you should see two files in the Explorer panel of your code editor. These are the data file and the map boilerplate.
 
-If you haven't already, download the workshop data now and **extract the contents of the .zip file**.
-[Download Data](./intro-leaflet-data.zip){: .btn .btn-blue }
-
-In addition, we'll use two pieces of software: a web browser, which will render/display your map, and a source code editor to edit that map.
-
-## Development Environment
-
-First things first, let's set up your development environment with the two pieces of software, and a method for you to access them both efficiently. One option is to split your screen in half - web browser on one side and the code editor on another. Or, you can move from one application tab to another by minimizing windows. It's totally your call, and the point is to find out what works best for you.
+![opening folder in vs code](./vscode-open-folder_20240212.png)
+
+![folder open](./vscode-folder-open_20240418.png)