feat: add new labs

hack4impact-calpoly · Sep 12, 2023 · 64fa319 · 64fa319
1 parent 136049e
commit 64fa319
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 13 deletions.
diff --git a/css/screen.css b/css/screen.css
@@ -176,7 +176,7 @@
   margin-bottom: 0.5rem;
 }
 
-h1:not(.nostyle) {
+h1 {
   border-bottom: 1px solid #ccc;
   padding-bottom: 1rem;
   font-size: 2rem;
@@ -242,7 +242,7 @@ code:not([class]) {
   background-position: 0 1rem;
 }
 
-h2:not(.nostyle) {
+h2 {
   padding-top: 1rem;
   color: blue;
   font-size: 1.75rem;
@@ -254,7 +254,7 @@ h2 + ul {
   list-style-type: circle;
 }
 
-h3:not(.nostyle) {
+h3 {
   font-size: 12px;
   font-weight: 400;
   text-transform: uppercase;
@@ -369,8 +369,9 @@ text.actor,
   font-size: 14px !important;
 }
 
-.nostyle {
-  font-family: serif;
+.iframe {
+  width: 100%;
+  height: 40%;
 }
 
 /* Footer
@@ -459,16 +460,16 @@ text.actor,
     padding-top: 4rem;
   }
 
-  h1:not(.nostyle) {
+  h1 {
     font-size: 2.75rem;
   }
 
-  h2:not(.nostyle) {
+  h2 {
     position: relative;
     font-size: 2.25rem;
   }
 
-  h2:not(.nostyle):before {
+  h2:before {
     position: absolute;
     left: -3.5rem;
     display: inline-block;

diff --git a/js/ui.js b/js/ui.js
@@ -102,8 +102,6 @@ const labs = [
   "Links, Lists, and Images",
   "Tables and Forms",
   "Semantic HTML",
-  "Accessible Links",
-  "Accesisble Forms",
   "Embedded Content",
   "Applying CSS",
   "Selectors, Properties, and Values",

diff --git a/lab_019.html b/lab_019.html
@@ -102,7 +102,7 @@ <h2>Headings</h2>
           class="language-html">&lt;h2&gt;</code> and <code class="language-html">&lt;h6&gt;</code> should be the
         sub-heading of <code class="language-html">&lt;h5&gt;</code> and so on.</p>
       <h3 class="file-heading"><em>headings</em></h3>
-      <pre class="file"><h1 class="nostyle">heading 1</h1><h2 class="nostyle">heading 2</h2><h3 class="nostyle">heading 3</h3><h4 class="nostyle">heading 4</h4><h5 class="nostyle">heading 5</h5><h6 class="nostyle">heading 6</h6></pre>
+      <iframe class="iframe file" src="prism/html/1903.html"></iframe>
 
     </div>
   </main>

diff --git a/lab_022.html b/lab_022.html
@@ -51,7 +51,7 @@ <h2>Goals</h2>
           Add a <code class="language-html">&lt;ul&gt;</code> to your personal website
         </li>
         <li>
-          Add an <code class="language-html">&lt;image&gt;</code> to your personal website
+          Add an <code class="language-html">&lt;img&gt;</code> to your personal website
         </li>
       </ul>
       <h2>Connect with Links</h2>
@@ -74,7 +74,18 @@ <h2>Test Your Connection</h2>
         would see on other websites. If you experiment with changing your <code>href="index.html"</code> to your other
         HTML pages, you can click and move to that page.</p>
       <p>Once you're done experimenting, change it back to <code>href="index.html"</code>!</p>
-
+      <img class="image" src="assets/2201.png"
+        alt="Website index.html with logo text that is blue and underlined, a link">
+      <h2>Lists</h2>
+      <p>There are two types of lists we will focus on. Ordered lists and unordered lists. Both lists hold list
+        items,but ordered lists precede each item with a incrementing numbers while unordered lists usually use bullet
+        points.</p>
+      <p>Both lists have the same structure with <code class="language-html">&lt;ol&gt;</code> tags representing an
+        ordered list and <code class="language-html">&lt;ul&gt;</code> tags representing and unordered list.</p>
+      <h3 class="file-heading"><em>lists</em></h3>
+      <pre class="file line-numbers" data-range="10,27" data-src="prism/html/2202.html"></pre>
+      <h3 class="file-heading"><em>lists</em></h3>
+     <iframe class="iframe file" src="prism/html/2202.html"></iframe>