Intermediate Web Literacy I: Intro to CSS | 4. CSS Building Blocks

• 1. Preparation

  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 students to work in pairs to make as many shapes as possible using 6 identical blocks.

  1. Group students into pairs using any equitable and purposeful method you like.
  2. Pass out a set of 6 identical blocks to each pair of students unless you are working in Minecraft. If you are working in Minecraft, have each pair of students gather around a computer running the game.
  3. Pass out a large sheet of paper and several markers to each pair of students.
  4. Invite students 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 students to draw each shape they make, as best they can, in 3D. If students have experience with isometic drawing, consider having graph paper, isometric dot paper, or students' engineering notebooks on-hand.
  6. After 15 minutes of construction and sketching time, have students review their drawings and count the number of shapes they made. Remind students that the same shape built at different angles is just one shape for counting.
  7. Gather students 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 students 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 students. 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 students who experience difficulty with processing or typing links get to the webpage and encourage classmates to help, as well.

  Once students all arrive at the project, invite them to click the green 'Remix' button. This will take students 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. Students 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 students 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 students to:

  1. Change the display of the blocks, which are div elements on the webpage. This will let students 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 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. 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 --> CSS Decoration