diff --git a/basics-01-starting-code/app.js b/basics-01-starting-code/app.js
index e69de29..e814851 100644
--- a/basics-01-starting-code/app.js
+++ b/basics-01-starting-code/app.js
@@ -0,0 +1,12 @@
+"use strict";
+
+const app = Vue.createApp({
+    data() {
+        return {
+            courseGoal: "Finish the course and learn Vue.",
+            vueLink: "https://vuejs.org",
+        };
+    },
+});
+
+app.mount("#user-goal");
diff --git a/basics-01-starting-code/index.html b/basics-01-starting-code/index.html
index 9135b27..7772f0b 100644
--- a/basics-01-starting-code/index.html
+++ b/basics-01-starting-code/index.html
@@ -1,24 +1,25 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
+
+<head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vue Basics</title>
-    <link
-      href="https://fonts.googleapis.com/css2?family=Jost:wght@400;700&display=swap"
-      rel="stylesheet"
-    />
+    <link href="https://fonts.googleapis.com/css2?family=Jost:wght@400;700&display=swap" rel="stylesheet" />
     <link rel="stylesheet" href="styles.css" />
     <script src="https://unpkg.com/vue@next" defer></script>
     <script src="app.js" defer></script>
-  </head>
-  <body>
+</head>
+
+<body>
     <header>
-      <h1>Vue Course Goals</h1>
+        <h1>Vue Course Goals</h1>
     </header>
     <section id="user-goal">
-      <h2>My Course Goal</h2>
-      <p></p>
+        <h2>My Course Goal</h2>
+        <p>{{ courseGoal }}</p>
+        <p>Learn more <a v-bind:href="vueLink">about Vue</a>.</p>
     </section>
-  </body>
+</body>
+
 </html>
