11 – The Box Model

May 4, 2020 | Lesson

The box model is an abstract concept that helps us construct layouts in a web page. The lesson plan is short, but the reading is long. Teachers may want to chunk some of the key components into smaller exercises.

Teacher Activities

  • Check Learning Journals
  • Pre-teach vocab (Border / Padding / Margin)

Student Activities

  • Participate in class discussion
  • Read The box model and take Outline Notes
  • Open VS Code
    • Download the starter code
    • Follow the steps to write your code
    • Show me your web page!*

Extend

Using your knowledge of the box model, code a playing card using HTML and CSS.

Ace of spades - Wikipedia
Ace of spades – Wikipedia

10 – Digging into CSS

April 16, 2020 | Lesson

In this lesson, we dig a little deeper into how CSS works and what we can do with the language.

Teacher Activities

  • Check Learning Journals
  • Pre-teach vocab (Selector / Inheritance / Attribute / Pseudo)
  • Discuss the problem of conflicting CSS rules

Student Activities

  • Participate in class discussion
  • Read Cascade and inheritance and take outline notes
  • Open your summer narrative in VS Code
    1. Add a conflicting / overriding CSS rule.
    2. Write a comment explaining which rule will be applied and why
    3. Show me your code!*
  • Read CSS selectors and take outline notes
  • In your notes, list and define the following CSS Selector terms (include a syntax example):
    • Type, class, and ID selectors
    • Attribute selectors
    • Pseudo-classes and pseudo-elements
    • Combinators

Extend

Practice CSS selectors with the CSS Diner Game

09 Intro to CSS

April 16, 2020 | Lesson

Cascading Style Sheets (CSS) is the appearance language for web pages. In this lesson, we begin to learn how to make our sites look modern and professional.

Teacher Activities

  • Check Learning Journals
  • Pre-teach vocab (style / cascade / appearance )
  • Demonstrate CSS (CSS Zen)

Student Activities

Extend

Explore a CSS framework such as Bootstrap