feat: additional references and labs

css/screen.css

@@ -384,19 +384,22 @@ text.actor,
   display: flex;
 }
 
+.side-by-side-container:first-child {
+  border-bottom-right-radius: 0 !important;
+}
+
 .side-by-side-child:first-child {
   flex-grow: 1;
+  /* border-bottom-right-radius: 0 !important;  
+* TODO: figure out why this stying is not working 
+* */
 }
 
 .side-by-side-child:last-child {
   flex-basis: 1;
   margin: 0 0 0.5rem 0;
 }
 
-div > .file {
-  border-bottom-right-radius: 0 !important;
-}
-
 .commit-labels,
 .branchLabel {
   font-family: monospace;

js/ui.js

@@ -108,7 +108,7 @@ const labs = [
   "On the Web",
   "Cascading Style Sheets",
   "Selectors",
-  "Pseudo Classes and Pseudo Elements",
+  "Pseudo Classes",
   "Grouping and Nesting",
   "Specificity",
   "Colors and Text",

lab_029.html

@@ -63,17 +63,20 @@ <h2>Applying CSS</h2>
       <h3 class="file-heading"><em>index.html</em></h3>
       <pre class="file line-numbers" data-range="1,6" data-src="prism/html/2901.html"></pre>
       <p>This will tell your browser to apply the styles in <code>styles.css</code> to your HTML page. We'll be
-      using the same CSS style sheet for all our pages so add this to all your other HTML pages as well.
+        using the same CSS style sheet for all our pages so add this to all your other HTML pages as well.
       </p>
       <p class="note"><strong>Note:</strong> As you go through these next few sections, be sure to still stage and
         commit your changes. You don't need to push as often to the remote repository, but when you're happy with
         something it might be a good idea to also push.</p>
-        <h2>Make It Your Own</h2>
-        <p>CSS is very flexible and has a lot of capabilities. Instead of describing everything you need to do like
-        with HTML, we'll go over the most important CSS concepts, outline what the necessary CSS is, and <strong>leave all
-        the rest of the styling up to you</strong>!</p>
-        <p>If you just follow our stylings and keep everything the same, you'll get a very specific looking website so 
-        we encourage you to make it our own!</p>
+      <h2>Make It Your Own</h2>
+      <p>CSS is very flexible and very powerful. Instead of describing everything you need to do like
+        with HTML, we'll go over the most important CSS concepts and <strong>leave the rest of the styling up to
+          you</strong>.</p>
+      <p>We'll provide you with what our stylesheet is as well as a stylesheet of just the necessary requirements.
+        If you just follow our stylings and keep everything the same, you'll get a very specific looking website so
+        we encourage you to take only the necessary stylesheet and make it your own!</p>
+      <p class="note"><strong>Note:</strong> If you need any help or if there is some style you are trying to achieve, but
+      are unable to then we <em>strongly</em> suggest you use GitHub Discussions to ask questions. We are here to help you!</p>
 
 
 

lab_031.html

@@ -38,7 +38,7 @@
     <div id="content" tabindex="-1">
       <h1 class="lab_title">
         <em>Lab 31</em>
-        Pseudo Classes and Pseudo Elements
+        Pseudo Classes
       </h1>
 
       <h2>Goals</h2>
@@ -47,19 +47,22 @@ <h2>Goals</h2>
       </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>,
-      <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>
-      <pre class="file line-numbers" data-range="1,8" data-src="prism/css/3101.css"></pre>
-
-      <h2>Pseudo Elements</h2>
-      <p><em>Pseudo elements</em> are attached in the exact same way as pseudo classes,
-      but instead of targeting an element's state, it targets some part of the element's content
-      that doesn't necessarily exist in the HTML structure. We'll cover <code class="language-css">first-letter</code>,
-      <code class="language-css">first-line</code>, <code class="language-css">before</code>, and 
-      <code class="language-css">after</code>.</p>
+        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>,
+        <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>
+      <pre data-range="1,8" data-src="prism/css/3101.css"></pre>
+      <p>The following pseudo classes handle interactions with link.</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>
+      </ul>
 
+      <pre data-range="10, 21" data-src="prism/css/3101.css"></pre>
 
     </div>
   </main>

prism/css/3101.css

@@ -6,3 +6,16 @@ a:link {
 a:visited {
   color: purple;
 }
+
+a:active {
+  color: red;
+}
+
+a:hover {
+  color: green;
+  text-decoration: none;
+}
+
+input:focus {
+  border: 1px solid #aaa;
+}