Skip to content

Latest commit

 

History

History
56 lines (40 loc) · 2.9 KB

unit-2-lesson-04.md

File metadata and controls

56 lines (40 loc) · 2.9 KB

Lesson 2.4: Class Attributes


Lesson Materials

📖 Upload as Material in Google Classroom:

📝 Upload as Assignment in Google Classroom (5 points):


Key Points

This lesson covers class attributes which enable grouping and distinct styling of specific HTML elements. They overcome uniform styling limitations and increase CSS specificity. By assigning classes, you can target elements individually for unique design.

  • 👋 Welcome & Do Now (5) :

    • Display the "Do Now" challenge: How to make only the "Apples" h2 element red while keeping the other h2 elements green.
    • Allow students a few minutes to think and share their ideas with a partner or in a class discussion.
    • Discuss the challenge as a class, encouraging students to share their solutions and thought process.
    • Review the Spicy Task solution and address any questions or clarifications.

  • . Class Attributes (10) :

    • Present the concept of styling limitations when applying the same style to all elements of the same type.
    • Introduce the concept of class attributes, explaining that they are used to group specific elements together for styling.
    • Explain the syntax of creating class selectors in CSS using the period or dot before the class name.
    • Introduce the idea of CSS specificity, explaining how the most specific selector takes precedence when multiple rules apply to the same element.
    • Break down the steps for using class attributes:
      • Choose which HTML tags to style differently.
      • Assign meaningful class names to those tags.
      • Write the class selector in CSS and define the styles for that class.

  • 💻 Code Along (5) :

    • Open the code-along.html file and share your screen.
    • Guide students step-by-step through completing tasks, explaining your thought process and providing opportunities for questions.

  • 💻 Code it Solo (15):

    • Instruct students to open the code-solo.html file on their own computers.
    • Assign tasks and encourage them to work independently.
    • Remind them to refer to the earlier code along if they encounter difficulties.

  • 👋 Exit Ticket & Closing (5)

    • Instruct students to go to Google Classroom for the Exit Ticket related to the lesson.
    • Remind students to double-check their submission and thank them for their participation.

Common Misconceptions

  • Point out the common mistake of capitalization in class selectors.
  • Explain that CSS is case-sensitive, so Important and important are treated differently.

Additional Materials

  • n/a