feat: new pages

lab_030.html

@@ -94,6 +94,8 @@ <h2>Class and ID Selectors</h2>
         color of <code class="language-html">&lt;h1&gt;</code> headings with the <code>id="main-title"</code>.
       </p>
       <pre data-range="21,30" data-src="prism/css/3001.css"></pre>
+      <p class="note"><strong>Note:</strong>Make sure the HTML selector comes first and there is no space between the HTML
+      selector and the class or ID in order to use it in this way.</p>
       <h2>Attribute Selectors</h2>
       <p>This is an advanced selector that that we'll use to style <code class="language-html">&lt;input&gt;</code>
         tags. <em>Attribute selectors</em> (<strong>[]</strong>) select an element based on any attributes attached to its HTML

lab_031.html

@@ -43,26 +43,37 @@ <h1 class="lab_title">
 
       <h2>Goals</h2>
       <ul>
-        <li>Learn about pseudo classes and pseudo elements in CSS</li>
+        <li>Learn about pseudo classes in CSS</li>
       </ul>
       <h2>Pseudo Classes</h2>
       <p><em>Pseudo classes</em> are an extra add-on to CSS selectors that make selections
-        that much more specific. They target an element's state or interaction.
-        The ones we will talk about are <code class="language-css">link</code>,
+        that much more specific. They target an element's <strong>state</strong> or <strong>interaction</strong>. For
+        example, if we want a different style for when someone hovers over a button or after a link
+        has been pressed.</p>
+      <p> The ones we will talk about are <code class="language-css">link</code>,
         <code class="language-css">visited</code>, <code class="language-css">active</code>,
         <code class="language-css">hover</code>, and <code class="language-css">focus</code>.
       </p>
-      <p>The pseudo classes below target <em>unvisited</em> and <em>visited</em> links respectively. The styles will
-        apply depending on whether the user has visited the page before.</p>
+      <p>The pseudo classes, <code class="language-css">link</code> and
+        <code class="language-css">visited</code>, below target <em>unvisited</em> and <em>visited</em> links
+        respectively. The styles will apply depending on whether the user has visited the page before.
+      </p>
       <pre data-range="1,8" data-src="prism/css/3101.css"></pre>
-      <p>The following pseudo classes handle interactions with link.</p>
+      <p>The following pseudo classes are <em>dynamic</em> pseudo classes. They are applied when something happens
+        or for a specific kind of interaction.</p>
       <ul>
-        <li><strong>Active</strong> handles the user activating, or clicking on, something e.g. the link.</li>
-        <li><strong>Hover</strong> handles user input moving over the element e.g. a mouse hovering over a link</li>
-        <li><strong>Focus</strong> handles when something is selected by, or is ready for, keyboard input</li>
+        <li><code class="language-css">active</code> handles the user activating, or clicking on, something e.g. the
+          link.</li>
+        <li><code class="language-css">hover</code> handles user input moving over the element e.g. a mouse hovering
+          over a link</li>
+        <li><code class="language-css">focus</code> handles when something is selected by, or is ready for, keyboard
+          input</li>
       </ul>
-
       <pre data-range="10, 21" data-src="prism/css/3101.css"></pre>
+      <p class="note"><strong>Note:</strong> <code class="language-css">focus</code> is most often used for <strong>form
+          elements</strong> such as <code class="language-html">&lt;input&gt;</code> or <code
+          class="language-html">&lt;textarea&gt;</code>, however they can also be used on links for increased
+        accessibility! Some visitors may be using a keyboard to navigate the website.</p>
 
     </div>
   </main>

lab_032.html

@@ -43,8 +43,31 @@ <h1 class="lab_title">
 
       <h2>Goals</h2>
       <ul>
-        <li>Learn about <code>Git</code></li>
+        <li>Learn about grouping and nesting selectors in CSS</li>
       </ul>
+      <h2>Grouping</h2>
+      <p>You can group multiple selectors in order to give them all the same styling. Separate selectors by
+        <strong>commas</strong> before the curly brackets in order to group them.
+      </p>
+      <p>For example:</p>
+      <pre data-range="1, 11" data-src="prism/css/3201.css"></pre>
+      <p>Can be grouped into the following:</p>
+      <pre data-range="13, 17" data-src="prism/css/3201.css"></pre>
+
+      <h2>Nesting</h2>
+      <p>If you have well structured and semantic HTML, you can make use of CSS nesting in order to cut
+        down on the amount of class attributes. Separating two selectors with a <strong>space</strong> will select all
+        the descendents
+        of the first selector that <em>is</em> the second selector.</p>
+      <pre data-range="19, 29" data-src="prism/css/3201.css"></pre>
+      <p>If the HTML was:</p>
+      <pre class="line-numbers" data-range="8,12" data-src="prism/html/3201.html"></pre>
+      <p>You would be able to select the heading and paragraphs with the nested CSS instead of a class or ID attribute.
+        Separating the two selectors is the same as saying "<code class="language-html">&lt;h1&gt;</code> inside of an
+        element with <code>id="special"</code>" or "<code class="language-html">&lt;p&gt;</code> inside of an element
+        with <code>id="special"</code>".
+      </p>
+
 
 
     </div>

prism/css/3001.css

@@ -18,13 +18,13 @@ p {
   background-color: yellow;
 }
 
-p .title {
+p.title {
   font-style: italic;
   font-weight: 500;
   font-size: 16px;
 }
 
-h1 #main-title {
+h1#main-title {
   color: red;
   background-color: blue;
 }

prism/css/3201.css

@@ -0,0 +1,29 @@
+p {
+  color: #000;
+}
+
+h1 {
+  color: #000;
+}
+
+.titles {
+  color: #000;
+}
+
+p,
+h1,
+.titles {
+  color: #000;
+}
+
+#special {
+  color: #000;
+}
+
+#special p {
+  font-weight: bold;
+}
+
+#special h1 {
+  font-size: 25px;
+}

prism/html/3201.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <title></title>
+  </head>
+
+  <body>
+    <div id="special">
+      <h1>Special Heading</h1>
+      <p>Special Paragraph</p>
+      <p>Another Special Paragraph</p>
+    </div>
+  </body>
+</html>