Skip to content

Lesson 14 (HTML CSS)

Jump to bottom
Courtney Frey edited this page Apr 21, 2022 · 6 revisions

Lesson 14: HTML

In the prep work for this lesson (HTML), the students learned:

  1. How to access and use the terminal as a standalone program and through VSCode.
  2. Basic HTML tags:
    1. <b>, <em>, <a>, <img>, <br>, <p>, <span>, <div>, <form>, <ul>, <ol>, <li>, <table>
    2. How to add attributes and properties to HTML elements.
  3. How to structure static HTML pages:
    1. doctype, <html>, <head>, <body>, <title>
    2. Whitespace

In the prep work for this lesson (CSS), the students learned:

  1. Syntax.
  2. How to set font-size, color, font-family, background-color, text-align, etc.
  3. Assign styles to an element, class, or ID.
  4. Internal vs. inline vs. external locations.

Announcements

  1. Start working on graded assignment #4.
  2. Check with your class Candidate Engagement Manager for any other announcements.

Full-Time Students

  • Welcome to Days 20 & 21
    • Day 20:
      • Assignment 3 work time before lunch
      • Lesson 14 prep work after lunch
    • Day 21:
      • Lesson 14 lecture and studio before lunch
      • Assignment 3 work time after lunch

Large Group Time (Instructor Notes)

HTML Topics That Require More Attention

  1. Live coding:
    1. Build a simple, static web page from scratch.
    2. Accept suggestions from the students for elements, text color, etc.
    3. Note tedious aspects as they appear (e.g. making EVERY h2 red), and note that we will learn how to streamline this process in the next chapter.
  2. Reinforce why using a VS is a good idea. If you have a personal story that relates to this, feel free to share it!
  3. Studio intro. Task uses browser developer tools.
  4. Graded Assignment #4 is open! Remind students that the key to getting the assignment done is to read through everything carefully and start on what you can do as soon as possible. In class, read through the instructions with your students and highlight what they are capable of doing after this lesson's topic.

CSS Topics That Require More Attention

  1. Review the differences between using element selectors, class selectors, and id selectors in CSS.

    1. What is the sequence in priority?

  2. Discuss CSS vs. inline styling. What is the best practice?

  3. Live coding:

    1. If you saved the HTML page from the HTML exercises, use that as a starting point for adding some CSS.
    2. Recall the tedious aspects of HTML design from the HTML exercises. Note how CSS streamlines the process.
    3. Save and commit changes, then push to a remote GitHub repository. You can use whatever HTML project you make for the CSS in the next

  4. Studio intro.

Studio (TF Notes)

  1. Common student stumbling blocks:
    1. Finding the dev tools for their particular browser version.
    2. Using copyrighted images. This is a good time to remind your students that just because something is found on the web, that does NOT mean it's free to use. If in doubt, DON'T. The safest bet would be to stick to personal images.
  2. Encourage having fun! Ooooh and aaaaah as you check in with each of your students.
  3. Remind your students to keep their new headlines light-hearted. The studio page has some good language around this, but you should comment on this as well.

Want to contribute to this Wiki?

Fork it and send a pull request.

Clone this wiki locally