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