diff --git a/Chapter3Project/index.html b/Chapter3Project/index.html
index 7bb20ed..76eaf5f 100644
--- a/Chapter3Project/index.html
+++ b/Chapter3Project/index.html
@@ -10,8 +10,64 @@
     <link rel="stylesheet" href="styles.css">
   </head>
   <body>
-    <h1>WEB124 Project 3</h1>
-    <h2>Nicola Clark</h2>
+    <header>
+      <h1>WEB124 Project 3</h1>
+      <h2>Nicola Clark</h2>
+    </header>
+    <main>
+      <dl>
+        <dt>
+          <span class="qNum">1.</span>
+          Create a variable to store your full name.
+        </dt>
+        <dd>
+          <code>const myName = 'Nicola Clark';</code>
+        </dd>
+        <dt>
+          <span class="qNum">2.</span>
+          Create a variable to store your desired annual salary.
+        </dt>
+        <dd>
+          <code>const myDesiredAnnualSalary = 60_000;</code>
+        </dd>
+        <dt>
+          <span class="qNum">3.</span>
+          Create a variable to store your veteran status.
+        </dt>
+        <dd>
+          <code>const amIAVeteran = false;</code>
+        </dd>
+        <dt>
+          <span class="qNum">4.</span>
+          Create an array to store the names of three of your friends.
+        </dt>
+        <dd>
+          <code>const threeOfMyFriends = ['Jay', 'Alssya', 'Tonisha'];</code>
+        </dd>
+        <dt>
+          <span class="qNum">5.</span>
+          Create an array to store the desired annual salaries of your three
+          friends.
+        </dt>
+        <dd>
+          <code>const myThreeFriendsDesiredSalaries = [84_000, 72_000, 60_000];</code>
+        </dd>
+        <dt>
+          <span class="qNum">5.</span>
+          Create a literal object to store the first name, last name, and
+          desired annual salaries of a fourth friend.
+        </dt>
+        <dd>
+          <code>
+            const myFourthFriend = {<br>
+              &nbsp;&nbsp;firstName: 'Colton',<br>
+              &nbsp;&nbsp;lastName: 'H',<br>
+              &nbsp;&nbsp;desiredSalary: 84_000,<br>
+            };
+          </code>
+        </dd>
+      </dl>
+    </main>
     <script src="project3.js"></script>
   </body>
 </html>
diff --git a/Chapter3Project/styles.css b/Chapter3Project/styles.css
index e69de29..a950098 100644
--- a/Chapter3Project/styles.css
+++ b/Chapter3Project/styles.css
@@ -0,0 +1,107 @@
+/*
+  Nicola Clark
+  30MAR25
+*/
+
+/*
+  Web fonts from Google Fonts
+
+  Serif: Domine
+  Sans-serif: Nunito Sans
+  Monospace: Fira Code
+*/
+@import url('https://fonts.googleapis.com/css2?family=Domine:wght@400..700&family=Fira+Code&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap');
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+:root {
+  font-family: 'Nunito Sans', sans-serif;
+  font-size: 1.125rem;
+  line-height: 1.5;
+
+  color: var(--color-rich-black);
+
+  /*
+    Colors from coolors.co:
+    https://coolors.co/001524-3c5233-ffecd1-a28497-750d37
+  */
+  --color-claret: #750d37;
+  --color-hunter-green: #3c5233;
+  --color-mountbatten-pink: #a28497;
+  --color-papaya-whip: #ffecd1;
+  --color-rich-black: #001524;
+}
+
+header {
+  background-color: var(--color-rich-black);
+  color: var(--color-papaya-whip);
+
+  padding: 0.5rem 1rem;
+}
+
+h1,
+h2 {
+  font-family: Domine, serif;
+}
+
+main {
+  padding: 0.5rem 1rem;
+}
+
+dl > dt,
+dl > dd:not(:last-child) {
+  margin-bottom: 0.125rem;
+}
+
+dl > dt > span.qNum {
+  font-weight: bold;
+
+  color: var(--color-hunter-green);
+}
+
+dl > dd {
+  background-color: var(--color-hunter-green);
+  color: var(--color-papaya-whip);
+
+  padding: 0.125rem 0.25rem;
+}
+
+dl > dd > code {
+  font-family: 'Fira Code', monospace;
+  font-feature-settings: 'calt';
+}
+
+@media screen and (prefers-color-scheme: dark) {
+  :root {
+    background-color: var(--color-rich-black);
+    color: var(--color-papaya-whip);
+  }
+
+  header {
+    border-bottom: 2px dotted var(--color-papaya-whip);
+  }
+
+  dl > dt > span.qNum {
+    color: var(--color-mountbatten-pink);
+  }
+
+  dl > dd {
+    background-color: var(--color-claret);
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  header,
+  main {
+    padding: 1rem 1.5rem;
+  }
+
+  dl > dt,
+  dl > dd:not(:last-child) {
+    margin-bottom: 0.5rem;
+  }
+}
