feat: more labs

hack4impact-calpoly · Sep 15, 2023 · 7e1bf1d · 7e1bf1d
1 parent bf65e87
commit 7e1bf1d
Show file tree

Hide file tree

Showing 4 changed files with 84 additions and 5 deletions.
diff --git a/assets/badge.png b/assets/badge.png
diff --git a/js/ui.js b/js/ui.js
@@ -115,6 +115,7 @@ const labs = [
   "Margins, Padding, and Borders",
   "Shorthand Properties",
   "Display",
+  "Completing the Starter Pack",
 ];
 
 function generateNav() {

diff --git a/lab_037.html b/lab_037.html
@@ -52,7 +52,8 @@ <h2>Display Types</h2>
       <p>Most browsers have a default representation of each HTML element that consists of default font styles,
         margins, padding, and <strong>display types</strong>. However, just like you can change font styles, margins,
         and padding - you can change the display type to get the behavior and layout you want.</p>
-      <p>There are three display types we'll focus on: <strong>inline</strong>, <strong>block</strong>, and <strong>flex</strong>.
+      <p>There are three display types we'll focus on: <strong>inline</strong>, <strong>block</strong>, and
+        <strong>flex</strong>.
       </p>
       <p class="note"><strong>Note:</strong> You can also do <code class="language-css">display: none</code> which hides
         the element.</p>
@@ -91,11 +92,12 @@ <h2>Flex</h2>
       <p>For more information, this article can explain flexbox better than we ever could: <a
           href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/" target="_blank"
           rel="noopener">https://css-tricks.com/snippets/css/a-guide-to-flexbox/</a>.</p>
-      <h2>Apply Displays</h2>
-      <p>Take a look at the full style sheet to try and understand how the displays are being used. We make <em>liberal</em>
+      <h2>Applying Displays</h2>
+      <p>Take a look at the full style sheet to try and understand how the displays are being used. We make
+        <em>liberal</em>
         use of <code class="language-css">display: flex</code> in our styling. Afterwards, apply display types to your
-        website to give it the layout that you want!</p>
-
+        website to give it the layout that you want!
+      </p>
     </div>
   </main>
   <script src="js/ui.js" type="text/javascript"></script>

diff --git a/lab_038.html b/lab_038.html
@@ -0,0 +1,76 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <title>
+    Lab 38 - Completing the Starter Pack
+  </title>
+  <meta charset="UTF-8" />
+  <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible" />
+  <meta "="" content=" width=device-width, initial-scale=1.0" name="viewport" />
+  <meta content="A guided tour through the fundamentals of Git, HTML, & CSS" name=" description" />
+  <meta content="#0000ff" name="theme-color" />
+  <link href="manifest.json" rel="manifest" />
+  <link href="css/reset.css" media="screen" rel="stylesheet" />
+  <link href="css/screen.css" media="screen" rel="stylesheet" />
+  <link href="css/prism.css" rel="stylesheet" />
+</head>
+
+<body data-lab-id="38">
+  <a class="skip-to-content" href="#content" tabindex="1">
+    Skip to content
+  </a>
+  <main class="layout">
+    <nav id="index">
+      <p class="link-home">
+        <a href="index.html">
+          <span>Hack4Impact Starter Pack</span>
+        </a>
+      </p>
+      <button class="link-menu">
+        Menu
+      </button>
+      <nav tabindex="0">
+        <ol>
+        </ol>
+      </nav>
+    </nav>
+    <div id="content" tabindex="-1">
+      <h1 class="lab_title">
+        <em>Lab 38</em>
+        Completing the Starter Pack
+      </h1>
+
+      <h2>Goals</h2>
+      <ul>
+        <li>Finish the Hack4Impact Starter Pack!</li>
+      </ul>
+      <h2>Submitting Your Website</h2>
+      <p><strong>You did it!</strong> You've finished all the labs in the Hack4Impact Starter Pack.
+        We hope that you've learned a lot and got a lot out of it. You should be very proud of all the work
+        you did!</p>
+      <p>You can keep working on your website until you are satisfied with the way it looks <em>and</em> you
+        can continue to get help all the way until your due date. When you are satisfied with your website, go to <a
+          href="https://github.com/hack4impact-calpoly/starter-pack/discussions/categories/submissions" target="_blank"
+          rel="noopener">GitHub Discussions Submissions</a> and <strong>make a new discussion post</strong> with a
+        <strong>link to your website</strong> and a <strong> link to your GitHub repository</strong>.
+      </p>
+      <p>Once you've done that, you're all done! Congratulations, <a href="assets/badge.png" download="">have a
+          badge!</a></p>
+      <p>Decisions will be out once applications close and all the submissions are reviewed.</p>
+      <h2>Thank You</h2>
+      <p>Thank you again for completing the Hack4Impact Starter Pack. We put a lot of time and care into making this for
+        you, so we hope you found it helpful. Please let us know what you think and how we can do better! We hope to see
+        you as a part of Hack4Impact.</p>
+
+    </div>
+  </main>
+  <script src="js/ui.js" type="text/javascript"></script>
+  <script src="js/prism.js" type="text/javascript"></script>
+  <script type="module">
+    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
+    mermaid.initialize({startOnLoad: true, theme: "base"});
+  </script>
+</body>
+
+</html>