Intermediate Web Literacy I: Intro to CSS | 3. CSS Circles

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

  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 students 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 students together and explain that today we're going to explore how to mix different colors online and off.
  2. Tell students 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 students 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.
  Students working on paper can do this right next to each color they make. Students working with flashlights will need to keep a list on a piece of paper or other shared document.
  5. Invite students 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 students 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 students 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 students 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 students to take their seats at computers.

• 3. Remixing Colors Online

  30 minutes

  Once students 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 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. 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 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 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 --> CSS Building Blocks