Intermediate Web Literacy I: Intro to CSS | 5. CSS Decoration

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

  Prepare 4-5 squares of 15.25 cm x 15.25 cm (or 6" x6") paper per student.

  Practice making paper boxes using instructions from sites like this one or this one Make a few boxes for students who might experience difficulty and/or frustration making their own.

  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. Decorating Boxes IRL

  25 minutes

  Continue discussing CSS and styling with your learners. Explain that styling can make even the most static content - like text and still images - seem appealing and exciting through the use of design to mix colors, fonts, and other effects that draw the user into their webpages. Remind students of all they've learned in this module about styling fonts and objects on a webpage and tell them that today's challenge is to make a box into something amazing that everyone wants to handle and open. Today is all about using CSS decoration techniques to attract users to a webpage.

  We're going to style boxes in real life (IRL) and then style a box holding a cat on the Internet.

  Up first: boxes IRL. Tell students that we;re goung to make and decorate paper boxes to warm up our design sensibilities and think about the ways CSS impacts the surface of a webpage.

  1. Ask each student to grab 4-5 squares of paper, or pass out the paper yourself.
  2. Visit, project, and share a site like this one or this one that shows students how to fold their own paper boxes.
  3. Invite students to make their own paper boxes, but make sure they know it's okay to mess up and begin again - and it's okay to get help, as well. Be ready to help students who struggle with this part of the activity and have some boxes pre-made for students who want to skip to the decorating part of the activity.
  4. Suggest that students make two boxes that they can combine into one - a box for the bottom and another for the lid.
  5. After about 10-15 minutes, encourage students to switch over to decorating their boxes however they think best. The big idea is to create a box other people will want to check out and open. Students can use markers, other coloring tools, and any non-invasive crafting supplies you have available in the room.
  6. After another 10 minutes or so of decoration, call the group together, ask students to line up their boxes on a table or shelf, and do a quick gallery walk of all the boxes. Remind students to be gentle with their creations!

  As the gallery walk winds down, facilitate a brief conversation about the kinds of designs and common design features that seem most effective in grabbing students' attention. After a few students volunteer their answers, ask students to go to their seats for today's Thimble project.

• 3. Decorating with CSS

  30 minutes

  As students take their seats, explain that today we're going to use several different styling elements on a webpage to give it a unique look and feel for the user. Plus, we'll be working with cats.

  Today's project looks a little wacky. Encourage learners to make it even wackier or to try and "clean up" the design as they work. They can turn the page into whatever they want so long as they remember our goal: make the the best online cat box in the world. (Though you should feel free to customize this lesson and project for your audience, too.)

  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. Choose a style a font on a webpage using multiple effects such ascolor, text-decoratiobn and text-shadow .
  2. Use multiple box-shadow effects to customize their webpages.
  3. Mess with the code to see what other styling decisions they can make - or break! - on the page.

• 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 do you find the right balance between everything you can do with CSS and what you should do for a particular webpage?
  2. How do you make your design decisions?
  3. What do you think a designer's job is when it comes to styling a webpage?
  4. How do you know when you have too much or too little going on - design- or style-wise - in a webpage?
  5. How would you explain the difference between inline parts of a webpage, like links or text, and block elements, like paragraphs or images?
  6. What seemed easiest about today's work? Most difficult? Why do you think so?
  
  
  

  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 --> Webotron and the Scrambled Divs