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.

06 Responsive Images

March 31, 2020 | Lesson

Images on the web present designers with new challenges because the layout is fluid. These challenges exist because we cannot control what device or scale our web page will be viewed by users. The solutions to these problems have one foot in visual design principals and another in code.

Teacher Activities

  • Check Learning Journals
  • Discuss the nature of the fluid web
    • Demonstrate resizing the browser, zooming, and mobile emulation.
    • Discuss the challenges of screen orientation and bandwidth
    • Demonstrate the art direction problem
    • Demonstrate the resolution switching problem
  • Pre-teach vocab (resolution / orientation / raster)

Student Activities

  • Participate in class discussion
  • Read Responsive images and take Outline Notes
  • Complete the Assessment: Mozilla splash page
    1. Read the instructions
    2. Ask questions
    3. Download the starter files
    4. Complete the task
    5. Show me your web page!*
  • Open your summer story in VS Code
    • Identify what images present the resolution switching problem or art direction problem
    • Use image editing software as necessary to prepare your image solutions
    • Implement your HTML solution
    • Show me your web page!*

Extend

In the article #133: Figuring Out Responsive Images, Chris Coyier goes into detail about responsive images. Read this article and tryout or refine your code to integrate his ideas. This article includes discussion of the CSS rules for responsive images.

05 Scalable Vector Graphics

March 31, 2020 | Lesson

In this lesson we explore the SVG format in all its glory.

Teacher Activities

Student Activities

  • Participate in class discussion
  • Read Adding vector graphics to the Web and take Outline Notes
  • Go to the Noun Project and download two SVGs images to add to your summer story narrative.
  • Open your summer story document in VS Code.
    1. Embed one of the SVG’s to your document using the <img> element.
    2. Embed the other SVG as inline code in your document.
    3. Show me your web page!*

Extend

Use a vector drawing tool to create your own SVG images (Adobe Illustrator or Sketch). Explore SVG animation techniques.

04 HTML Images, Video, and Audio

March 30, 2020 | Lesson

In this lesson, we learn the fundamentals of embedding visual and audio content on a web page.

Teacher Activities

  • Check Learning Journals
  • Pre-teach vocab (jpeg / png / caption)

Student Activities

  • Read Images in HTML and take Outline Notes
  • Open your Summer Story in VS Code
    1. Download three images that are appropriate for your narrative
    2. Use what you learned to embed these images in your HTML page
    3. Each image must have alternative text
    4. At least one image must have a title (tool tip)
    5. At lease one image must have a caption (See <figcaption> for more info)
    6. Show me your web page!*
  • Read Video and audio content and take Outline Notes
  • Read From object to iframe — other embedding technologies and take Outline Notes.
  • Open your Summer Story in VS Code
    1. Embed a video or audio source in your HTML page
    2. Show me your web page!*

Extend

Explore techniques to embed other technologies in your web page including Google Docs, Sheets, Slides, and/or Maps.

Use graphic design software to develop a custom banner for the summer story narrative.

03 HTML Structure and Debugging

March 30, 2020 | Lesson

This lesson delves a little deeper into text content markup, document structure, and finally debugging practices.

Teacher Activities

  • Check Learning Journals
  • Prepare to facilitate the Mozilla Assessments†
    • Assign peer teams for collaboration
    • Run a group review of the assessment materials
    • Review how to link a CSS file
    • Discuss debugging strategies
  • Pre-teach vocab (aside / citation / debugging)

Student Activities

Extend

Retrieve a morning announcement that was read that day and task students with marking up the announcement as a web page.

02 HTML Text and Links

March 27, 2020 | Lesson

This lesson covers basic text and hyperlink markup.

Teacher Activities

  • Check Learning Journals
  • Familiarize students with Git Hub and downloading starter assets
  • Pre-teach vocab (link / hyperlink / navigation menu)

Student Activities

Extend

Students who complete these assignments and units quickly should revisit the summer story in lesson 01. Apply new text markup techniques learning in this lesson to that document. Include hyperlinks to Wikipedia articles where appropriate.

01 Intro to HTML

March 27, 2020 | Lesson

This lesson introduces the basics of HTML and the materials for the class.

Teacher Activities

  • Introduce technologies and learning environment
  • Ensure equitable access to technology and materials
  • Explain Learning Journal, Outline Notes, and Lab expectations
  • Pre-teach vocabulary (tags / elements / meta)

Student Activities

  • Open a word processing program (Word, Pages, Docs) and write a brief narrative about your summer break. The story should not be longer than a page, but should contain enough information to make an impact on the reader.
  • Read Getting Started with HTML and create Outline Notes
  • Create your first HTML page:
    1. Create a new blank document named index.html
    2. Open this document with VS Code
    3. Code the HTML skeleton
    4. In between the body tags, paste your summer story content
    5. Mark up your content with heading tags (h1-h6) and paragraph tags (p)
    6. Add other elements where appropriate
    7. Save the file, then open with your web browser
    8. Show me your webpage!*
  • Read What’s in the head? and take Outline Notes
  • Update your web page in VSCode
    1. In the head element add meta elements
    2. Add the title element
    3. Show me your webpage!*

* When in class together, I require students to show me the project running on their computer, describe what their code did / is doing / is not doing, and answer questions or describe challenges. This can be done remotely through video, screen shots, and good documentation of code.

Jeff