Intermediate Web Literacy I | Webotron and the Scrambled Divs

• 1. Preparation

  Learning Progression

  In this lesson, your learners will:

  1. Each draw and color a robot they can then cut up into large pieces to make a simple puzzle.
  2. Remix this Thimble project using positioning and the float attribute for cascading Stylesheets (CSS) to complete a puzzle of a robot on the webpage.
  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.

  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. Puzzling Out the Importance of Layout and Order

  25 minutes

  Working with learner-generated puzzles, explore the importance of ordering and positioning in a complete design.

  1. Gather learners and explain that today we'll be looking at the importance of order and layout in creating a unified design. First, we'll use markers, paper, and scissors to do so; then we'll use a Thimble activity to learn more about ordering div elements using the float property to create webpage layout using HTML and CSS.
  2. Ask learners to take 10 minutes to draw and color an illustration of a robot. Feel free to pick a better theme for your community. The illustration should take up most of the height and width of standard sheet of composition paper. You should also provide a few blank robot templates for learners to color in in case some learners feel overwhelemed by the idea of drawing and coloring a robot in the given amount of time.
  3. After 10 minutes, ask learners to turn their robots into puzzles. Ask them to use scissors to cut their robot into several pieces, but also ask them to keep each piece at 1" x 1" in size so that puzzles don't become too complex and pieces aren't easily lost. Give learners about 5 minutes to turn their illustrations into puzzle pieces.
  4. Use an equitable method to pair learners and have them exchange robot puzzles.
  5. Give learners 5-10 minutes to complete their partners' puzzles.
  6. After learners have had enough time to solve their puzzles, facilitate a brief conversation about the importance of ordering and layout to a unified design. Ask learners why it might be important for the parts of a webpage to fit together like the pieces of a completed puzzle.

  After discussing the importance of getting the part of a webpage to 'fit' together, ask learners to take their seats at computers.

• 3. Unscrambling a CSS Layout with Float

  30 minutes

  Once learners have returned to their seats and computers, explain that today we're going to look at how we can use the float and clear properties on a CSS stylesheet to position HTML elements relative to one another on 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 classwebpage or shared do.

  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 abablelse 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. Reorder scrambled div elements so that they appear in the correct order on an HTML webpage.
  2. Learn how the float and clear CSS proprties can work together to position block elements relative to one another on an HTML webpage.
  3. Apply float and clear CSS properties to 'solve' the puzzle of the scrambled layout of an HTML webpage.
  4. Mess with the code to discover new ways to style a webpage and order its layout in an independent and playful 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. 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 from the Mozilla Developer Network Learning Area.

  Next activity→External CSS Tutorials