Skip to content

Latest commit

 

History

History
58 lines (39 loc) · 3.07 KB

unit-2-lesson-06.md

File metadata and controls

58 lines (39 loc) · 3.07 KB

Lesson 2.6: Spacing & Position


Lesson Materials

📖 Upload as Material in Google Classroom:

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


Key Points

This lesson focuses on three key areas: understanding the Box Model, which breaks down the layout of an element into content, padding, border, and margin; utilizing Flexbox, a collection of CSS properties for neatly arranging elements on a web page; and introducing positioning properties for precise control over element placement.

  • 👋 Welcome (2) :

    • Greeting students and setting the tone for the lesson.
    • There is no Do Now for this lesson, since there is a lot of content.

  • 🖼️ Box Model (8) :

    • Discuss how each webpage element is a rectangular box comprising content, padding, border, and margin.
    • Encourage students to identify what each number in a provided Box Model example represents.
    • Guide students to add borders, padding, and margins to HTML elements using provided code examples.

  • 💻 Code Along (5) :

    • Lead students through coding exercises that demonstrate the box model. Provide help and answer questions as students follow along.

  • ⧠ Flexbox & Position (10) :

    • Explain how Flexbox organizes content, utilizing
      tags and parent-child relationships.
    • Guide students to assign values for aligning content using Flexbox properties.
    • Briefly explore various positioning values and encourage students to experiment further.

  • 💻 Code Solo (10) :

    • Students apply the concepts of the Flexbox and Positioning to complete individual coding exercises.
    • Provide assistance as needed, and encourage students to experiment and explore.

  • 👋 Exit Ticket & Closing (5) :

    • Direct students to the Exit Ticket in Google Classroom, ensuring all questions are answered.
    • Summarize key takeaways, remind students to submit the exit ticket, and provide any closing remarks.

Common Misconceptions

  1. Box Model Confusion:

    • Misconception: Padding, border, and margin are often interchangeable or confused with one another.
    • Clarification: Padding creates space within the element, between the content and the border; the border is a visible line that goes around the padding and content; and margin creates space outside the border, between elements.

  2. Understanding Flexbox:

    • Misconception: The concept of flex containers and flex items can be confusing, leading to incorrect assumptions about how items will be arranged.
    • Clarification: The container's properties affect the layout of the items inside, and understanding parent-child relationships is essential to properly using Flexbox.

Additional Materials

  • n/a