Intermediate Web Literacy I | CSS Building Blocks

• 1. Preparation

  Learning Progression

  In this lesson, your learners will:

  1. Make and sketch as many different shapes as possible out of 6 identical blocks.
  2. Use Cascading Stylesheets (CSS) to change the color, positioning, and size of the boxes in this Thimble project through CSS to make different shapes and patterns.
  3. Reflect on their learning.

  ---

  You Should...

  Do the activity on your own to become familiar with how to find and use webfonts on a webpage.

  1. Follow this link to the Thimble project for this activity.
  2. Click on the green "Remix" button in the upper right-hand corner of the window to go into the project's code.
  3. Click on the "Tutorial" pane next to the "Preview" pane in the upper right-hand corner of the coding window.
  4. Follow the steps in the tutorial to complete the activity. You may also need to check back here and complete some of the steps in this lesson plan to successfully finish the Thimble project.

  You can learn more about styling boxes on webpages with CSS from this module created by the Mozilla Developer Network.

  Post the URL, or Web address, of today's project somewhere highly visible in your room. You may want to post it as a shortened link using a service like bit.ly.

• 2. Six Block Scramble

  25 minutes

  Working inside a sandbox construction game like Minecraft or with building toys such as blocks or LEGO, ask learners to work in pairs to make as many shapes as possible using 6 identical blocks.

  1. Group learners into pairs using any equitable and purposeful method you like.
  2. Pass out a set of 6 identical blocks to each pair of learners unless you are working in Minecraft. If you are working in Minecraft, have each pair of learners gather around a computer running the game.
  3. Pass out a large sheet of paper and several markers to each pair of learners.
  4. Invite learners to make as many different shapes as possible using 6 identical blocks. Tell them that the goal is to make as many unique shapes as possible in 15 minutes.
  5. Ask learners to draw each shape they make, as best they can, in 3D. If learners have experience with isometic drawing, consider having graph paper, isometric dot paper, or learners' engineering notebooks on-hand.
  6. After 15 minutes of construction and sketching time, have learners review their drawings and count the number of shapes they made. Remind learners that the same shape built at different angles is just one shape for counting.
  7. Gather learners all together with their drawings and have each pair share a bit of their work, such as the most complex shape they made.
  8. Facilitate a brief, 5-10 minute discussion about what seemed easy and difficult when building and positioning the blocks into new and more complex shapes.

• 3. Positioning Blocks with CSS

  30 minutes

  Ask learners to break out of the whole group and to find a seat at a computer.

  Explain that next we're going to learn how to position blocks of color on a webpage in order to discover all the different ways we can 'shape' the layout of a webpage.

  Share the link to today's project with learners. You might want to shorten this link ahead of time or else provide a link to it from a class webpage or shared document. Help learners who experience difficulty with processing or typing links get to the webpage and encourage classmates to help, as well.

  Once learners all arrive at the project, invite them to click the green 'Remix' button. This will take learners into the Thimble code editor. They will be able to see the code of the webpage, as well as a preview of how it looks in a browser. learners can also switch between this 'Preview' pane (in the upper righthand part of the Thimble interface) and a 'Tutorial' pane that takes them through today's work in a step-by-step way.

  Work through the tutorial on a projected computer. Invite learners to help one another, but also to work ahead if they feel ready to do so. Through the course of the tutorial, you'll ask learners to:

  1. Change the display of the blocks, which are div elements on the webpage. This will let learners move between lining up the blocks horizontally and stacking them vertically.
  2. Change the color of each block to further explore the connection between an HTML webpage (like index.html) and CSS stylesheets (like style.css).
  3. Change the size of the blocks to see how it impacts the layout of the page.
  4. Change the position of the blocks to see how to control the layout of the page.
  5. Mess with the code to discover new learning about CSS in a playful, independent way.

• 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. Would you describe, in your own words, some of the ways we can use styling to change the appearance and position of elements on a webpage?
  2. What seemed easiest to understand or do today? What seemed most difficult? Why?
  3. What kinds of decisions do you think designers face when setting up the layout of a webpage?
  4. What kinds of layout do you like best as a reader on the Web? Horizontal? Vertical? Mixed? Why?
  5. What else do you wonder about positioning and layout after today's activity?

  ---

  If you or your learners are curious to learn more, check out this Introduction to CSS from the Mozilla Developer Network Learning Area. You can also check out this module on styling boxes with CSS.

  Next activity→CSS Decoration

• 5. Optional: Badging

  You will position and style boxes on a webpage using CSS while learning how to code, compose, design.

  Here is a lesson plan for this task.

  Task

  1. Go to this Thimble activity and click the "Remix" button. This will open Thimble, a tool that makes it easy to create and publish your own web pages while learning HTML, CSS & JavaScript. You will see CSS that has been used to edit and create effects across a webpage.
  2. Follow the steps in the tutorial. The tutorial will walk you through how to make changes to the code.
  3. Once you are finished, you can save your work and share it. Log into your Webmaker account and hit "Publish."

  Evidence

  Share a link to your remixed Style sheet and/or upload a screenshot of your creation.

  21C Skills

  If you successfully complete the above, you will practice the following skills:

  • Problem-Solving

  The skills that you have learned through this activity can be recognized and validated by earning credentials or badges.

  Through a partnership with the Open Badges Academy (OBA), you can earn over 15 Web Literacy and 21st Century Skills credentials or badges. Once you earn them, you can share the credentials/badges via your social media or resume or use them to connect with others.

  If you are interested in applying for badges, visit the OBA and/or reach out to Matt Rogers or DigitalMe to schedule a demonstration.