<commit_before><!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Web Fundamentals</title>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">
    <link rel="stylesheet" href="../css/reveal.css">
    <link rel="stylesheet" href="../css/theme/black.css" id="theme">

    <!-- Code syntax highlighting -->
    <link rel="stylesheet" href="../lib/css/zenburn.css">

    <!-- Printing and PDF exports -->
    <script>
      var link = document.createElement( 'link' );
      link.rel = 'stylesheet';
      link.type = 'text/css';
      link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
      document.getElementsByTagName( 'head' )[0].appendChild( link );
    </script>

    <!--[if lt IE 9]>
    <script src="lib/js/html5shiv.js"></script>
    <![endif]-->
  </head>

  <body>
    <div class="reveal">
      <!-- Any section element inside of this container is displayed as a slide -->
      <div class="slides">
        <section>
          <h2>Web Fundamentals</h2>
          <p>
            <small>
              Taught by
              <a href="http://www.aaackerman.nyc"><NAME></a>
              <br>
              Code available at
              <a href="https://github.com/newschool-webfundamentals">https://github.com/newschool-webfundamentals</a>
              <br>
              Presentations available at
              <a href="http://newschool-webfundamentals.github.io">newschool-webfundamentals.github.io</a>
            </small>
          </p>
        </section>

        <section>
          <h3>Agenda</h3>
          <ul>
            <li>
              Warm up
            </li>
            <li>
              CSS: The box model and pseudo-classes
            </li>
            <li>
              Practice CSS lab
            </li>
            <li>
              Usability and your midterm
            </li>
          </ul>
        </section>

        <section>
          <p>
            <a href="https://github.com/newschool-webfundamentals/newschool-webfundamentals.github.io/wiki/Re-create-BuzzFeed's-Header" target="_blank">
              Recreate BuzzFeed's Navbar.
            </a>
          </p>
          <img src="https://i.imgur.com/Kje109u.png">
          <img src="https://i.imgur.com/vuQa50O.png">
        </section>

        <section>
          <h1>CSS</h1>
          <p>Cascading Style Sheets</p>
          <p><small>Let's do a recap</small></p>
        </section>

        <section>
          <p>
            CSS creates rules for how different HTML elements (the boxes) are presented
          </p>
          <img src="https://i.imgur.com/OcDgrIb.png" height="70%" width="70%">
          <small>Headers have a black background and white Helvetica font</small>
        </section>

        <section>
          <p>You use selectors and delcaration to define css rules.</p>
          <img src="https://i.imgur.com/5abeZXL.png">
        </section>

        <section>
          <p>Properties describe what aspect of the element should be styled, and values describe how.</p>
          <img src="https://i.imgur.com/OnrNAEZ.png">
        </section>

        <section>
          <p>In the class, you should keep all CSS in stylesheets. Why?</p>
          <ul>
            <li class="fragment">Separation of concerns</li>
            <li class="fragment">Style applied across same elements</li>
            <li class="fragment">Can use same stylesheet for multiple pages</li>
          </ul>
        </section>

        <section>
          <p>
            Now that we have the basics down, let's talk more about the box model and how to position our content using floats.
          </p>
        </section>

        <section>
          <img src="http://i.imgur.com/JxEP2nd.png">
        </section>

        <section>
          <p>Margin is the space between the element's border and other elements. Padding is the space between the content and the element's border.</p>
          <img src="https://i.imgur.com/sB1m4Fz.png" height="70%" width="70%">
          <p>Here's a closer <a href="https://thimble.mozilla.org/en-US/anonymous/56a85049-9f10-4162-a7df-7e62f6a2259a" target="_blank">look</a>
        </section>


        <section>
          <p>
            Now that we can basically style our websites and position our elements on the page, let's talk about a simple effect you can use to spice things up: hover.
          </p>
        </section>

        <section>
          <p><small>Pseudo-classes are keywords added to selectors that specify a special state of the element to be selected. For example :hover will apply a style when the user hovers over the element specified by the selector.</small></p>
          <img src="http://i.imgur.com/deTjqTi.png" height="70%" width="70%">
          <p>Here's a closer <a href="https://thimble.mozilla.org/en-US/user/aaackerman-dev/518561" target="_blank">look</a>
        </section>

        <section>
          <p>Let's jump right into lab. I want you to re-create ProPublica's <a href="https://www.propublica.org/article/machine-bias-risk-assessments-in-criminal-sentencing" target="_blank">Machine Bias</a> feature webpage. Keep it simple, it doesn't need to be perfect.</p>
        </section>
      </div>
      <!-- End Slides -->
    </div>

    <script src="../lib/js/head.min.js"></script>
    <script src="../js/reveal.js"></script>

    <script>
      // Full list of configuration options available at:
      // https://github.com/hakimel/reveal.js#configuration
      Reveal.initialize({
        controls: true,
        progress: true,
        history: true,
        center: true,

        transition: 'slide', // none/fade/slide/convex/concave/zoom

        // Optional reveal.js plugins
        dependencies: [
          { src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
          { src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
          { src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
          { src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
          { src: 'plugin/zoom-js/zoom.js', async: true },
          { src: 'plugin/notes/notes.js', async: true }
        ]
      });

    </script>
  </body>
</html>
<commit_msg>Add intro and closing graphs and fix thimble link<commit_after><!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Web Fundamentals</title>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">
    <link rel="stylesheet" href="../css/reveal.css">
    <link rel="stylesheet" href="../css/theme/black.css" id="theme">

    <!-- Code syntax highlighting -->
    <link rel="stylesheet" href="../lib/css/zenburn.css">

    <!-- Printing and PDF exports -->
    <script>
      var link = document.createElement( 'link' );
      link.rel = 'stylesheet';
      link.type = 'text/css';
      link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
      document.getElementsByTagName( 'head' )[0].appendChild( link );
    </script>

    <!--[if lt IE 9]>
    <script src="lib/js/html5shiv.js"></script>
    <![endif]-->
  </head>

  <body>
    <div class="reveal">
      <!-- Any section element inside of this container is displayed as a slide -->
      <div class="slides">
        <section>
          <h2>Web Fundamentals</h2>
          <p>
            <small>
              Taught by
              <a href="http://www.aaackerman.nyc"><NAME></a>
              <br>
              Code available at
              <a href="https://github.com/newschool-webfundamentals">https://github.com/newschool-webfundamentals</a>
              <br>
              Presentations available at
              <a href="http://newschool-webfundamentals.github.io">newschool-webfundamentals.github.io</a>
            </small>
          </p>
        </section>

        <section>
          <h3>Agenda</h3>
          <ul>
            <li>
              Warm up
            </li>
            <li>
              CSS: The box model and pseudo-classes
            </li>
            <li>
              Practice CSS lab
            </li>
            <li>
              Usability and your midterm
            </li>
          </ul>
        </section>

        <section>
          <p>Today we will have a short lesson, so that you can spend a majority of the class focusing on lab and improving your CSS skills.</p>
        </section>

        <section>
          <h4>Warm up</h4>
          <p>
            <a href="https://github.com/newschool-webfundamentals/newschool-webfundamentals.github.io/wiki/Re-create-BuzzFeed's-Header" target="_blank">
              Recreate BuzzFeed's Navbar.
            </a>
          </p>
          <img src="https://i.imgur.com/Kje109u.png">
          <img src="https://i.imgur.com/vuQa50O.png">
        </section>

        <section>
          <h1>CSS</h1>
          <p>Cascading Style Sheets</p>
          <p><small>Let's do a recap</small></p>
        </section>

        <section>
          <p>
            CSS creates rules for how different HTML elements (the boxes) are presented
          </p>
          <img src="https://i.imgur.com/OcDgrIb.png" height="70%" width="70%">
          <small>Headers have a black background and white Helvetica font</small>
        </section>

        <section>
          <p>You use selectors and delcaration to define css rules.</p>
          <img src="https://i.imgur.com/5abeZXL.png">
        </section>

        <section>
          <p>Properties describe what aspect of the element should be styled, and values describe how.</p>
          <img src="https://i.imgur.com/OnrNAEZ.png">
        </section>

        <section>
          <p>In the class, you should keep all CSS in stylesheets. Why?</p>
          <ul>
            <li class="fragment">Separation of concerns</li>
            <li class="fragment">Style applied across same elements</li>
            <li class="fragment">Can use same stylesheet for multiple pages</li>
          </ul>
        </section>

        <section>
          <p>
            Now that we have the basics down, let's talk more about the box model and how to position our content using floats.
          </p>
        </section>

        <section>
          <img src="http://i.imgur.com/JxEP2nd.png">
        </section>

        <section>
          <p>Margin is the space between the element's border and other elements. Padding is the space between the content and the element's border.</p>
          <img src="https://i.imgur.com/sB1m4Fz.png" height="70%" width="70%">
          <p>Here's a closer <a href="https://thimble.mozilla.org/en-US/user/aaackerman-dev/518562" target="_blank">look</a>
        </section>


        <section>
          <p>
            Now that we can basically style our websites and position our elements on the page, let's talk about a simple effect you can use to spice things up: hover.
          </p>
        </section>

        <section>
          <p><small>Pseudo-classes are keywords added to selectors that specify a special state of the element to be selected. For example :hover will apply a style when the user hovers over the element specified by the selector.</small></p>
          <img src="http://i.imgur.com/deTjqTi.png" height="70%" width="70%">
          <p>Here's a closer <a href="https://thimble.mozilla.org/en-US/user/aaackerman-dev/518561" target="_blank">look</a>
        </section>

        <section>
          <p>Let's jump right into lab. I want you to re-create ProPublica's <a href="https://www.propublica.org/article/machine-bias-risk-assessments-in-criminal-sentencing" target="_blank">Machine Bias</a> feature webpage. Keep it simple, it doesn't need to be perfect.</p>
        </section>

        <section>
          <p>Now we will go over the midterm assignment and how you should structure your pages for good usability</p>
        </section>
      </div>
      <!-- End Slides -->
    </div>

    <script src="../lib/js/head.min.js"></script>
    <script src="../js/reveal.js"></script>

    <script>
      // Full list of configuration options available at:
      // https://github.com/hakimel/reveal.js#configuration
      Reveal.initialize({
        controls: true,
        progress: true,
        history: true,
        center: true,

        transition: 'slide', // none/fade/slide/convex/concave/zoom

        // Optional reveal.js plugins
        dependencies: [
          { src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
          { src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
          { src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
          { src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
          { src: 'plugin/zoom-js/zoom.js', async: true },
          { src: 'plugin/notes/notes.js', async: true }
        ]
      });

    </script>
  </body>
</html>

{'fraction_non_alphanumeric': 0.14565233262758268, 'fraction_numerical': 0.008249981747827992, 'mean_word_length': 2.0630590339892665, 'pattern_counts': {'":': 0, '<': 311, '<?xml version=': 0, '>': 311, 'https://': 26, 'lorem ipsum': 0, 'www.': 4, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6686476', 'n_tokens_mistral': 4243, 'n_tokens_neox': 4054, 'n_words': 1049}