Intermediate Web Literacy I | CSS Circles

• 1. Preparation

  Learning Progression

  In this lesson, your learners will:

  1. Explore how to mix colors using a variety of media like crayons, markers, and flashlights with different colored gels over them.
  2. Share the colors they made and their processes for making them.
  3. Learn how to mix colors for the web through CSS in this Thimble project.
  4. Learn how to change the position and size of objects on a webpage through CSS in the same Thimble project.
  5. 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.

  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. Mixing Colors in the Physical World

  25 minutes

  Help learners understand how to mix different colors with light and coloring utensils before exploring how position div elements on a webpage and mixing color values online.

  1. Gather learners together and explain that today we're going to explore how to mix different colors online and off.
  2. Tell learners that about half of them will grab paper, markers, and crayons, and attempt to mix as many colors as possible in the next 15 minutes. Also tell them that the other half of the group will use tape and markers to create filters for flashlights. that group will take 15 minutes to mix as many colors as possible using different flashlights, each with one colored filter made of tape on it.
  3. Quickly demonstrate how to tape over the lens of a flashlight and color it with a primary color marker, like blue, before shining it to show how the filter affects the flashlight. If you have optional supplies like colored cellophane paper and scissors, you can demo how to cut out and tape a cellophane paper filter on a flashlight lens instead.
  4. Ask learners to keep track of each color they make by listing its parts or creating a key of all the other colors used to make it. Learners working on paper can do this right next to each color they make. learners working with flashlights will need to keep a list on a piece of paper or other shared document.
  5. Invite learners to make their own subgroups once they have their assignments so that each half of class can cover the most ground possible in 15 minutes. Make it an expectation that everyone is included in a group.
  6. Use an equitable method to split the class into two groups. Assign one group to flashlights and one to paper and markers.
  7. Dim the lights in part of the classroom for the flashlights.
  8. Set learners to work.
  9. After 15 minutes, call each half of the class back together. Give each half of class five minutes to compare notes and come up with a total number of unique colors created. Ask learners not to list repeatedly discovered colors more than once.
  10. Next, bring the whole class back together and ask a spokesperson from each group to share how many colors group members created and to show off some of each group's favorite colors.
  11. Once learners have shared their discoveries, facilitate a brief 5 minute discussion about how each group made its colors. How does light behave when its remixed into new colors? How do markers or crayons behave? What are the similarities and differences between the two ways of making color?

  When that discussion draws to a close, invite learners to take their seats at computers.

• 3. Remixing Colors Online

  30 minutes

  Once learners are at their machines, explain that next we're going to learn how to remix color values online using different mixes of red, green, and blue.

  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. Understand what a div element is and how it can be positioned and styled with CSS.
  2. Change the background-color and border color of div elements on a webpage.
  3. Change the size of div elements on a webpage.
  4. Change the position of div elements on a webpage.
  5. Mess with the code to discover new ways to color and otherwise style elements on a webpage 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 is mixing color online similar to and different from mixing colors offline?
  2. What kinds of decisions do you think people make about color, position, and size while designing webpages?
  3. What decisions did you make about color on your webpage? How did the colors you chose work together or clash?
  4. What other kinds of CSS styling do you think might be possible? What would you like to learn in the future?
  5. What seemed easiest about today's work? What seemed most difficult? Why?

  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→CSS Building Blocks

• 5. Optional: Badging

  You will cposition and style circles on a webpage using CSS while learning how to code, compose, 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 Style sheet and/or upload a screenshot of your creation.

  21st Century Skills:

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

  • 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→CSS Building Blocks