Intermediate Web Literacy I | CSS Decoration

• 1. Preparation

  Learning Progression

  In this lesson, your learners will:

  1. Fold and decorate their own paper boxes.
  2. Use Cascading Stylsheets (CSS) to decorate a webpage in this Thimble project by remixing the color, positioning, and size of different elements on the page.
  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.

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

  Practice making paper boxes using instructions from sites like this one or this one Make a few boxes for learners 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 learners 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 learners 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 learner 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 learners how to fold their own paper boxes.
  3. Invite learners 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 learners who struggle with this part of the activity and have some boxes pre-made for learners who want to skip to the decorating part of the activity.
  4. Suggest that learners 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 learners 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. learners 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 learners to line up their boxes on a table or shelf, and do a quick gallery walk of all the boxes. Remind learners 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 learners' attention. After a few learners volunteer their answers, ask learners to go to their seats for today's Thimble project.

• 3. Decorating with CSS

  30 minutes

  As learners 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 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. 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 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 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 activity→Webotron and the Scrambled Divs

• 5. Optional: Badging

  You will apply text- and box-effect CSS styling techniques to inline and block elements on an HTML webpage while learning how to revise, code, compose, and design.

  Steps to complete this task:

  1. Go to this Thimble project 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 web stickers we have created to get you started.
  2. Click on “Tutorial”.
  3. Follow the steps in the tutorial. The tutorial will walk you through how to make changes to the code.
  4. 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 stylesheet and/or upload a screenshot of your creation!

  21st Century Skills:

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

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

  Next activity→Webotron and the Scrambled Divs