<commit_before><!DOCTYPE html>
<html>
  <head>
    <title>Intermediate Web Literacy I: Intro to CSS | External CSS Tutorials</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="styles/style.css">
    <script src="https://code.jquery.com/jquery-2.1.4.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="scripts/script.js" type="text/javascript" charset="utf-8"></script>
  </head>

  <body>
    <div class="wrapper" mode="overview">

      <aside>
        <div class="image">
          <img src="http://chadsansing.github.io/curriculum-testing/intermediate-web-lit-two/flexbox-froggy-screen-cap-1.png">
          <a class="attribution" href="https://teach.mozilla.org">
            <i class="fa fa-camera"></i> by Mozilla
          </a>
        </div>

        <ul class="agenda-navigation">
          <li><a href="#overview">Overview</a></li>
          <li><a href="#step-1">Preparation</a></li>
          <li><a href="#step-2">Selecting Favorite Foods</a></li>
          <li><a href="#step-3">Playing the Tutorials</a></li>
		  <li><a href="#step-4">Reflection and Assessment</a></li>
        </ul>
      </aside>

      <article class="main">

        <h1 class="activity-title">Intermediate Web Literacy I: Intro to CSS | External CSS Tutorials</h1>

        <section class="overview">

          <p class="made-by">
            Made by <a href="https://teach.mozilla.org">Mozilla</a>
          </p>

          <p class="time total-time">
            60 minutes
          </p>

          <p class="summary">
            Learners will apply multi-part CSS selectors and flexbox positioning with external CSS tutorial games, learning about <strong>coding, designing, evaluating, and synthesizing</strong>.
          </p>
		  
		  <h4>Write the Web</h4>

          <h4>Web Literacy Competencies</h4>

          <span class="web-literacy">Code</span>
          <span class="web-literacy">Design</span>
		  <span class="web-literacy">Evaluate</span>
		  <span class="web-literacy">Synthesize</span>
		  
		  
		  <h4>21st Century Skills</h4>
		  
		  <ul>
			  <li>Problem-solving</li>
		  </ul>

          <h4>Learning Objectives</h4>

          <ul>
            <li>Understand and apply multi-part CSS selectors.</li>
			<li>Understand and apply flexbox layout selectors and values on a webpage using CSS and HTML.</li>
			<li>Evaluate the best CSS selectors and properties to use for layout and styling needs on an HTML webpage.</li>
          </ul>

          <h4>Audience</h4>

          <ul>
            <li>13+</li>
            <li>Intermediate web users</li>
          </ul>

          <h4>Materials</h4>

          <ul>
            <li>Internet-connected computers</li>
			<li><a href="https://d157rqmxrxj6ey.cloudfront.net/chadsansing/28131/">Empty plate template</a></li>
			<li>Markers</li>
			<li>Paper</li>
			<li>Pecils and pens</li>
          </ul>


<p class="discussion-link">
Check out the ways educators and activists have modified this activity for their specific audiences
in our <a href="https://discourse.webmaker.org/t/testing-intermediate-web-lit-external-css-tutorials-lesson-plan/379">Discussion Forum</a>.
</p>


        </section> <!-- End of Introduction -->

        <ul class="agenda">
			
			<!--Thimble project: https://d157rqmxrxj6ey.cloudfront.net/chadsansing/17148/-->
			<!--Empty plate template: https://d157rqmxrxj6ey.cloudfront.net/chadsansing/28131/-->
			<!--Discourse: https://discourse.webmaker.org/t/testing-intermediate-web-lit-external-css-tutorials-lesson-plan/379-->

          <!-- Copy and paste this <li> tag to add additional steps -->
          <li>
            <h1>1. Preparation</h1>

				<p>Play through each external CSS tutorial on your own.</p>
				
				<ul>
					<li><a href="http://flukeout.github.io/">CSS Diner</a> takes players from using simple, single CSS selectors to using multi-part selectors that style very specific HTML elements of affect multiple elements at once.</li>
					<li><a href="http://flukeout.github.io/">Flexbox Froggy</a> teaches players how to use flexbox properties and values to create dyanmic layouts that avoid hiccups from using float instead.</li>
				</ul>
				
				<p>You should also familiarize yourself with the advantages of using flexbox over float. The <a href="https://developer.mozilla.org/en-US/">Mozilla Developer Network</a> has an explainer <a href="https://developer.mozilla.org/en-US/docs/Inbox/Advanced_layouts_with_flexbox">here</a>.</p>
				
				<p>Post the URLs, or Web addresses, of today's tutorials (CSS Diner, Flexbox Froggy) somewhere highly visible in your room. You may want to post them as shortened links using a service like <a href="http://bit.ly">bit.ly</a>.</p>
				
				<p>Print out copies of the <a href="https://d157rqmxrxj6ey.cloudfront.net/chadsansing/28131/">empty plate template</a>, as well.</p>

          </li> <!-- end of step-->

          <li>
            <h1>2. Selecting Favorite Foods</h1>
            <div class="time step-time">25 minutes</div>

			<p>Welcome students to today's activity and explain that we'll be using online, game-like CSS tutorials to learnnew ways to organize webpages and style their elements.</p>
			
			<p>First. we're going to practice sorting our favorite foods using multiple, overlapping categories as a way to conceptualize using multiple, specific CSS selectors all at once. Then we'll try to fit all of our favorite foods on to a plat using flexible layout as a way to think of the principles behind the <code>flexbox</code> layout properties we'll learn in one of today's tutorials.</p>
			
			<p>Invite students to share their favorite foods with the class. Make a visible list on a large piece of paper, a whiteboard, or a shared document on your projected computer. Try to come up with a large list in under five minutes.</p>
			
			<p>Once you have a list of several foods, ask students how they would select as many alike foods as possible using a mix of general and specific labels. How could they capture several foods at once with just a handul of selectors (or descriptions)? Start with 'Food' as an umbrella category and then asl students to come up with a handful of selectors that describe as many favorite foods as possible.</p>
				
				<p>For example, if students came up with a list like this...</p>
				
				<ul>
					<li><code>Chocolate bars</code></li>
					<li><code>Orange chicken</code></li>
					<li><code>Potato chips (or crisps</code>)</li>
					<li><code>Edamame</code></li>
					<li><code>Mofongo</code></li>
				</ul>
				
				<p>...you might all together come up with a series of selectors like <code>food swee</code>t to cover <code>chocolate bars</code>, <code>mofongo</code>, and <code>orange chicken</code> and another series of selectors like <code>food not-meat savory</code> to cover <code>potato chips (or crisps)</code> and <code>edamame</code>.</p>
				
				<p>Have students generate several series of selectors or ways to categorize several foods at once. Take up to 10 minutes for this part of the activity.</p>
				
				<p>Once once you have 5 or more series of selectors, pass out the <a href="https://d157rqmxrxj6ey.cloudfront.net/chadsansing/28131/">empty plate template</a>. Ask students to pick their favorite series of selectors and to fit all the foods inside of it on the plate. Also ask students to label their plates with their series of selectors. Tell them that the idea is to think of the plate as a webpage and the arrangement of their foods as the layout of that page.</p>
				
				<p><a href="https://d157rqmxrxj6ey.cloudfront.net/chadsansing/28131/"><img src="http://chadsansing.github.io/curriculum-testing/intermediate-web-lit-two/empty-plate-1.png" width="90%" alt="An image of an empty plate"></a></p>
				
				<p>Finally, ask students to post their plates in a shared space in the classroom and to see how their peers arranged their foods on thier plates according to the available space and the food selectors they used for the activity. Accompany students on a brief gallery walk before they take their seats at computers.</p>

          </li> <!-- end of step-->

          <li>
            <h1>3. Playing the Tutorials</h1>
            <div class="time step-time">30 minutes</div>

            <p>After students settle at their computers, introduce them to today's tutorials on your projected computer and make sure every student can get to both sites.</p>
			
			<ul>
				<li>CSS Diner - <a href="http://flukeout.github.io/">http://flukeout.github.io/</a></li>
				<li>Flexbox Froggy - <a href="http://flexboxfroggy.com/">http://flexboxfroggy.com/</a></li>
			</ul>
			
			<p>Explain that today's we'll look at how we can use CSS to select very specific parts of a page for styling, as well as to select multiple parts of a page at once. We'll also play around with <code>flexbox</code> layout selectors which can help us make flowing, dynamic (or flexible) layouts that are difficult to do with other positioning properties.</p>
			<commit_msg>Added Flexbox Defense, by <NAME>, to session07-external-css-tutorials.html<commit_after><!DOCTYPE html>
<html>
  <head>
    <title>Intermediate Web Literacy I: Intro to CSS | External CSS Tutorials</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="styles/style.css">
    <script src="https://code.jquery.com/jquery-2.1.4.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="scripts/script.js" type="text/javascript" charset="utf-8"></script>
  </head>

  <body>
    <div class="wrapper" mode="overview">

      <aside>
        <div class="image">
          <img src="http://chadsansing.github.io/curriculum-testing/intermediate-web-lit-two/flexbox-froggy-screen-cap-1.png">
          <a class="attribution" href="https://teach.mozilla.org">
            <i class="fa fa-camera"></i> by Mozilla
          </a>
        </div>

        <ul class="agenda-navigation">
          <li><a href="#overview">Overview</a></li>
          <li><a href="#step-1">Preparation</a></li>
          <li><a href="#step-2">Selecting Favorite Foods</a></li>
          <li><a href="#step-3">Playing the Tutorials</a></li>
		  <li><a href="#step-4">Reflection and Assessment</a></li>
        </ul>
      </aside>

      <article class="main">

        <h1 class="activity-title">Intermediate Web Literacy I: Intro to CSS | External CSS Tutorials</h1>

        <section class="overview">

          <p class="made-by">
            Made by <a href="https://teach.mozilla.org">Mozilla</a>
          </p>

          <p class="time total-time">
            60 minutes
          </p>

          <p class="summary">
            Learners will apply multi-part CSS selectors and flexbox positioning with external CSS tutorial games, learning about <strong>coding, designing, evaluating, and synthesizing</strong>.
          </p>
		  
		  <h4>Write the Web</h4>

          <h4>Web Literacy Competencies</h4>

          <span class="web-literacy">Code</span>
          <span class="web-literacy">Design</span>
		  <span class="web-literacy">Evaluate</span>
		  <span class="web-literacy">Synthesize</span>
		  
		  
		  <h4>21st Century Skills</h4>
		  
		  <ul>
			  <li>Problem-solving</li>
		  </ul>

          <h4>Learning Objectives</h4>

          <ul>
            <li>Understand and apply multi-part CSS selectors.</li>
			<li>Understand and apply flexbox layout selectors and values on a webpage using CSS and HTML.</li>
			<li>Evaluate the best CSS selectors and properties to use for layout and styling needs on an HTML webpage.</li>
          </ul>

          <h4>Audience</h4>

          <ul>
            <li>13+</li>
            <li>Intermediate web users</li>
          </ul>

          <h4>Materials</h4>

          <ul>
            <li>Internet-connected computers</li>
			<li><a href="https://d157rqmxrxj6ey.cloudfront.net/chadsansing/28131/">Empty plate template</a></li>
			<li>Markers</li>
			<li>Paper</li>
			<li>Pecils and pens</li>
          </ul>


<p class="discussion-link">
Check out the ways educators and activists have modified this activity for their specific audiences
in our <a href="https://discourse.webmaker.org/t/testing-intermediate-web-lit-external-css-tutorials-lesson-plan/379">Discussion Forum</a>.
</p>


        </section> <!-- End of Introduction -->

        <ul class="agenda">
			
			<!--Thimble project: https://d157rqmxrxj6ey.cloudfront.net/chadsansing/17148/-->
			<!--Empty plate template: https://d157rqmxrxj6ey.cloudfront.net/chadsansing/28131/-->
			<!--Discourse: https://discourse.webmaker.org/t/testing-intermediate-web-lit-external-css-tutorials-lesson-plan/379-->

          <!-- Copy and paste this <li> tag to add additional steps -->
          <li>
            <h1>1. Preparation</h1>

				<p>Play through each external CSS tutorial on your own.</p>
				
				<ul>
					<li><a href="http://flukeout.github.io/">CSS Diner</a>, by <NAME>, takes players from using simple, single CSS selectors to using multi-part selectors that style very specific HTML elements of affect multiple elements at once.</li>
					<li><a href="http://flukeout.github.io/">Flexbox Froggy</a>, by <NAME>, teaches players how to use flexbox properties and values to create dyanmic layouts that avoid hiccups from using float instead.</li>
					<li><a href="http://www.flexboxdefense.com/">Flexbox Defense</a>, by <NAME>, mixes flexbox styling with a tower defense game to teach dynamic layout designs.</li>
				</ul>
				
				<p>You should also familiarize yourself with the advantages of using flexbox over float. The <a href="https://developer.mozilla.org/en-US/">Mozilla Developer Network</a> has an explainer <a href="https://developer.mozilla.org/en-US/docs/Inbox/Advanced_layouts_with_flexbox">here</a>.</p>
				
				<p>Post the URLs, or Web addresses, of today's tutorials (CSS Diner, Flexbox Froggy, and Flexbox Defense) somewhere highly visible in your room. You may want to post them as shortened links using a service like <a href="http://bit.ly">bit.ly</a>.</p>
				
				<p>Print out copies of the <a href="https://d157rqmxrxj6ey.cloudfront.net/chadsansing/28131/">empty plate template</a>, as well.</p>

          </li> <!-- end of step-->

          <li>
            <h1>2. Selecting Favorite Foods</h1>
            <div class="time step-time">25 minutes</div>

			<p>Welcome students to today's activity and explain that we'll be using online, game-like CSS tutorials to learnnew ways to organize webpages and style their elements.</p>
			
			<p>First. we're going to practice sorting our favorite foods using multiple, overlapping categories as a way to conceptualize using multiple, specific CSS selectors all at once. Then we'll try to fit all of our favorite foods on to a plat using flexible layout as a way to think of the principles behind the <code>flexbox</code> layout properties we'll learn in one of today's tutorials.</p>
			
			<p>Invite students to share their favorite foods with the class. Make a visible list on a large piece of paper, a whiteboard, or a shared document on your projected computer. Try to come up with a large list in under five minutes.</p>
			
			<p>Once you have a list of several foods, ask students how they would select as many alike foods as possible using a mix of general and specific labels. How could they capture several foods at once with just a handul of selectors (or descriptions)? Start with 'Food' as an umbrella category and then asl students to come up with a handful of selectors that describe as many favorite foods as possible.</p>
				
				<p>For example, if students came up with a list like this...</p>
				
				<ul>
					<li><code>Chocolate bars</code></li>
					<li><code>Orange chicken</code></li>
					<li><code>Potato chips (or crisps</code>)</li>
					<li><code>Edamame</code></li>
					<li><code>Mofongo</code></li>
				</ul>
				
				<p>...you might all together come up with a series of selectors like <code>food swee</code>t to cover <code>chocolate bars</code>, <code>mofongo</code>, and <code>orange chicken</code> and another series of selectors like <code>food not-meat savory</code> to cover <code>potato chips (or crisps)</code> and <code>edamame</code>.</p>
				
				<p>Have students generate several series of selectors or ways to categorize several foods at once. Take up to 10 minutes for this part of the activity.</p>
				
				<p>Once once you have 5 or more series of selectors, pass out the <a href="https://d157rqmxrxj6ey.cloudfront.net/chadsansing/28131/">empty plate template</a>. Ask students to pick their favorite series of selectors and to fit all the foods inside of it on the plate. Also ask students to label their plates with their series of selectors. Tell them that the idea is to think of the plate as a webpage and the arrangement of their foods as the layout of that page.</p>
				
				<p><a href="https://d157rqmxrxj6ey.cloudfront.net/chadsansing/28131/"><img src="http://chadsansing.github.io/curriculum-testing/intermediate-web-lit-two/empty-plate-1.png" width="90%" alt="An image of an empty plate"></a></p>
				
				<p>Finally, ask students to post their plates in a shared space in the classroom and to see how their peers arranged their foods on thier plates according to the available space and the food selectors they used for the activity. Accompany students on a brief gallery walk before they take their seats at computers.</p>

          </li> <!-- end of step-->

          <li>
            <h1>3. Playing the Tutorials</h1>
            <div class="time step-time">30 minutes</div>

            <p>After students settle at their computers, introduce them to today's tutorials on your projected computer and make sure every student can get to both sites.</p>
			
			<ul>
				<li>CSS Diner - <a href="http://flukeout.github.io/">http://flukeout.github.io/</a></li>
				<li>Flexbox Froggy - <a href="http://flexboxfroggy.com/">http://flexboxfroggy.com/</a></li>
				<li>Flexbox Defense = <a href="http://www.flexboxdefense.com/">http://www.flexboxdefense.com/</a></li>
			</ul>
			
			<p>Explain that today's we'll look at how we can use CSS to select very specific parts of a page for styling, as well as to select multiple parts of a page at once. We'll also play around with <code>flexbox</code> layout selectors which can help us make flowing, dynamic (or flexible) layouts that are difficult to do with other positioning properties.</p>
			
{'fraction_non_alphanumeric': 0.12713351411708407, 'fraction_numerical': 0.012229489020045727, 'mean_word_length': 3.0940356987374837, 'pattern_counts': {'":': 0, '<': 509, '<?xml version=': 0, '>': 509, 'https://': 28, 'lorem ipsum': 0, 'www.': 3, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5532845', 'n_tokens_mistral': 6252, 'n_tokens_neox': 5502, 'n_words': 1915}