From 63c0fa39d2286ef417d389dce13c42c0a38093b1 Mon Sep 17 00:00:00 2001
From: kmaglo-um <kmaglo@umich.edu>
Date: Mon, 11 May 2026 13:35:28 -0400
Subject: [PATCH 01/12] Updated starter project

---
 src/content/docs/teleop/starter-project.md | 621 +++++++++++----------
 1 file changed, 322 insertions(+), 299 deletions(-)

diff --git a/src/content/docs/teleop/starter-project.md b/src/content/docs/teleop/starter-project.md
index f5a99d6..63ee5ad 100644
--- a/src/content/docs/teleop/starter-project.md
+++ b/src/content/docs/teleop/starter-project.md
@@ -2,433 +2,456 @@
 title: "Teleop Starter Project"
 ---
 
-#**OUT OF DATE**
+#**IN PROGRESS**
 
 # Introduction
 
-This project will involve building an ArmControls component on a testing view, connecting that to the backend, then using the simulator and the THREE.js component to verify the implementation. 
+Here, you will complete a Vue component by:
+* Creating page elements
+* Formatting page elements
+* Importing other components (ArmControls and Rover3D)
+* Sending/receiving messages to/from the backend
 
-Any spot marked with a ```TODO``` indicates that code should be added there. 
-
-Please make sure you understand what you are adding when you add it and ask questions as you go. This project is solely for your learning so take as much time as you need to understand what is actually happening as you go through it.
+The tasks you complete in this project will be similar to tasks that you see in the future. Don't be afraid to ask questions if you can't understand something, or are just curious. At a quick glance, the teleop system may seem simple, but there are a lot of moving parts.
 
 # Getting Started
-First, checkout the branch that has the starter project code: 
+First, go to [Teleop Quickstart](/teleop/quickstart) and make sure your environment is set up. Critically, make sure you've run ```./build.sh``` and have all necessary dependencies.
+
+Open up a terminal, and type ```mrover``` to 
+
+Checkout the branch that has the starter project code: 
 ```bash
-git checkout teleop-starter-new
+git checkout teleop-starter-2026
 ```
-Then checkout a new branch to work on:
+Whenever you create a new feature, you should make a new branch and follow the naming convention of ```<your initials>/<feature name>```  
+Run the first line here (with necessary changes) to do so.
 ```bash
-git checkout -b <your initials>/starter-project
-example: git checkout -b tjn/starter-project
+git checkout -b <your initials>/starter-project-2026
+example: git checkout -b km/starter-project-2026
 ```
 
-Make sure that you have gone through the process detailed in [Teleop Quickstart](/teleop/quickstart) so that all dependencies are installed correctly
-
-Since this starter project is just another blank page added to the codebase, you would launch the backend just like you normally would, with:
+Now you (hopefully) have the starter code ready to be worked on. But how do you run and debug it?  
 
+Go to ```http://localhost:8080/starter``` in your browser. You should see an error page. This is because it is trying to access a server on and IP address that doesn't have any - ```localhost``` a.k.a. ```127.0.0.1``` a.k.a. **your** computer. To create the server it needs, go to your terminal, and run
 ```bash
 ros2 launch mrover basestation.launch.py
 ```
+This launches the frontend and the backend. Now once you go back to your browser, you should see a webpage with a header and some text with "body" in it after reloading. If not, make sure you did everything in [Teleop Quickstart](/teleop/quickstart), or ask for help.
 
-Then, open your browser, and go to ```http://localhost:8080/starter``` to verify that it has launched correctly. You should see the header, and the text "body" below. 
+:::note
+* The ```/starter``` part of the url specifies that you are on the "Starter" page of the basestation. You can remove it to see the main page.  
+* The ```:8080``` part of the url is the port number. It functions as a sort of "id" for the server on the particular computer.
+:::
 
 ---
 
-# Understanding Websockets
-
-Websockets provide a persistent, two-way communication channel between the frontend and backend, Once the connection is established, messages are sent instantly with very low latency, which makes it suitable for live data applications like our frontend. 
+# Vue Files and Editing
 
----
+Now, open up ```StarterProject.vue``` in a code editor. I recommend you run:
+```bash
+code .
+```
+Then press **ctrl-p** and type the file's name to search for it. It should look something like this:  
 
-# WebsocketStatus component
+```html
+<template>
+  <div class="view-wrapper">
+    <h1>Hello world!</h1>
+    <!-- TODO -->
+  </div>
+</template>
 
-Notice the navigation bar, particularly the ```wypt``` websocket status indicator at the top right. As explained by the diagram, a green blinking dot indicates a transmit, and a red blinking dot indicates a receive. 
+<script lang="ts" setup>
+    import { onMounted, onUnmounted } from 'vue'
+    ...
+```
 
-Now, in your terminal window where you previously launched the basestation, hit ```ctrl-c```. 
+Let's add a button to it.  
+Delete the ```<h1>``` and replace the ```// TODO add button``` with this code:
+```html
+<button class="btn btn-primary">
+  Hello button!
+</button>
+```
+Now, you have a button that does absolutely nothing! Note that if you go back to the browser, you don't have to reload to see your changes. This is due to *hot swapping*.  
 
-You will notice that the ```wypt``` indicator's background has turned yellow. A yellow background indicates a disconnect, either because of a websocket error or that we have shut down the backend. 
+---
 
-## Lets try out the functionality of this component!
+# Typescript
 
-Open ```/teleoperation/basestation_gui/frontend/src/views/StarterProject.vue```
+We would probably like our buttons to not do nothing, so let's fix that by adding some functionality.  
+  
+Scroll down in the file until you find the ```spamTestMessages``` function. It should look like this:
+```typescript
+const spamTestMessages = () => {
 
-Modify the ```<template>```: Replace the ```<h1>``` tag with a button. Connect the button to the method ```spamTestmessages()``` using ```@click```:
+  // Send a message every 1000 milliseconds
+  const interval = setInterval(() => {
+      sendMessage('starter', {
+          type: 'debug',
+          timestamp: new Date().toISOString(),
+      })
+  }, 1000)
 
+  // Stop sending messages after 5000 miliseconds
+  setTimeout(() => clearInterval(interval), 5000)
+}
+```
+What better for adding functionality than a function? We will make it so that this code runs whenever the button is pressed. Go back to the button, and add the event ```@onclick="spamTestMessages()"``` to the button as such. Don't forget to change the text to something descriptive:
 ```html
-<button class="btn btn-primary" @click="spamTestMessages">
-  send websocket messages
+<button class="btn btn-primary" @click="spamTestMessages()">
+  Spam test messages
 </button>
 ```
 
-Now, when you click the button, you should observe the websocket indicator for the ```wypt``` consumer flash green five times. 
-
-Go back to the terminal window where you ran the basestation. You should observe the following message from the backend, which acknowledges that the message has been received by the django server:
-
-
+Now click it and... still nothing? Look at the box that says "starter" in the top right. When you press the button, a green light will flicker. Look at your terminal, and you will see something like this multiple times:
 ```bash
 [gui_backend.sh-1] [WARN] [1753735204.830010889] [gui_backend_node]: debug message received by consumer, 2025-07-28T20:40:04.827Z
 ```
 
-You have successfully used the websocket to send a message to the backend!
+Let's go through the code to see what exactly is going on.
 
----
+```typescript
+const interval = setInterval(() => {
+  ...
+}, 1000)
+```
+setInterval (as the comment suggests), runs the code block every 1000 milliseconds (every second). An id for it is stored in the ```interval``` variable.
+```typescript
+setTimeout(() => clearInterval(interval), 5000)
+```
+setTimeout runs the passed function after 5000 milliseconds (5 seconds). It stops the previous interval.
 
-# Importing and using components
+```typescript
+sendMessage('starter', {
+  type: 'debug',
+  timestamp: new Date().toISOString(),
+})
+```
+This is the main attraction of this function. It sends a 'debug' message to the 'starter' websocket containing the current time. 
 
-Now, we'll import and develop the ```ArmControls``` and ```Rover3D``` components. 
+---
 
-Add import statements for ```ArmControls.vue``` and ```Rover3D.vue``` at the top of your ```<script>``` section:
+# WebSockets
+## Overview
+WebSocket is a networking protocol, like HTTP. It lets clients (in this case, your computer) communicate with servers (in this case, also your computer) using WebSocket**s**. It sends messages quickly - great for real-time updates. In our codebase, when a ROS topic is published, it gets sent to the backend, and then forwarded to the frontend via a WebSocket (if one has been set up). It also works in reverse; a frontend element can send messages to the backend and then to the rover.
 
-```js
-import ArmControls from '../components/ArmControls.vue'
-import Rover3D from '../components/Rover3D.vue'
+## How They're Used Here
+To use a WebSocket in a component, we first import necessary dependencies and define the necessary functions:
+```typescript
+import { useWebsocketStore } from '@/stores/websocket'
+...
+const { setupWebSocket, closeWebSocket, sendMessage } = useWebsocketStore()
 ```
 
-And register them in the component section. Remember that you can only use a component after it has been registered:
+Then, we set up needed WebSockets.
 
-```js
-components: {
-    ArmControls,
-    Rover3D,
-},
+```typescript
+onMounted(() => {
+  setupWebSocket('starter')
+  // TODO
+})
 ```
 
-Whenever you add new components to a top-level view, you should be aware of the websocket consumers that they utilize. 
-
 :::important
-To find which consumer handles a specific ROS2 topic or service, see [Consumers Lookup](/teleop/consumers-lookup)
+  WebSocket setup and closing is typically handled in the highest level component, in a different way than above.  
+  Check [Websocket Handlers](/teleop/consumers-lookup) for more information.
 :::
 
-Looking in ```ArmControls``` And ```Rover3D```, you will see that they only use the ```arm``` websocket consumer. Therefore, we should initialize it in ```StarterProject.vue```:
+Messages can now be sent through this WebSocket. When the Vue component is unmounted, we also close the WebSocket.
 
-in ```mounted()```:
-```js
-this.$store.dispatch('websocket/setupWebSocket', 'arm')
-```
+## Status Indicator
+
+The box in the upper left is a status indicator. A green light (on the left) indicates a transmit, while a red light indicates a receive. If the whole box is yellow, this indicates a disconnect. Go back into your terminal and press **ctrl-c**. That kills the backend, causing all sockets to disconnect. The frontend will stick around until the page unloads. Restart the basestation by running the launch command (the command will probably come back if you just press **up** in your terminal).
 
-and in ```unmounted()```
-```js
-this.$store.dispatch('websocket/closeWebSocket', 'arm')
-```
 :::note
-In Vuex, ```this.$store``` gives components access to the global store, which holds shared state and actions. In particular, we are using Vuex to store our websockets logic so that any component can access it by using ```this.$store.dispatch()```
+**ctrl-c** will cancel any process/command currently running in the terminal. Use it whenever a program gets stuck!  
+If you want to copy something in the terminal, use **ctrl-shift-c**, or just drag-select the text; it will depend on your environment.
 :::
 
-Now, you can incorporate these components into the ```<template>``` section, throwing them all under the ```view-wrapper``` div:
+## Try it yourself
+
+```typescript
+sendMessage('starter', {
+  type: 'debug',
+  timestamp: new Date().toISOString(),
+})
+```
+
+Change the ```new Date().toISOString()``` to some other value. Press the button and see what happens in the terminal.
+
+Next, undo changing ```timestamp```, and try this challenge: Get the following to display in your terminal:
+```bash
+[gui_backend.sh-1] [WARN] testing message 'Phil' received at <current time>
+```
+
+*Hint: look in starter_ws.py. Where is a message's type used? What data does the WebSocket expect when it receives a particular message?*
+
+---
+# Components Inside of Components
+
+If you have skimmed some of the other views, you've seen they have many sections with complex parts, and that some of those sections are reused on different pages. These sections are called **components**, as well as the view that holds them. The Starter page is sparse, so let's try to add some to it.  
+
+It would be nice to test the rover's arm on the page, so we should add the necessary components for that. First, we have to import them inside of the ```<script>``` tag. Replace the ```// TODO import components```:
+```typescript
+import ArmControls from '../components/ArmControls.vue'
+import Rover3D from '../components/Rover3D.vue'
+```
+
+Add necessary WebSocket management:
+
+```typescript
+onMounted(() => {
+  setupWebSocket('starter')
+  setupWebSocket('arm') // <-- Add this
+})
+...
+onUnmounted(() => {
+  closeWebSocket('starter')
+  closeWebSocket('arm') // <-- this too
+})
+
+```
+
+Now that they have been imported, we can use them in the ```<template>```.
+
+Replace the ```// TODO add components``` with this code:
+
+```html
+<ArmControls/>
+<Rover3D/>
+```
+
+Now the page looks... kinda weird actually. We should format it.
+
+---
+
+# Formatting
+
+Tailwind is a CSS framework that we use for styling. It provides classes to modify styles of elements. Add some to the new components.
 
 ```html
-<ArmControls class="island py-2" />
+<ArmControls class="island py-1" />
 <Rover3D class="island m-0 p-0" style="max-height: 700px;" />
 ```
 
-:::note
-```island``` is a custom css class, defined to give a component rounded corners and a white background. Implementation could be found in ```App.vue```
-:::
+* ```island``` adds a white, rounded background to a component.
+* ```p``` (and by extension, ```p-y```) changes padding.
+* ```m``` is for changing margins.
+* ```style``` is not part of Tailwind; it manually changes the elements CSS styling. ```max-height: 700px``` forces to ```Rover3D``` component to stay under 700 pixels of height  
 
-Looking at your browser window, you should realize that the current layout is not ideal, with the test button and ```ArmControls``` taking up full separate rows. Move the button and the control into the same row by using a div with classes ```d-flex flex-column```, and add spacing as appropriate. 
 
-Your ```<template>``` section should now look like this
+The page looks a little better now, but it still has an odd layout. Group the button and ```ArmControls``` together using a ```<div>```
+
+```html
+<div>
+  <button class="btn btn-primary" @click="spamTestMessages()">
+      Spam test messages
+  </button>
+  <ArmControls class="island py-1" />
+</div>
+```
+
+Even better, but there is a little awkwardness. Make the ```<div>``` into a *flexbox* (with additional styling) by adding ```class="flex flex-col gap-2 mb-2 p-1"``` to it. Your final ```<template>``` code should look like this:
 
 ```html
 <template>
   <div class="view-wrapper">
-    <div class="d-flex flex-col gap-2 mb-2">
-      <button class="btn btn-primary" @click="spamTestMessages">
-        send websocket messages
-      </button>
-      <ArmControls class="island py-2" />
+    <div class="flex flex-col gap-2 mb-2 p-1">
+        <button class="btn btn-primary" @click="spamTestMessages()">
+            Spam test messages
+        </button>
+        <ArmControls class="island py-1" />
     </div>
     <Rover3D class="island m-0 p-0" style="max-height: 700px;" />
   </div>
 </template>
 ```
 
-and ```<script>``` section:
+Lookin' good! Graphic design is your passion as it is mine, I'm assuming.
 
-```js
-<script lang="ts">
-import ArmControls from '../components/ArmControls.vue'
-import Rover3D from '../components/Rover3D.vue'
-import { defineComponent } from 'vue'
-import Vuex from 'vuex'
-const { mapState } = Vuex
-import type { WebSocketState } from '../types/websocket'
-
-export default defineComponent({
-  components: {
-    ArmControls,
-    Rover3D,
-  },
-
-  mounted() {
-    this.$store.dispatch('websocket/setupWebSocket', 'arm')
-    this.$store.dispatch('websocket/setupWebSocket', 'waypoints')
-  },
-
-  unmounted() {
-    this.$store.dispatch('websocket/closeWebSocket', 'arm')
-    this.$store.dispatch('websocket/closeWebSocket', 'waypoints')
-  },
-
-  computed: {
-    ...mapState('websocket', {
-      waypointsMessage: (state: WebSocketState) => state.messages['waypoints'],
-    }),
-  },
-
-  watch: {
-    waypointsMessage(msg) {
-      console.log(msg)
-    },
-  },
-
-  methods: {
-    spamTestMessages() {
-      const interval = setInterval(() => {
-        this.$store.dispatch('websocket/sendMessage', {
-          id: 'waypoints',
-          message: {
-            type: 'debug',
-            timestamp: new Date().toISOString(),
-          },
-        })
-      }, 1000)
-      setTimeout(() => clearInterval(interval), 5000)
-    },
-  },
-})
-</script>
-```
+:::note
+A *flexbox* is a container that holds elements in a single row or column. It can shrink or grow elements as needed to fit inside of its empty space.  
 
-Check your browser window to see how it looks. Pretty neat, isnt it?
+*Grid* is also a common choice for holding multiple elements. It displays them in... well... a grid. Prefer to use it over *flexbox* when a layout starts to get cluttered, as *grid* is more predictable.
+:::
+
+::note
+The basestation is designed to display best on a **1080p** screen - the one used at competition. You might have to adjust your settings or fullscreen the page to match it.
+:::
 
 ---
 
-# Developing ```ArmControls```
+# ```Arm Controls``` and ```Rover3D```
 
-Now open up ```ArmControls.vue``` in your preferred text editor, located at ```/teleoperation/basestation_gui/frontend/src/components/ArmControls.vue```. The core functionality in this component has already been implemented. 
 
-## Mode Selector
+```Rover3D``` is a display of the rover in its current state. It also displays a *costmap*, a grid of how "expensive" it would be for the rover to navigate a certain section of terrain.  
 
-First, lets make a button group to modify the **mode** variable. Add a div with the bootstrap group ```btn-group``` below the ```<div>``` containing the ```<h3>```
+```Arm Controls``` allows the operator to move the robot arm with a controller, and displays the controller's state. Here, however, the code has been modified so that keyboard input also moves the arm.  
 
-```html
-<div
-class="btn-group d-flex"
-role="group"
-aria-label="Arm mode selection"
->
+Part of the code for keyboard input (not all of it):
 
-</div>
+```typescript
+interval = window.setInterval(() => {
+  const axes: number[] = [0, 0, 0, 0]
+  const buttons: boolean[] = []
+  axes[0] = (keysPressed.d ? 1 : 0) - (keysPressed.a ? 1 : 0)
+  axes[1] = (keysPressed.s ? 1 : 0) - (keysPressed.w ? 1 : 0)
+
+  sendMessage('arm', {
+    type: 'ra_controller',
+    axes: axes,
+    buttons: buttons
+  })
+}, 1000 / UPDATE_HZ)
 ```
 
-Inside this div, place two buttons, one selecting ```disabled```, and one for ```throttle```, the simplest controller mode that maps each joint of the arm to an axis:
+And for controller input:
+
+```typescript
+const { connected, axes, buttons, vibrationActuator } = useGamepadPolling({
+  controllerIdFilter: 'Microsoft',
+  topic: 'arm',
+  messageType: 'ra_controller',
+})
+```
+
+However, pressing buttons on the keyboard won't move the arm currently. This is for two reasons:
+* The arm mode has to be set.
+* The backend needs a rover with an arm to move.
+
+Go to this div:
+
+```html
+<div class="flex w-full" role="group" aria-label="Arm mode selection" data-testid="pw-arm-mode-buttons">
+  <!-- TODO add buttons-->
+```
+
+And add these buttons where the ```TODO``` is:
 
 ```html
 <button
-    type="button"
-    class="btn flex-fill"
-    :class="mode === 'disabled' ? 'btn-danger' : 'btn-outline-danger'"
-    @click="mode = 'disabled'"
+  type="button"
+  class="btn btn-sm flex-1"
+  :class="mode === 'disabled' ? 'btn-danger' : 'btn-outline-danger'"
+  data-testid="pw-arm-mode-disabled"
+  @click="newRAMode('disabled')"
 >
-    Disabled
+  Disabled
 </button>
 <button
-    type="button"
-    class="btn flex-fill"
-    :class="mode === 'throttle' ? 'btn-success' : 'btn-outline-success'"
-    @click="mode = 'throttle'"
+  type="button"
+  class="btn btn-sm flex-1"
+  :class="mode === 'throttle' ? 'btn-success' : 'btn-outline-success'"
+  data-testid="pw-arm-mode-throttle"
+  @click="newRAMode('throttle')"
 >
-    Throttle
+  Throttle
 </button>
 ```
 
-As you can now see from your browser, the ```btn-group``` creates a joined effect on the buttons, the ```@click``` modifies the ```mode``` variable when selected, and the ```:class``` styling makes the button fill solid when selected. 
+Click throttle. The hard part is now done. Next, we need to get the rover, or at least a virtual one.
 
+---
 
-## Send Controls
+# Simulator
 
-The original code requires a **controller** to be connected in order to send controls. Here, we have modified the code using the **WASD** keys to mimic the left joystick of the controller, like so
+Open a new terminal, but leave the old one running the basestation. Run and then run these commands. If you get stuck in the simulator, press **esc**:
 
-```js
-axes[0] = (this.keysPressed.d ? 1 : 0) - (this.keysPressed.a ? 1 : 0)
-axes[1] = (this.keysPressed.s ? 1 : 0) - (this.keysPressed.w ? 1 : 0)
+```bash
+mrover
+ros2 launch mrover simulator.launch.py
 ```
 
-**axes** and **buttons** are used to simulate an xbox controller. We will now send both the mode and the controls to the ```arm``` consumer. 
+The simulator and RViz will open in new windows. RViz is a useful tool that allows you to see what the rover sees, and what topics are being broadcast. The simulator provides a digital version of the rover that communicates with the basestation in a similar way to if it was real.
 
-There is already an interval set up in ```created()```, which repeats 30 times a second. As mentioned earlier, to access and use websockets, we will use ```this.$store.dispatch()```:
+## Navigating the Simulator
 
-```js
-this.$store.dispatch('websocket/sendMessage', {
-    id: 'arm',
-    message: {
-        type: 'ra_controller',
-        axes: axes,
-        buttons: buttons,
-    },
-})
-this.$store.dispatch('websocket/sendMessage', {
-    id: 'arm',
-    message: {
-        type: 'ra_mode',
-        mode: this.mode,
-    },
-})
-```
+The simulator is the one with the MRover logo as its symbol. You can move the camera with **WASD**, **space**, **ctrl**, and the mouse. **Esc** toggles the mouse from being locked to unlocked and back again. 
+
+## Controlling the Rover
+
+Everything is currently frozen. Press **p** to enable physics, and uncheck **publish ik**. You can move the rover with **i**, **j**, **l**, and "**,**" while the mouse is locked. Go back to the Starter view in your browser. Make sure throttle mode is selected, and use **WASD** to control the arm. It will move in both the browser and the simulator. 
 
 ---
 
-## Verify commands
+# ROS Topics
 
-Open another terminal window, enter ```mrover```, then enter 
+One last thing - Open up yet another terminal, but leave the other two running. Run these commands:
 
-```
+```bash
+mrover
 ros2 topic list
 ```
 
-This should list all the topics which are live, which includes ```/arm_throttle_cmd``` which we are publishing to
+It will display every topic the currently exists. Let's try to see how our arm controls are being sent. Because we're using throttle mode, they will be sent through ```/arm_thr_cmd```. Echo that topic.
 
-Now, enter ```ros2 topic echo /arm_throttle_cmd```. Place the window along side your browser window, focus on the browser, select ```throttle```, and press the WASD keys. You should see the published values react to your keystrokes. 
+```bash
+ros2 topic echo /arm_thr_cmd
+```
 
-This is the method used to debug ROS topic. 
+Whenever you move the arm, a new message will appear. Press **ctrl-c** to stop the echoing.
 
 ---
 
-## Completed ```ArmControls.vue```
+# Git Commits
 
-Now, your ```<template>``` section should look like this:
+The starter project is pretty much done now, you can stop the simulator and basestation. Let's add it to the codebase for safekeeping. *Commit* your changes by running this in a terminal:
 
-```html
-<template>
-  <div class="d-flex flex-column align-items-center w-100">
-    <div class="d-flex flex-column gap-2" style="width: 500px; max-width: 100%">
-      <div class="d-flex justify-content-between align-items-center">
-        <h3 class="m-0">Arm Controls</h3>
-      </div>
-      <div
-        class="btn-group d-flex"
-      >
-        <button
-          type="button"
-          class="btn flex-fill"
-          :class="mode === 'disabled' ? 'btn-danger' : 'btn-outline-danger'"
-          @click="mode = 'disabled'"
-        >
-          Disabled
-        </button>
-        <button
-          type="button"
-          class="btn flex-fill"
-          :class="mode === 'throttle' ? 'btn-success' : 'btn-outline-success'"
-          @click="mode = 'throttle'"
-        >
-          Throttle
-        </button>
-      </div>
-    </div>
-  </div>
-</template>
-```
+```bash
+# "mrover" doesn't need to be run if from one of the previous terminals
+mrover
 
-and ```<script>```:
-
-```js
-<script lang="ts">
-import { defineComponent } from 'vue'
-import Vuex from 'vuex'
-const { mapActions } = Vuex
-
-const UPDATE_HZ = 30
-
-export default defineComponent({
-  data() {
-    return {
-      mode: 'disabled',
-      keysPressed: {
-        w: false,
-        a: false,
-        s: false,
-        d: false,
-      },
-      interval: 0,
-    }
-  },
-  mounted() {
-    document.addEventListener('keydown', this.handleKeyDown)
-    document.addEventListener('keyup', this.handleKeyUp)
-  },
-  created() {
-    this.interval = window.setInterval(() => {
-      const axes = [0, 0, 0, 0]
-      const buttons: boolean[] = []
-      axes[0] = (this.keysPressed.d ? 1 : 0) - (this.keysPressed.a ? 1 : 0)
-      axes[1] = (this.keysPressed.s ? 1 : 0) - (this.keysPressed.w ? 1 : 0)
-
-      this.$store.dispatch('websocket/sendMessage', {
-        id: 'arm',
-        message: {
-          type: 'ra_controller',
-          axes: axes,
-          buttons: buttons,
-        },
-      })
-      this.$store.dispatch('websocket/sendMessage', {
-        id: 'arm',
-        message: {
-          type: 'ra_mode',
-          mode: this.mode,
-        },
-      })
-    }, 1000 / UPDATE_HZ)
-  },
-  beforeUnmount() {
-    window.clearInterval(this.interval)
-    document.removeEventListener('keydown', this.handleKeyDown)
-    document.removeEventListener('keyup', this.handleKeyUp)
-  },
-  methods: {
-    ...mapActions('websocket', ['sendMessage']),
-    handleKeyDown(event: KeyboardEvent) {
-      const key = event.key.toLowerCase()
-      if (key === ' ') {
-        this.mode = 'disabled'
-      }
-      if (key in this.keysPressed) {
-        this.keysPressed[key as keyof typeof this.keysPressed] = true
-      }
-    },
-    handleKeyUp(event: KeyboardEvent) {
-      const key = event.key.toLowerCase()
-      if (key in this.keysPressed) {
-        this.keysPressed[key as keyof typeof this.keysPressed] = false
-      }
-    },
-  },
-})
-</script>
+# Mark all files in "." (this folder) for commit
+git add .
+
+# Go through the output this prints. It should say that every file you personally changed is marked for commit, likely in green.
+git status
+
+# Commits locally with message "Starter project completed"
+# (-m is required to put a message, and you should put a message with every commit)
+git commit -m "Starter project completed"
 ```
 
----
+This commits the changes *locally*. It only exists on your computer. To send your changes to the shared codebash, type this:
 
-# Testing
+```bash
+git push
+```
 
-In another terminal window, enter ```mrover```, then 
+That... probably gave an error. Run what it tells you to, which is probably this:
 
+```bash
+# --set-upstream can be replaced with -u
+git push --set-upstream origin <your-initials>/teleop-starter
 ```
-ros2 launch mrover simulator.launch.py
+
+This tells git to create a *remote branch* (shared) to match with your *local branch* (on your computer), and to put the changes there. Now that the remote branch exists, you can simply type ```git push``` whenever you make a new commit.  
+
+## When a feature is finished
+
+If this were a normal feature, this would be when you make a *pull request*, but this feature isn't going into the main branch. If it was pulled, you should delete the feature branch afterwards. If you want to delete your starter branch remotely, run this. 
+
+```bash
+git push -d origin <your-initials>/teleop-starter
 ```
 
-This will launch the sim and allow us to test our ```ArmControls``` component. 
+To delete it locally (although I advise you keep the branch for your future reference), run this:
 
-In the newly launched simulator window (the one with the 3D world), press ```esc``` to unlock your cursor, and press ```p``` to enable physics. Then, uncheck the ```Publish IK``` checkbox on the left sidebar. 
+```bash
+git branch -d <your-initials>/teleop-starter
+```
 
-Back in your browser, click the ```Throttle``` button in ```ArmControls```. 
+Again, if this was a real feature, you **absolutely should** delete the remote *and* local branch **after** the pull request gets approved.
 
-Now, when you press the ```**WASD**``` keys, you should see the ```Rover3D``` move, responding to the rover's joints in the simulator. 
+# Conclusion and Next Steps
 
+There you have it! Your first teleop project done. It was a lot to take in, so don't sweat if you don't get it all right away. With practice, it will come to you. Here are some things you can do to learn more, and help you in the future:
+
+* **Read the docs.** You were probably already doing that, but, if you weren't, go ahead and do that. Try to read all about ROS2, all about teleop, the general resources, and some of each of the other teams.
+* **Skim the codebase.** Look at files at multiple parts of the codebase, and try to figure out what they do. Modify them, remove them, add them, and see what happens. You can reset a branch back to its remote version with ```git reset --hard origin/<branch-name>```. I recommend looking in the views, the components, the _ws.py files, the .msgs, the shell scripts (.sh files), and whatever seems to interest you.
+* **Customize your environment.** Change the colors on your terminal. Learn keyboard shortcuts for VSCode (did you know **ctrl-alt-"-"** will move the cursor to its previous position, even between files). Learn Vim? Install some extensions. Put up a fancy wallpaper. Making navigating your computer easy will pay off in the long run.
+* **Talk with other members.** MRover is a team, and we work best when there's good communication. Try to familiarize yourself with your teammates and some members of other teams too. Heck, try out another team if they look fun, I ain't stopping you. If you have any questions at all, don't be afraid to ask me or someone else.  
 
----
 
-# Congratulations, you've finished the starter project!
+Now, go eat lunch or something. You've probably been staring at your screen a while.
\ No newline at end of file

From bfbc556ecd168f1f0abf71dfa54c520623a4fb65 Mon Sep 17 00:00:00 2001
From: kmaglo-um <kmaglo@umich.edu>
Date: Mon, 11 May 2026 13:36:11 -0400
Subject: [PATCH 02/12] Took out a note

---
 src/content/docs/teleop/starter-project.md | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/content/docs/teleop/starter-project.md b/src/content/docs/teleop/starter-project.md
index 63ee5ad..92703fd 100644
--- a/src/content/docs/teleop/starter-project.md
+++ b/src/content/docs/teleop/starter-project.md
@@ -2,8 +2,6 @@
 title: "Teleop Starter Project"
 ---
 
-#**IN PROGRESS**
-
 # Introduction
 
 Here, you will complete a Vue component by:

From 34e93865447a2ee49a75b2cb43fd7ecd641caeb1 Mon Sep 17 00:00:00 2001
From: kmaglo-um <kmaglo@umich.edu>
Date: Mon, 11 May 2026 14:12:53 -0400
Subject: [PATCH 03/12] Minor touch-ups

---
 src/content/docs/teleop/starter-project.md | 70 +++++++++++++++-------
 1 file changed, 47 insertions(+), 23 deletions(-)

diff --git a/src/content/docs/teleop/starter-project.md b/src/content/docs/teleop/starter-project.md
index 92703fd..f8b21b9 100644
--- a/src/content/docs/teleop/starter-project.md
+++ b/src/content/docs/teleop/starter-project.md
@@ -12,29 +12,38 @@ Here, you will complete a Vue component by:
 
 The tasks you complete in this project will be similar to tasks that you see in the future. Don't be afraid to ask questions if you can't understand something, or are just curious. At a quick glance, the teleop system may seem simple, but there are a lot of moving parts.
 
+---
+
 # Getting Started
+
+## Opening the Code
 First, go to [Teleop Quickstart](/teleop/quickstart) and make sure your environment is set up. Critically, make sure you've run ```./build.sh``` and have all necessary dependencies.
 
-Open up a terminal, and type ```mrover``` to 
+Open up a terminal, and type ```mrover```. Then: 
 
 Checkout the branch that has the starter project code: 
 ```bash
 git checkout teleop-starter-2026
 ```
-Whenever you create a new feature, you should make a new branch and follow the naming convention of ```<your initials>/<feature name>```  
-Run the first line here (with necessary changes) to do so.
+Copy it into your own branch:
 ```bash
 git checkout -b <your initials>/starter-project-2026
 example: git checkout -b km/starter-project-2026
 ```
+:::note
+Whenever you create a new feature, you should make a new branch and follow the naming convention of ```<your initials>/<feature name>```. You'll often checkout from main, but not always.
+:::
+
 
 Now you (hopefully) have the starter code ready to be worked on. But how do you run and debug it?  
 
+## Running the Code
+
 Go to ```http://localhost:8080/starter``` in your browser. You should see an error page. This is because it is trying to access a server on and IP address that doesn't have any - ```localhost``` a.k.a. ```127.0.0.1``` a.k.a. **your** computer. To create the server it needs, go to your terminal, and run
 ```bash
 ros2 launch mrover basestation.launch.py
 ```
-This launches the frontend and the backend. Now once you go back to your browser, you should see a webpage with a header and some text with "body" in it after reloading. If not, make sure you did everything in [Teleop Quickstart](/teleop/quickstart), or ask for help.
+This launches both the frontend and the backend. Now once you go back to your browser, you should see a webpage with a header and some text with "body" in it after reloading. If not, make sure you did everything in [Teleop Quickstart](/teleop/quickstart), or ask for help.
 
 :::note
 * The ```/starter``` part of the url specifies that you are on the "Starter" page of the basestation. You can remove it to see the main page.  
@@ -45,7 +54,7 @@ This launches the frontend and the backend. Now once you go back to your browser
 
 # Vue Files and Editing
 
-Now, open up ```StarterProject.vue``` in a code editor. I recommend you run:
+Now, open up ```StarterProject.vue``` in a code editor. It's easiest to just run this in the terminal:
 ```bash
 code .
 ```
@@ -77,6 +86,8 @@ Now, you have a button that does absolutely nothing! Note that if you go back to
 
 # Typescript
 
+## Connecting Script to Page Elements
+
 We would probably like our buttons to not do nothing, so let's fix that by adding some functionality.  
   
 Scroll down in the file until you find the ```spamTestMessages``` function. It should look like this:
@@ -109,16 +120,18 @@ Now click it and... still nothing? Look at the box that says "starter" in the to
 
 Let's go through the code to see what exactly is going on.
 
+## Function Analysis
+
 ```typescript
 const interval = setInterval(() => {
   ...
 }, 1000)
 ```
-setInterval (as the comment suggests), runs the code block every 1000 milliseconds (every second). An id for it is stored in the ```interval``` variable.
+setInterval (as the comment suggests), runs the function inside of it every 1000 milliseconds (every second). An id for it is stored in the ```interval``` variable.
 ```typescript
 setTimeout(() => clearInterval(interval), 5000)
 ```
-setTimeout runs the passed function after 5000 milliseconds (5 seconds). It stops the previous interval.
+setTimeout runs the function inside of it after 5000 milliseconds (5 seconds). That function (```clearInterval()```) stops the previous interval.
 
 ```typescript
 sendMessage('starter', {
@@ -132,7 +145,7 @@ This is the main attraction of this function. It sends a 'debug' message to the
 
 # WebSockets
 ## Overview
-WebSocket is a networking protocol, like HTTP. It lets clients (in this case, your computer) communicate with servers (in this case, also your computer) using WebSocket**s**. It sends messages quickly - great for real-time updates. In our codebase, when a ROS topic is published, it gets sent to the backend, and then forwarded to the frontend via a WebSocket (if one has been set up). It also works in reverse; a frontend element can send messages to the backend and then to the rover.
+*WebSocket* is a networking protocol, like HTTP. It lets clients (in this case, your computer) communicate with servers (in this case, also your computer) using *WebSocket**s***. It sends messages quickly - great for real-time updates. In our codebase, when a ROS topic is published, it gets sent to the backend, and then forwarded to the frontend via a WebSocket (if one has been set up). It also works in reverse; a frontend element can send messages to the backend and then to the rover.
 
 ## How They're Used Here
 To use a WebSocket in a component, we first import necessary dependencies and define the necessary functions:
@@ -147,7 +160,7 @@ Then, we set up needed WebSockets.
 ```typescript
 onMounted(() => {
   setupWebSocket('starter')
-  // TODO
+  // TODO add necessary sockets
 })
 ```
 
@@ -156,7 +169,7 @@ onMounted(() => {
   Check [Websocket Handlers](/teleop/consumers-lookup) for more information.
 :::
 
-Messages can now be sent through this WebSocket. When the Vue component is unmounted, we also close the WebSocket.
+Messages can now be sent through this WebSocket (WebSocket with id "starter"). When the Vue component is unmounted, we also have to close the WebSocket.
 
 ## Status Indicator
 
@@ -188,7 +201,7 @@ Next, undo changing ```timestamp```, and try this challenge: Get the following t
 ---
 # Components Inside of Components
 
-If you have skimmed some of the other views, you've seen they have many sections with complex parts, and that some of those sections are reused on different pages. These sections are called **components**, as well as the view that holds them. The Starter page is sparse, so let's try to add some to it.  
+If you have pried into some of the other views/pages, you've seen they have many sections with complex parts, and that some of those sections are reused on different pages. These sections are called **components**. The view itself is also a component. The Starter page is sparse, so let's try to add some to it.  
 
 It would be nice to test the rover's arm on the page, so we should add the necessary components for that. First, we have to import them inside of the ```<script>``` tag. Replace the ```// TODO import components```:
 ```typescript
@@ -226,7 +239,7 @@ Now the page looks... kinda weird actually. We should format it.
 
 # Formatting
 
-Tailwind is a CSS framework that we use for styling. It provides classes to modify styles of elements. Add some to the new components.
+[Tailwind](https://tailwindcss.com/docs/styling-with-utility-classes) is a CSS framework that we use for styling. It provides classes to modify styles of elements. Add some to the new components.
 
 ```html
 <ArmControls class="island py-1" />
@@ -271,10 +284,12 @@ Lookin' good! Graphic design is your passion as it is mine, I'm assuming.
 :::note
 A *flexbox* is a container that holds elements in a single row or column. It can shrink or grow elements as needed to fit inside of its empty space.  
 
-*Grid* is also a common choice for holding multiple elements. It displays them in... well... a grid. Prefer to use it over *flexbox* when a layout starts to get cluttered, as *grid* is more predictable.
+*Grid* is also a common choice for holding multiple elements. It displays them in... well... a grid. Prefer to use it over *flexbox* when a layout starts to get cluttered, as *grid* is more predictable.  
+
+See more info at [this Geeks for Geeks article](https://www.geeksforgeeks.org/css/comparison-between-css-grid-css-flexbox/) (albeit, for base CSS).
 :::
 
-::note
+::important
 The basestation is designed to display best on a **1080p** screen - the one used at competition. You might have to adjust your settings or fullscreen the page to match it.
 :::
 
@@ -282,12 +297,13 @@ The basestation is designed to display best on a **1080p** screen - the one used
 
 # ```Arm Controls``` and ```Rover3D```
 
+## Overview
 
 ```Rover3D``` is a display of the rover in its current state. It also displays a *costmap*, a grid of how "expensive" it would be for the rover to navigate a certain section of terrain.  
 
 ```Arm Controls``` allows the operator to move the robot arm with a controller, and displays the controller's state. Here, however, the code has been modified so that keyboard input also moves the arm.  
 
-Part of the code for keyboard input (not all of it):
+Here is part of the code for keyboard input (not all of it):
 
 ```typescript
 interval = window.setInterval(() => {
@@ -304,7 +320,8 @@ interval = window.setInterval(() => {
 }, 1000 / UPDATE_HZ)
 ```
 
-And for controller input:
+It takes the keyboard input and "translates" it into a controller input.  
+Here is the code for direct controller input:
 
 ```typescript
 const { connected, axes, buttons, vibrationActuator } = useGamepadPolling({
@@ -314,10 +331,12 @@ const { connected, axes, buttons, vibrationActuator } = useGamepadPolling({
 })
 ```
 
-However, pressing buttons on the keyboard won't move the arm currently. This is for two reasons:
+However, pressing anything won't move the arm currently. This is for two reasons:
 * The arm mode has to be set.
 * The backend needs a rover with an arm to move.
 
+## Setting up ```Arm Controls```
+
 Go to this div:
 
 ```html
@@ -354,14 +373,14 @@ Click throttle. The hard part is now done. Next, we need to get the rover, or at
 
 # Simulator
 
-Open a new terminal, but leave the old one running the basestation. Run and then run these commands. If you get stuck in the simulator, press **esc**:
+Open a new terminal, but keep the old one running the basestation. Run and then run these commands. If you get stuck in the simulator, press **esc**:
 
 ```bash
 mrover
 ros2 launch mrover simulator.launch.py
 ```
 
-The simulator and RViz will open in new windows. RViz is a useful tool that allows you to see what the rover sees, and what topics are being broadcast. The simulator provides a digital version of the rover that communicates with the basestation in a similar way to if it was real.
+The simulator and RViz will open in new windows. *RViz* is a useful tool that allows you to see what the rover sees, and what topics are being broadcast. The simulator provides a digital version of the rover that communicates with the basestation in a similar way to if it was real.
 
 ## Navigating the Simulator
 
@@ -382,7 +401,7 @@ mrover
 ros2 topic list
 ```
 
-It will display every topic the currently exists. Let's try to see how our arm controls are being sent. Because we're using throttle mode, they will be sent through ```/arm_thr_cmd```. Echo that topic.
+It will display every topic that currently exists. Let's try to see how our arm controls are being sent. Because we're using throttle mode, they will be sent through ```/arm_thr_cmd```. Echo that topic.
 
 ```bash
 ros2 topic echo /arm_thr_cmd
@@ -400,10 +419,11 @@ The starter project is pretty much done now, you can stop the simulator and base
 # "mrover" doesn't need to be run if from one of the previous terminals
 mrover
 
-# Mark all files in "." (this folder) for commit
+# Mark all files in "." (a.k.a. this folder) for commit
 git add .
 
 # Go through the output this prints. It should say that every file you personally changed is marked for commit, likely in green.
+# It's a good idea to check this before committing any changes
 git status
 
 # Commits locally with message "Starter project completed"
@@ -426,7 +446,7 @@ git push --set-upstream origin <your-initials>/teleop-starter
 
 This tells git to create a *remote branch* (shared) to match with your *local branch* (on your computer), and to put the changes there. Now that the remote branch exists, you can simply type ```git push``` whenever you make a new commit.  
 
-## When a feature is finished
+## When a Feature is Finished
 
 If this were a normal feature, this would be when you make a *pull request*, but this feature isn't going into the main branch. If it was pulled, you should delete the feature branch afterwards. If you want to delete your starter branch remotely, run this. 
 
@@ -442,13 +462,17 @@ git branch -d <your-initials>/teleop-starter
 
 Again, if this was a real feature, you **absolutely should** delete the remote *and* local branch **after** the pull request gets approved.
 
+:::note
+You shouldn't wait until a feature is completely, all-the-way done before making a commit. Commit whenever you get a new part of it working, or any noteworthy modification. Make a pull request when it is fully done.
+:::
+
 # Conclusion and Next Steps
 
 There you have it! Your first teleop project done. It was a lot to take in, so don't sweat if you don't get it all right away. With practice, it will come to you. Here are some things you can do to learn more, and help you in the future:
 
 * **Read the docs.** You were probably already doing that, but, if you weren't, go ahead and do that. Try to read all about ROS2, all about teleop, the general resources, and some of each of the other teams.
 * **Skim the codebase.** Look at files at multiple parts of the codebase, and try to figure out what they do. Modify them, remove them, add them, and see what happens. You can reset a branch back to its remote version with ```git reset --hard origin/<branch-name>```. I recommend looking in the views, the components, the _ws.py files, the .msgs, the shell scripts (.sh files), and whatever seems to interest you.
-* **Customize your environment.** Change the colors on your terminal. Learn keyboard shortcuts for VSCode (did you know **ctrl-alt-"-"** will move the cursor to its previous position, even between files). Learn Vim? Install some extensions. Put up a fancy wallpaper. Making navigating your computer easy will pay off in the long run.
+* **Customize your environment.** Change the colors on your terminal. Learn keyboard shortcuts for VSCode (did you know **ctrl-alt-"-"** will move the cursor to its previous position, even between files). Try out Vim. Install some extensions. Put up a fancy wallpaper. Making navigating your computer easy will pay off in the long run.
 * **Talk with other members.** MRover is a team, and we work best when there's good communication. Try to familiarize yourself with your teammates and some members of other teams too. Heck, try out another team if they look fun, I ain't stopping you. If you have any questions at all, don't be afraid to ask me or someone else.  
 
 

From e51db1f280709282d74a78cd396f728e6d5c8a5c Mon Sep 17 00:00:00 2001
From: kmaglo-um <kmaglo@umich.edu>
Date: Mon, 11 May 2026 14:18:54 -0400
Subject: [PATCH 04/12] Made docs and starter code match

---
 src/content/docs/teleop/starter-project.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/docs/teleop/starter-project.md b/src/content/docs/teleop/starter-project.md
index f8b21b9..b9bdd62 100644
--- a/src/content/docs/teleop/starter-project.md
+++ b/src/content/docs/teleop/starter-project.md
@@ -226,7 +226,7 @@ onUnmounted(() => {
 
 Now that they have been imported, we can use them in the ```<template>```.
 
-Replace the ```// TODO add components``` with this code:
+Replace the ```<!--TODO add components-->``` with this code:
 
 ```html
 <ArmControls/>

From f552803a1d134a53334ef7572380a36adb786254 Mon Sep 17 00:00:00 2001
From: kmaglo-um <kmaglo@umich.edu>
Date: Mon, 11 May 2026 18:12:05 -0400
Subject: [PATCH 05/12] Fixed some mistakes

---
 src/content/docs/teleop/starter-project.md | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/content/docs/teleop/starter-project.md b/src/content/docs/teleop/starter-project.md
index b9bdd62..ef48817 100644
--- a/src/content/docs/teleop/starter-project.md
+++ b/src/content/docs/teleop/starter-project.md
@@ -41,8 +41,12 @@ Now you (hopefully) have the starter code ready to be worked on. But how do you
 
 Go to ```http://localhost:8080/starter``` in your browser. You should see an error page. This is because it is trying to access a server on and IP address that doesn't have any - ```localhost``` a.k.a. ```127.0.0.1``` a.k.a. **your** computer. To create the server it needs, go to your terminal, and run
 ```bash
-ros2 launch mrover basestation.launch.py
+ros2 launch mrover basestation.launch.py mode:=dev
 ```
+:::note
+```mode:=dev``` launches in development mode. Without it, the basestation will launch in production mode and in a new window.
+:::
+
 This launches both the frontend and the backend. Now once you go back to your browser, you should see a webpage with a header and some text with "body" in it after reloading. If not, make sure you did everything in [Teleop Quickstart](/teleop/quickstart), or ask for help.
 
 :::note
@@ -54,8 +58,9 @@ This launches both the frontend and the backend. Now once you go back to your br
 
 # Vue Files and Editing
 
-Now, open up ```StarterProject.vue``` in a code editor. It's easiest to just run this in the terminal:
+Now, open up ```StarterProject.vue``` in a code editor. It's easiest to just run this in a new terminal:
 ```bash
+mrover
 code .
 ```
 Then press **ctrl-p** and type the file's name to search for it. It should look something like this:  
@@ -196,7 +201,7 @@ Next, undo changing ```timestamp```, and try this challenge: Get the following t
 [gui_backend.sh-1] [WARN] testing message 'Phil' received at <current time>
 ```
 
-*Hint: look in starter_ws.py. Where is a message's type used? What data does the WebSocket expect when it receives a particular message?*
+*Hint: look in ```starter_ws.py```. Where is a message's type used? What data does the WebSocket expect when it receives a particular message?*
 
 ---
 # Components Inside of Components
@@ -321,7 +326,7 @@ interval = window.setInterval(() => {
 ```
 
 It takes the keyboard input and "translates" it into a controller input.  
-Here is the code for direct controller input:
+Here is part of the code for direct controller input:
 
 ```typescript
 const { connected, axes, buttons, vibrationActuator } = useGamepadPolling({
@@ -337,7 +342,7 @@ However, pressing anything won't move the arm currently. This is for two reasons
 
 ## Setting up ```Arm Controls```
 
-Go to this div:
+Head inside ```ArmControls.vue```. In VSCode, you can control click its name from its html tag or import statement. Then, go to this div:
 
 ```html
 <div class="flex w-full" role="group" aria-label="Arm mode selection" data-testid="pw-arm-mode-buttons">
@@ -441,7 +446,7 @@ That... probably gave an error. Run what it tells you to, which is probably this
 
 ```bash
 # --set-upstream can be replaced with -u
-git push --set-upstream origin <your-initials>/teleop-starter
+git push --set-upstream origin <your-initials>/teleop-starter-2026
 ```
 
 This tells git to create a *remote branch* (shared) to match with your *local branch* (on your computer), and to put the changes there. Now that the remote branch exists, you can simply type ```git push``` whenever you make a new commit.  
@@ -474,6 +479,7 @@ There you have it! Your first teleop project done. It was a lot to take in, so d
 * **Skim the codebase.** Look at files at multiple parts of the codebase, and try to figure out what they do. Modify them, remove them, add them, and see what happens. You can reset a branch back to its remote version with ```git reset --hard origin/<branch-name>```. I recommend looking in the views, the components, the _ws.py files, the .msgs, the shell scripts (.sh files), and whatever seems to interest you.
 * **Customize your environment.** Change the colors on your terminal. Learn keyboard shortcuts for VSCode (did you know **ctrl-alt-"-"** will move the cursor to its previous position, even between files). Try out Vim. Install some extensions. Put up a fancy wallpaper. Making navigating your computer easy will pay off in the long run.
 * **Talk with other members.** MRover is a team, and we work best when there's good communication. Try to familiarize yourself with your teammates and some members of other teams too. Heck, try out another team if they look fun, I ain't stopping you. If you have any questions at all, don't be afraid to ask me or someone else.  
+* **Ctrl-f, ctrl-shift-f, ctrl-p, and ctrl-click are your best friends.** I think I learned the most about MRover by looking at files related to what I was working on. Learn what these do, and try them out.
 
 
 Now, go eat lunch or something. You've probably been staring at your screen a while.
\ No newline at end of file

From 31df73c0e8b6e74a133867dbea1e56261331d4c6 Mon Sep 17 00:00:00 2001
From: kmaglo-um <kmaglo@umich.edu>
Date: Mon, 11 May 2026 18:34:30 -0400
Subject: [PATCH 06/12] Consistency

---
 src/content/docs/teleop/starter-project.md | 36 ++++++++++++----------
 1 file changed, 20 insertions(+), 16 deletions(-)

diff --git a/src/content/docs/teleop/starter-project.md b/src/content/docs/teleop/starter-project.md
index ef48817..72b1d12 100644
--- a/src/content/docs/teleop/starter-project.md
+++ b/src/content/docs/teleop/starter-project.md
@@ -5,10 +5,10 @@ title: "Teleop Starter Project"
 # Introduction
 
 Here, you will complete a Vue component by:
-* Creating page elements
-* Formatting page elements
-* Importing other components (ArmControls and Rover3D)
-* Sending/receiving messages to/from the backend
+* Creating page elements.
+* Formatting page elements.
+* Importing other components (```ArmControls``` and ```Rover3D```).
+* Sending/receiving messages to/from the backend.
 
 The tasks you complete in this project will be similar to tasks that you see in the future. Don't be afraid to ask questions if you can't understand something, or are just curious. At a quick glance, the teleop system may seem simple, but there are a lot of moving parts.
 
@@ -17,21 +17,24 @@ The tasks you complete in this project will be similar to tasks that you see in
 # Getting Started
 
 ## Opening the Code
-First, go to [Teleop Quickstart](/teleop/quickstart) and make sure your environment is set up. Critically, make sure you've run ```./build.sh``` and have all necessary dependencies.
+First, go to [Teleop Quickstart](quickstart.md) and make sure your environment is set up. Critically, make sure you've run ```./build.sh``` and have all necessary dependencies.
 
 Open up a terminal, and type ```mrover```. Then: 
 
-Checkout the branch that has the starter project code: 
+Checkout/go to the branch that has the starter project code: 
+
 ```bash
 git checkout teleop-starter-2026
 ```
-Copy it into your own branch:
+
+Copy it into a new branch:
+
 ```bash
-git checkout -b <your initials>/starter-project-2026
+git checkout -b <your-initials>/starter-project-2026
 example: git checkout -b km/starter-project-2026
 ```
 :::note
-Whenever you create a new feature, you should make a new branch and follow the naming convention of ```<your initials>/<feature name>```. You'll often checkout from main, but not always.
+Whenever you create a new feature, you should make a new branch and follow the naming convention of ```<your-initials>/<feature name>```. You'll often checkout from main, but not always.
 :::
 
 
@@ -39,7 +42,7 @@ Now you (hopefully) have the starter code ready to be worked on. But how do you
 
 ## Running the Code
 
-Go to ```http://localhost:8080/starter``` in your browser. You should see an error page. This is because it is trying to access a server on and IP address that doesn't have any - ```localhost``` a.k.a. ```127.0.0.1``` a.k.a. **your** computer. To create the server it needs, go to your terminal, and run
+Go to the url ```http://localhost:8080/starter``` in your browser. You should see an error page. This is because it is trying to access a server on and IP address that doesn't have any - ```localhost``` a.k.a. ```127.0.0.1``` a.k.a. **your** computer. To create the server it needs, go to your terminal, and run
 ```bash
 ros2 launch mrover basestation.launch.py mode:=dev
 ```
@@ -47,7 +50,7 @@ ros2 launch mrover basestation.launch.py mode:=dev
 ```mode:=dev``` launches in development mode. Without it, the basestation will launch in production mode and in a new window.
 :::
 
-This launches both the frontend and the backend. Now once you go back to your browser, you should see a webpage with a header and some text with "body" in it after reloading. If not, make sure you did everything in [Teleop Quickstart](/teleop/quickstart), or ask for help.
+This launches both the frontend and the backend. Now once you go back to your browser, you should see a webpage with a header and some text with "Hello World!" in it after reloading. If not, make sure you did everything in [Teleop Quickstart](quickstart.md), or ask for help.
 
 :::note
 * The ```/starter``` part of the url specifies that you are on the "Starter" page of the basestation. You can remove it to see the main page.  
@@ -111,7 +114,7 @@ const spamTestMessages = () => {
   setTimeout(() => clearInterval(interval), 5000)
 }
 ```
-What better for adding functionality than a function? We will make it so that this code runs whenever the button is pressed. Go back to the button, and add the event ```@onclick="spamTestMessages()"``` to the button as such. Don't forget to change the text to something descriptive:
+What better for adding functionality than a function? We will make it so that this code runs whenever the button is pressed. Go back to the button, and add the event ```@onclick="spamTestMessages()"``` to it as such. Don't forget to change the text to something descriptive:
 ```html
 <button class="btn btn-primary" @click="spamTestMessages()">
   Spam test messages
@@ -150,10 +153,11 @@ This is the main attraction of this function. It sends a 'debug' message to the
 
 # WebSockets
 ## Overview
-*WebSocket* is a networking protocol, like HTTP. It lets clients (in this case, your computer) communicate with servers (in this case, also your computer) using *WebSocket**s***. It sends messages quickly - great for real-time updates. In our codebase, when a ROS topic is published, it gets sent to the backend, and then forwarded to the frontend via a WebSocket (if one has been set up). It also works in reverse; a frontend element can send messages to the backend and then to the rover.
+*WebSocket* is a networking protocol, like HTTP. It lets computers talk to each other via *WebSocket**s***. It sends messages quickly - great for real-time updates. In our codebase, when a ROS topic is published, it gets sent to the backend, and then forwarded to the frontend via a WebSocket (if one has been set up). It also works in reverse; a frontend element can send messages to the backend and then to the rover.
 
 ## How They're Used Here
 To use a WebSocket in a component, we first import necessary dependencies and define the necessary functions:
+
 ```typescript
 import { useWebsocketStore } from '@/stores/websocket'
 ...
@@ -171,7 +175,7 @@ onMounted(() => {
 
 :::important
   WebSocket setup and closing is typically handled in the highest level component, in a different way than above.  
-  Check [Websocket Handlers](/teleop/consumers-lookup) for more information.
+  Check [Websocket Handlers](consumers-lookup.md) for more information.
 :::
 
 Messages can now be sent through this WebSocket (WebSocket with id "starter"). When the Vue component is unmounted, we also have to close the WebSocket.
@@ -206,7 +210,7 @@ Next, undo changing ```timestamp```, and try this challenge: Get the following t
 ---
 # Components Inside of Components
 
-If you have pried into some of the other views/pages, you've seen they have many sections with complex parts, and that some of those sections are reused on different pages. These sections are called **components**. The view itself is also a component. The Starter page is sparse, so let's try to add some to it.  
+If you have pried into some of the other views/pages, you've seen they have many sections with complex parts, and that some of those sections are reused on different pages. These sections are called *components*. The view itself is also a component. The Starter page is sparse, so let's try to add some to it.  
 
 It would be nice to test the rover's arm on the page, so we should add the necessary components for that. First, we have to import them inside of the ```<script>``` tag. Replace the ```// TODO import components```:
 ```typescript
@@ -482,4 +486,4 @@ There you have it! Your first teleop project done. It was a lot to take in, so d
 * **Ctrl-f, ctrl-shift-f, ctrl-p, and ctrl-click are your best friends.** I think I learned the most about MRover by looking at files related to what I was working on. Learn what these do, and try them out.
 
 
-Now, go eat lunch or something. You've probably been staring at your screen a while.
\ No newline at end of file
+Now, go eat lunch or something. You've probably been here a while.
\ No newline at end of file

From eb1bcfc3b0bf0fd7f9d93929afd9a30df88594d2 Mon Sep 17 00:00:00 2001
From: kmaglo-um <kmaglo@umich.edu>
Date: Mon, 11 May 2026 18:42:34 -0400
Subject: [PATCH 07/12] Fixed misspelling

---
 src/content/docs/teleop/starter-project.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/docs/teleop/starter-project.md b/src/content/docs/teleop/starter-project.md
index 72b1d12..d473816 100644
--- a/src/content/docs/teleop/starter-project.md
+++ b/src/content/docs/teleop/starter-project.md
@@ -440,7 +440,7 @@ git status
 git commit -m "Starter project completed"
 ```
 
-This commits the changes *locally*. It only exists on your computer. To send your changes to the shared codebash, type this:
+This commits the changes *locally*. It only exists on your computer. To send your changes to the shared codebase, type this:
 
 ```bash
 git push

From 3ce78a82eff3c13ed3a9ee4f434fd17173712b54 Mon Sep 17 00:00:00 2001
From: kmaglo-um <kmaglo@umich.edu>
Date: Tue, 12 May 2026 16:11:38 -0400
Subject: [PATCH 08/12] Added recieving message

---
 src/content/docs/teleop/starter-project.md | 25 ++++++++++++++++++++--
 1 file changed, 23 insertions(+), 2 deletions(-)

diff --git a/src/content/docs/teleop/starter-project.md b/src/content/docs/teleop/starter-project.md
index d473816..525bc79 100644
--- a/src/content/docs/teleop/starter-project.md
+++ b/src/content/docs/teleop/starter-project.md
@@ -147,7 +147,7 @@ sendMessage('starter', {
   timestamp: new Date().toISOString(),
 })
 ```
-This is the main attraction of this function. It sends a 'debug' message to the 'starter' websocket containing the current time. 
+This is the main attraction of this function. It sends a *"debug"* message to the *"starter"* websocket containing the current time. 
 
 ---
 
@@ -198,8 +198,12 @@ sendMessage('starter', {
 })
 ```
 
+### 1
+
 Change the ```new Date().toISOString()``` to some other value. Press the button and see what happens in the terminal.
 
+### 2
+
 Next, undo changing ```timestamp```, and try this challenge: Get the following to display in your terminal:
 ```bash
 [gui_backend.sh-1] [WARN] testing message 'Phil' received at <current time>
@@ -207,6 +211,23 @@ Next, undo changing ```timestamp```, and try this challenge: Get the following t
 
 *Hint: look in ```starter_ws.py```. Where is a message's type used? What data does the WebSocket expect when it receives a particular message?*
 
+### 3
+
+Finally, try receiving a message. The starter websocket publishes a String message to *"foo"* every 2 seconds. Get it to display that message in the browser's console.
+
+*Hint:*
+
+``` javascript
+// TODO onMessage
+onMessage<?>('starter', '?', msg => {
+  console.log(?)
+})
+```
+
+:::note
+Use **ctrl+shift+i** to open the browser console.
+:::
+
 ---
 # Components Inside of Components
 
@@ -481,7 +502,7 @@ There you have it! Your first teleop project done. It was a lot to take in, so d
 
 * **Read the docs.** You were probably already doing that, but, if you weren't, go ahead and do that. Try to read all about ROS2, all about teleop, the general resources, and some of each of the other teams.
 * **Skim the codebase.** Look at files at multiple parts of the codebase, and try to figure out what they do. Modify them, remove them, add them, and see what happens. You can reset a branch back to its remote version with ```git reset --hard origin/<branch-name>```. I recommend looking in the views, the components, the _ws.py files, the .msgs, the shell scripts (.sh files), and whatever seems to interest you.
-* **Customize your environment.** Change the colors on your terminal. Learn keyboard shortcuts for VSCode (did you know **ctrl-alt-"-"** will move the cursor to its previous position, even between files). Try out Vim. Install some extensions. Put up a fancy wallpaper. Making navigating your computer easy will pay off in the long run.
+* **Customize your environment.** Change the colors on your terminal. Learn keyboard shortcuts for VSCode (did you know **ctrl-alt-"-"** will move the cursor to its previous position on Ubuntu, even between files). Try out Vim. Install some extensions. Put up a fancy wallpaper. Making navigating your computer easy will pay off in the long run.
 * **Talk with other members.** MRover is a team, and we work best when there's good communication. Try to familiarize yourself with your teammates and some members of other teams too. Heck, try out another team if they look fun, I ain't stopping you. If you have any questions at all, don't be afraid to ask me or someone else.  
 * **Ctrl-f, ctrl-shift-f, ctrl-p, and ctrl-click are your best friends.** I think I learned the most about MRover by looking at files related to what I was working on. Learn what these do, and try them out.
 

From 8e9db2e2d089004ed5c8fbd9a740ba9035d334d9 Mon Sep 17 00:00:00 2001
From: kmaglo-um <kmaglo@umich.edu>
Date: Tue, 12 May 2026 16:19:19 -0400
Subject: [PATCH 09/12] Minor inconsistency fixed

---
 src/content/docs/teleop/starter-project.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/docs/teleop/starter-project.md b/src/content/docs/teleop/starter-project.md
index 525bc79..8c3d24c 100644
--- a/src/content/docs/teleop/starter-project.md
+++ b/src/content/docs/teleop/starter-project.md
@@ -218,7 +218,7 @@ Finally, try receiving a message. The starter websocket publishes a String messa
 *Hint:*
 
 ``` javascript
-// TODO onMessage
+// TODO add onMessage
 onMessage<?>('starter', '?', msg => {
   console.log(?)
 })

From 5d1caf9dc3054aeb562c9aa9b5e0e0291e2e531d Mon Sep 17 00:00:00 2001
From: kmaglo-um <kmaglo@umich.edu>
Date: Tue, 12 May 2026 16:36:17 -0400
Subject: [PATCH 10/12] Added 2026s

---
 src/content/docs/teleop/starter-project.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/content/docs/teleop/starter-project.md b/src/content/docs/teleop/starter-project.md
index 8c3d24c..d7eefa8 100644
--- a/src/content/docs/teleop/starter-project.md
+++ b/src/content/docs/teleop/starter-project.md
@@ -481,13 +481,13 @@ This tells git to create a *remote branch* (shared) to match with your *local br
 If this were a normal feature, this would be when you make a *pull request*, but this feature isn't going into the main branch. If it was pulled, you should delete the feature branch afterwards. If you want to delete your starter branch remotely, run this. 
 
 ```bash
-git push -d origin <your-initials>/teleop-starter
+git push -d origin <your-initials>/teleop-starter-2026
 ```
 
 To delete it locally (although I advise you keep the branch for your future reference), run this:
 
 ```bash
-git branch -d <your-initials>/teleop-starter
+git branch -d <your-initials>/teleop-starter-2026
 ```
 
 Again, if this was a real feature, you **absolutely should** delete the remote *and* local branch **after** the pull request gets approved.

From 5143d8f538260b17ca27af90bb88127ab88dbf66 Mon Sep 17 00:00:00 2001
From: kmaglo-um <kmaglo@umich.edu>
Date: Wed, 13 May 2026 11:53:09 -0400
Subject: [PATCH 11/12] Reformat important sections

---
 src/content/docs/teleop/starter-project.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/content/docs/teleop/starter-project.md b/src/content/docs/teleop/starter-project.md
index d7eefa8..046e8cc 100644
--- a/src/content/docs/teleop/starter-project.md
+++ b/src/content/docs/teleop/starter-project.md
@@ -173,7 +173,7 @@ onMounted(() => {
 })
 ```
 
-:::important
+:::caution
   WebSocket setup and closing is typically handled in the highest level component, in a different way than above.  
   Check [Websocket Handlers](consumers-lookup.md) for more information.
 :::
@@ -319,7 +319,7 @@ A *flexbox* is a container that holds elements in a single row or column. It can
 See more info at [this Geeks for Geeks article](https://www.geeksforgeeks.org/css/comparison-between-css-grid-css-flexbox/) (albeit, for base CSS).
 :::
 
-::important
+:::caution
 The basestation is designed to display best on a **1080p** screen - the one used at competition. You might have to adjust your settings or fullscreen the page to match it.
 :::
 

From 0336f3b543b1281b0461166304d6525caf7e6f3b Mon Sep 17 00:00:00 2001
From: kmaglo-um <kmaglo@umich.edu>
Date: Wed, 13 May 2026 11:56:32 -0400
Subject: [PATCH 12/12] Change title formatting

---
 src/content/docs/teleop/starter-project.md | 56 +++++++++++-----------
 1 file changed, 28 insertions(+), 28 deletions(-)

diff --git a/src/content/docs/teleop/starter-project.md b/src/content/docs/teleop/starter-project.md
index 046e8cc..af01f07 100644
--- a/src/content/docs/teleop/starter-project.md
+++ b/src/content/docs/teleop/starter-project.md
@@ -2,7 +2,7 @@
 title: "Teleop Starter Project"
 ---
 
-# Introduction
+## Introduction
 
 Here, you will complete a Vue component by:
 * Creating page elements.
@@ -14,9 +14,9 @@ The tasks you complete in this project will be similar to tasks that you see in
 
 ---
 
-# Getting Started
+## Getting Started
 
-## Opening the Code
+### Opening the Code
 First, go to [Teleop Quickstart](quickstart.md) and make sure your environment is set up. Critically, make sure you've run ```./build.sh``` and have all necessary dependencies.
 
 Open up a terminal, and type ```mrover```. Then: 
@@ -40,7 +40,7 @@ Whenever you create a new feature, you should make a new branch and follow the n
 
 Now you (hopefully) have the starter code ready to be worked on. But how do you run and debug it?  
 
-## Running the Code
+### Running the Code
 
 Go to the url ```http://localhost:8080/starter``` in your browser. You should see an error page. This is because it is trying to access a server on and IP address that doesn't have any - ```localhost``` a.k.a. ```127.0.0.1``` a.k.a. **your** computer. To create the server it needs, go to your terminal, and run
 ```bash
@@ -59,7 +59,7 @@ This launches both the frontend and the backend. Now once you go back to your br
 
 ---
 
-# Vue Files and Editing
+## Vue Files and Editing
 
 Now, open up ```StarterProject.vue``` in a code editor. It's easiest to just run this in a new terminal:
 ```bash
@@ -92,9 +92,9 @@ Now, you have a button that does absolutely nothing! Note that if you go back to
 
 ---
 
-# Typescript
+## Typescript
 
-## Connecting Script to Page Elements
+### Connecting Script to Page Elements
 
 We would probably like our buttons to not do nothing, so let's fix that by adding some functionality.  
   
@@ -128,7 +128,7 @@ Now click it and... still nothing? Look at the box that says "starter" in the to
 
 Let's go through the code to see what exactly is going on.
 
-## Function Analysis
+### Function Analysis
 
 ```typescript
 const interval = setInterval(() => {
@@ -151,11 +151,11 @@ This is the main attraction of this function. It sends a *"debug"* message to th
 
 ---
 
-# WebSockets
-## Overview
+## WebSockets
+### Overview
 *WebSocket* is a networking protocol, like HTTP. It lets computers talk to each other via *WebSocket**s***. It sends messages quickly - great for real-time updates. In our codebase, when a ROS topic is published, it gets sent to the backend, and then forwarded to the frontend via a WebSocket (if one has been set up). It also works in reverse; a frontend element can send messages to the backend and then to the rover.
 
-## How They're Used Here
+### How They're Used Here
 To use a WebSocket in a component, we first import necessary dependencies and define the necessary functions:
 
 ```typescript
@@ -180,7 +180,7 @@ onMounted(() => {
 
 Messages can now be sent through this WebSocket (WebSocket with id "starter"). When the Vue component is unmounted, we also have to close the WebSocket.
 
-## Status Indicator
+### Status Indicator
 
 The box in the upper left is a status indicator. A green light (on the left) indicates a transmit, while a red light indicates a receive. If the whole box is yellow, this indicates a disconnect. Go back into your terminal and press **ctrl-c**. That kills the backend, causing all sockets to disconnect. The frontend will stick around until the page unloads. Restart the basestation by running the launch command (the command will probably come back if you just press **up** in your terminal).
 
@@ -189,7 +189,7 @@ The box in the upper left is a status indicator. A green light (on the left) ind
 If you want to copy something in the terminal, use **ctrl-shift-c**, or just drag-select the text; it will depend on your environment.
 :::
 
-## Try it yourself
+### Try it yourself
 
 ```typescript
 sendMessage('starter', {
@@ -198,11 +198,11 @@ sendMessage('starter', {
 })
 ```
 
-### 1
+#### 1
 
 Change the ```new Date().toISOString()``` to some other value. Press the button and see what happens in the terminal.
 
-### 2
+#### 2
 
 Next, undo changing ```timestamp```, and try this challenge: Get the following to display in your terminal:
 ```bash
@@ -211,7 +211,7 @@ Next, undo changing ```timestamp```, and try this challenge: Get the following t
 
 *Hint: look in ```starter_ws.py```. Where is a message's type used? What data does the WebSocket expect when it receives a particular message?*
 
-### 3
+#### 3
 
 Finally, try receiving a message. The starter websocket publishes a String message to *"foo"* every 2 seconds. Get it to display that message in the browser's console.
 
@@ -229,7 +229,7 @@ Use **ctrl+shift+i** to open the browser console.
 :::
 
 ---
-# Components Inside of Components
+## Components Inside of Components
 
 If you have pried into some of the other views/pages, you've seen they have many sections with complex parts, and that some of those sections are reused on different pages. These sections are called *components*. The view itself is also a component. The Starter page is sparse, so let's try to add some to it.  
 
@@ -267,7 +267,7 @@ Now the page looks... kinda weird actually. We should format it.
 
 ---
 
-# Formatting
+## Formatting
 
 [Tailwind](https://tailwindcss.com/docs/styling-with-utility-classes) is a CSS framework that we use for styling. It provides classes to modify styles of elements. Add some to the new components.
 
@@ -325,9 +325,9 @@ The basestation is designed to display best on a **1080p** screen - the one used
 
 ---
 
-# ```Arm Controls``` and ```Rover3D```
+## ```Arm Controls``` and ```Rover3D```
 
-## Overview
+### Overview
 
 ```Rover3D``` is a display of the rover in its current state. It also displays a *costmap*, a grid of how "expensive" it would be for the rover to navigate a certain section of terrain.  
 
@@ -365,7 +365,7 @@ However, pressing anything won't move the arm currently. This is for two reasons
 * The arm mode has to be set.
 * The backend needs a rover with an arm to move.
 
-## Setting up ```Arm Controls```
+### Setting up ```Arm Controls```
 
 Head inside ```ArmControls.vue```. In VSCode, you can control click its name from its html tag or import statement. Then, go to this div:
 
@@ -401,7 +401,7 @@ Click throttle. The hard part is now done. Next, we need to get the rover, or at
 
 ---
 
-# Simulator
+## Simulator
 
 Open a new terminal, but keep the old one running the basestation. Run and then run these commands. If you get stuck in the simulator, press **esc**:
 
@@ -412,17 +412,17 @@ ros2 launch mrover simulator.launch.py
 
 The simulator and RViz will open in new windows. *RViz* is a useful tool that allows you to see what the rover sees, and what topics are being broadcast. The simulator provides a digital version of the rover that communicates with the basestation in a similar way to if it was real.
 
-## Navigating the Simulator
+### Navigating the Simulator
 
 The simulator is the one with the MRover logo as its symbol. You can move the camera with **WASD**, **space**, **ctrl**, and the mouse. **Esc** toggles the mouse from being locked to unlocked and back again. 
 
-## Controlling the Rover
+### Controlling the Rover
 
 Everything is currently frozen. Press **p** to enable physics, and uncheck **publish ik**. You can move the rover with **i**, **j**, **l**, and "**,**" while the mouse is locked. Go back to the Starter view in your browser. Make sure throttle mode is selected, and use **WASD** to control the arm. It will move in both the browser and the simulator. 
 
 ---
 
-# ROS Topics
+## ROS Topics
 
 One last thing - Open up yet another terminal, but leave the other two running. Run these commands:
 
@@ -441,7 +441,7 @@ Whenever you move the arm, a new message will appear. Press **ctrl-c** to stop t
 
 ---
 
-# Git Commits
+## Git Commits
 
 The starter project is pretty much done now, you can stop the simulator and basestation. Let's add it to the codebase for safekeeping. *Commit* your changes by running this in a terminal:
 
@@ -476,7 +476,7 @@ git push --set-upstream origin <your-initials>/teleop-starter-2026
 
 This tells git to create a *remote branch* (shared) to match with your *local branch* (on your computer), and to put the changes there. Now that the remote branch exists, you can simply type ```git push``` whenever you make a new commit.  
 
-## When a Feature is Finished
+### When a Feature is Finished
 
 If this were a normal feature, this would be when you make a *pull request*, but this feature isn't going into the main branch. If it was pulled, you should delete the feature branch afterwards. If you want to delete your starter branch remotely, run this. 
 
@@ -496,7 +496,7 @@ Again, if this was a real feature, you **absolutely should** delete the remote *
 You shouldn't wait until a feature is completely, all-the-way done before making a commit. Commit whenever you get a new part of it working, or any noteworthy modification. Make a pull request when it is fully done.
 :::
 
-# Conclusion and Next Steps
+## Conclusion and Next Steps
 
 There you have it! Your first teleop project done. It was a lot to take in, so don't sweat if you don't get it all right away. With practice, it will come to you. Here are some things you can do to learn more, and help you in the future: