feat: add new labs

lab_035.html

@@ -76,8 +76,15 @@ <h2>The Box Model</h2>
         lay on the webpage.</p>
 
       <h2>Margins and Padding</h2>
-      All edges of the margin and the padding can be set all together or individually. For example:</p>
+        <p>All edges of the margin and the padding can be set all together or individually. For example:</p>
       <pre data-range="1, 15" data-src="prism/css/3501.css"></pre>
+      <p>If you go into your browser, right-click and select <strong>Inspect</strong> you will get the developer tool
+        for analyzing and inspecting webpages in real time. Selecting the different HTML elements in the code, will highlight
+        their box model for you to see.</p>
+      <p>You can see the margins, padding, and borders that each HTML element has.</p>
+      <video class="video" controls>
+        <source src="assets/3501.mp4" type="video/mp4">
+      </video>
       <h2>Borders</h2>
       <p>Borders have a few more properties that control them. The simplest way to construct a border
         is to set a <code class="language-css">border-style</code>. The values it can be are:

lab_036.html

@@ -69,6 +69,17 @@ <h2>Borders</h2>
           class="language-css">border-bottom</code>, and <code class="language-css">border-left</code>.</p>
       <p>Here's a few examples of the shorthand:</p>
       <pre data-range="12,25" data-src="prism/css/3601.css"></pre>
+      <h2>More CSS</h2>
+      <p>Use the <code class="language-css">margin</code>, <code class="language-css">padding</code>, and <code
+          class="language-css">border</code>
+        properties to add some style to your website. Put space between elements or set them up to be properly laid out
+        in the next lab.</p>
+      <p>There are a lot of different properties we haven't covered that you could attempt to add to your page.
+        For example: <code class="language-css">border-radius</code>, <code class="language-css">box-shadow</code>, or
+        <code class="language-css">text-shadow</code>.
+        Take some time to explore them here: <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference"
+          target="_blank" rel="noopener">https://developer.mozilla.org/en-US/docs/Web/CSS/Reference</a>
+      </p>
 
     </div>
   </main>

lab_037.html

@@ -45,6 +45,38 @@ <h2>Goals</h2>
       <ul>
         <li>Learn about different display types in CSS</li>
       </ul>
+      <h2>Display Types</h2>
+      <p>The final thing we'll cover in CSS are the <em>display types</em> and the <code
+          class="language-css">display</code> property. <code class="language-css">display</code> is how you manipulate
+        HTML elements to present themselves in a specific way. </p>
+      <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 four display types we'll focus on: <strong>inline</strong>, <strong>block</strong>,
+        <strong>flex</strong>, and <strong>grid</strong>.
+      </p>
+      <p class="note"><strong>Note:</strong> You can also do <code class="language-css">display: none</code> which hides
+        the element.</p>
+      <h2>Inline</h2>
+      <p><em>Inline</em> display does exactly what's on the label. When applied to to an element it treats it as in line
+        with other elements. The next element will be placed adjacent to the applied element without a line break and
+        the applied element will only take up as much width as necessary.</p>
+      <p id="anchor-example"><a href="#anchor-example">Anchor links</a> and <em>emphasis</em> are two HTML elements
+        which are rendered inline by default.</p>
+      <h2>Block</h2>
+      <p><em>Block</em> elements, on the other hand, generate a <em>block-level</em> element. A block-level element
+        takes up the entire width given to it and generates with line breaks before and after the element. <code
+          class="language-html">&lt;p&gt;</code>, <code class="language-html">&lt;div&gt;</code>, and
+        <code class="language-html">&lt;h1&gt;</code> are all examples of block-level elements.
+      </p>
+      <p class="note"><strong>Note:</strong> Children and descendant HTML elements of an element using a display type
+        will inherit the display type of their parent. If your <code class="language-html">&lt;div&gt;</code> has a 
+        <code class="language-css">display: block</code> then descendents of the  <code class="language-html">&lt;div&gt;</code>
+        will also have <code class="language-css">display: block</code>.</p>
+      <h2>Flex</h2>
+      <p><em>Flex</em> elements behave like block-level elements, however they are set up to be optimized for user interface
+        design and the one-dimensional layout of items.</p>
+      <h2>Grid</h2>
 
 
     </div>