Day 43 (WC)

Lesson 13: RGB Colors and Classes

Web Lab

Overview

In this lesson, students first learn how to specify custom colors using their RGB (red, green, blue) values. They then apply these colors to a new Four Seasons web page, which uses CSS classes. CSS classes allow web developers to treat groups of elements they want styled differently than other elements of the same type. Using classes, students add more styles to the Four Seasons web page, then use them to style their personal websites.

Objectives

Students will be able to:

  • Group elements using classes in order to create more specific styles on their website.
  • Apply the rgb() color function to add custom colors to their website

Vocabulary

  • CSS Class – An identifier that allows multiple elements in an HTML document to be styled in the same way

Introduced Code

Warm Up (5 minutes) & Activity (40 minutes)

RGB Colors Matching

  1. So far, you’ve been using color names to choose colors for your web pages. That means that you can only use the colors that someone else has already thought of. Today, you’re going to learn how to mix new colors for your pages.
  2. Get the activity guide.
  3. Go to Code Studio to use the RGB widget at the beginning of this progression to complete the activity guide. We will answer one question together, then work with a partner to complete the first activity.
  4. Do Level 6 on your own
  5. Go over Level 7 together as a class
  6. Do Levels 8-11 on your own
  7. On the computer screen, we mix colors by combining red, green, and blue. In the next few levels, you’ll have a chance to use the color mixer to choose your own colors, then put them into a web page.

Wrap Up (5 minutes)

Journal: Reflecting on the Practices

  1. Update your “CSS Properties” page in your journal with the new information you’ve learned about classes.
  2. Reflect on your development of the five practices of CS Discoveries (Problem Solving, Persistence, Creativity, Collaboration, Communication). Choose one practice you thought was especially important for the activity we completed today. What made it so important?

Leave a Reply

Your email address will not be published. Required fields are marked *