Intermediate Web Literacy I | External CSS Tutorials

• 1. Preparation

  Learning Progression

  In this lesson, your learners will:

  1. Brainstorm a list of foods they enjoy.
  2. Create imaginary Cascading Stylesheet (CSS) "selectors" or labels to categorize and group the foods. For example, "chocolate bars" and "ice cream" might both be included in the selector "food sweet."
  3. Use this empty plate template to draw sets of foods described by the selectors.
  4. Play through a set of external CSS tutorials that give them practice using selectors to style groups of objects on a webpage all at once.
  5. Reflect on their learning.

  ---

  You Should...

  Play through each external CSS tutorial on your own.

  • CSS Diner, by Luke Pacholski, 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.
  • Flexbox Froggy, by Thomas Park, teaches players how to use flexbox properties and values to create dyanmic layouts that avoid hiccups from using float instead.
  • Flexbox Defense, by Channing Allen, mixes flexbox styling with a tower defense game to teach dynamic layout designs.
  • Grid Garden, also by Thomas Park, teaches players how to use grid selectors and properties instead as an alternative to flexbox.

  You should also familiarize yourself with the advantages of using grid and flexbox over float. The Mozilla Developer Network has a grid explainer here and a flexbox explainer here.

  Post the URLs, or Web addresses, of today's tutorials (CSS Diner, Flexbox Froggy, Flexbox Defense, and Grid Garden) somewhere highly visible in your room. You may want to post them as shortened links using a service like bit.ly.

  Print out copies of the empty plate template, as well.

• 2. Selecting Favorite Foods

  25 minutes

  Welcome learners 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.

  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 flexbox layout properties we'll learn in one of today's tutorials.

  Invite learners 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.

  Once you have a list of several foods, ask learners 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 learners to come up with a handful of selectors that describe as many favorite foods as possible.

  For example, if learners came up with a list like this...

  • Chocolate bars
  • Orange chicken
  • Potato chips (or crisps)
  • Edamame
  • Mofongo

  ...you might all together come up with a series of selectors like food sweet to cover chocolate bars, mofongo, and orange chicken and another series of selectors like food not-meat savory to cover potato chips (or crisps) and edamame.

  Have learners generate several series of selectors or ways to categorize several foods at once. Take up to 10 minutes for this part of the activity.

  Once once you have 5 or more series of selectors, pass out the empty plate template. Ask learners to pick their favorite series of selectors and to fit all the foods inside of it on the plate. Also ask learners 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.

  

  Finally, ask learners 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 learners on a brief gallery walk before they take their seats at computers.

• 3. Playing the Tutorials

  30 minutes

  After learners settle at their computers, introduce them to today's tutorials on your projected computer and make sure every learner can get to each site.

  • CSS Diner - http://flukeout.github.io/
  • Flexbox Froggy - http://flexboxfroggy.com/
  • Flexbox Defense - http://www.flexboxdefense.com/
  • Grid Garden - http://cssgridgarden.com/

  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 flexbox layout selectors which can help us make flowing, dynamic (or flexible) layouts that are difficult to do with other positioning properties.

  Briefly work through a few levels of each tutorial on a projected computer to demo they work. Invite learners to come up with solutions for the early levels of the games. Then let learners work alone or in pairs for about a half hour. Tell them that the goal is to make it through both tutorials in that time, but that there will be places where each of us gets stuck - it's not a problem to ask for help or to run out of time today.

• 4. Reflection and Assessment

  5 minutes

  After working through the tutorial, bring learners back together as a group and facilitate a brief, reflective conversation about today's work. Make a list of your own questions or ask questions like those suggested below.

  If you have time, consider asking learners to write, type, or otherwise record their responses for self-assessment and teacher evaluation. Just be sure to match recording technologies to learners' needs so that whatever medium (or media) you chose for (or with) the group isn't a barrier to learners' expression.

  1. How are float and clear similar to and different from other layout properties we've used like position?
  2. When might you use float as a layout technique instead of position?
  3. What are the advantages of having a unified design or layout instead of a scambled or random one?
  4. Can you think of times when you might want a more broken or seemingly disorganized layout?
  5. How did styling from the CSS stylesheet interact with the HTML elements on the webpage? What's the connection there? What seemed easiest or most difficult about today's work? Why?

  ---

  If you or your learners are curious to learn more, check out this Introduction to CSS or this Flexbox tutorial from the Mozilla Developer Network Learning Area.