Intermediate Web Literacy I: Intro to CSS | 6. Webotron and the Scrambled Divs

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

  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 student-generated puzzles, explore the importance of ordering and positioning in a complete design.

  1. Gather students 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 students 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 students 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 students 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 students about 5 minutes to turn their illustrations into puzzle pieces.
  4. Use an equitable method to pair students and have them exchange robot puzzles.
  5. Give students 5-10 minutes to complete their partners' puzzles.
  6. After students have had enough time to solve their puzzles, facilitate a brief conversation about the importance of ordering and layout to a unified design. Ask students 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 students to take their seats at computers.

• 3. Unscrambling a CSS Layout with Float

  30 minutes

  Once students 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 students. You might want to shorten this link ahead of time or else provide a link to it from a classwebpage or shared do.

  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 abablelse 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. 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 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 from the Mozilla Developer Network Learning Area.

  Next --> External CSS Tutorials