Intermediate Web Literacy I: Intro to CSS | 7. External CSS Tutorials

• 1. Preparation

  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.

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

  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 bit.ly.

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

• 2. Selecting Favorite Foods

  25 minutes

  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.

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

  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.

  For example, if students 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 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.

  Once once you have 5 or more series of selectors, pass out the empty plate template. 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.

  

  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.

• 3. Playing the Tutorials

  30 minutes

  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.

  • CSS Diner - http://flukeout.github.io/
  • Flexbox Froggy - http://flexboxfroggy.com/
  • Flexbox Defense = http://www.flexboxdefense.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 students to come up with solutions for the early levels of the games. Then let students 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 students 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 students to write, type, or otherwise record their responses for self-assessment and teacher evaluation. Just be sure to match recording technologies to students' 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.

  Back to the index