Skip to content

Latest commit

 

History

History
52 lines (35 loc) · 2.54 KB

unit-2-lesson-03.md

File metadata and controls

52 lines (35 loc) · 2.54 KB
Raw

Lesson 2.3: Intro to CSS


Lesson Materials

📖 Upload as Material in Google Classroom:

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


Key Points

In this CSS introduction, students will learn to style web content using Cascading Style Sheets (CSS). They'll understand the role of CSS in changing elements' appearance, grasp the basics of writing CSS rules, and appreciate how HTML and CSS work together to create visually appealing web pages. Through practical exercises, students will gain hands-on experience in applying styling techniques to enhance their web design skills.

  • ⏰ Do Now & Share Out (4) :

    • Kick off active learning with a "Do Now" activity:
      • Ask students what happened when they changed the width value and color value in CSS.
      • Encourage them to deduce what CSS does based on their observations.

  • 🎨 CSS (6) :

    • Explain the significance of styling a webpage.
    • Explore the concept of Cascading Style Sheets (CSS) and how it adds style to websites.
    • Highlight CSS's role in changing color, spacing, fonts, positioning, and animations.
    • Present the notion of HTML and CSS working together to structure and style web content..

  • 💻 Code Along (5) :

    • Guide students through writing CSS code step by step.
    • Introduce commonly used CSS properties and their values.
    • Provide examples of properties like color, background-color, width, text-align, and font-size.
    • Emphasize the importance of correct syntax and paying attention to error messages.

  • 🖼️ CSS Properties & Values (5)

  • 💻 Code Solo (15):

    • Give students the opportunity to practice writing CSS code independently.
    • After student complete the four tasks, they should try the extra practices linked in the lesson slides.
    • Encourage them to apply what they've learned and explore their creativity.

  • 👋 Exit Ticket & Closing (4)

Common Misconceptions

CSS Only Affects Text: Some students might initially believe that CSS only affects text styling, such as fonts and colors. It's important to clarify that CSS can also control layout, positioning, background images, and more.

Additional Materials

  • n/a