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

08 Intro to Forms

April 2, 2020 | Lesson

In this lesson, we scratch the surface of HTML forms. While the Mozilla eBook provides great detail on forms, I prefer to focus on the basics and circle back around to the more advanced concepts later once the students encounter forms required for a development project.

Teacher Activities

  • Check Learning Journals
  • Pre-teach vocab (input / controls / widgets / submit)
  • Demonstrate web form examples (stripe, airbnb, orbitz)

Student Activities

Extend

Using the image below as a guide, code the Pizza Form

A form for ordering Pizza. This form image shows form labels followed by input controls of various types.

07 HTML Tables

April 2, 2020 | Lesson

In this lesson we tackle the time-honored subject of HTML tables and learn the meaning of the phrase, “tag-soup!”

Teacher Activities

  • Check Learning Journals
  • Pre-teach Vocab (table, span, data cell)
  • Print and prepare “dog table” handout
    • I print the dog table as a handout
    • We review the table data and discuss the usefulness of tables
    • Using highlighters or colored pencils, we trace the blocks, identifying the table, rows, headers, and data cells using different colors.
  • Print and prepare the “planetary table” handout.
    • I follow the same proceedure except we focus on where the rows begin
    • The colspan/rowspan attributes make this a very confusing project for beginners.

Student Activities

  • Participate in the “basic tables” class discussion
  • Read HTML table basics and take Outline Notes
  • Prepare to code the dog table
    1. Create a new folder
    2. Open the folder with VS Code
    3. Create the dog-table.html file
    4. Code an HTML skeleton
    5. Code the dog table
    6. Show me your web page!*
  • Participate in the “advanced tables” class discussion
  • Read HTML Table advanced features and accessibility and take Outline Notes
  • Prepare to code the Assessment: Structuring planet data
    • Read the instructions and ask questions
    • Download the starter code
    • Write your code
    • Show me your web page!*

Extend

This can be a challenging assignment for students. The concepts seem simple, but the nesting and attribute dependency make debugging difficult. A peer code review, or peer programming arrangement can help students be more successful with this.