Week 8 (HTML, CSS, JavaScript)

Topics

  • HTTP
  • HTML
  • CSS
  • JavaScript

Programmming Exercises

Below are a few example programming exercises that engage students in hands-on practice on the week’s topics. Keep in mind that class might not be long enough to include all exercises, so be sure to pick just a few! For this week, in particular, you might choose one exercise from each of these topics.

  • Scoreboard
    • Students build a scoreboard out of HTML, CSS, and JavaScript. This exercise can be divided into three parts: creating a the necessary HTML elements, styling them with CSS properties and selectors, and implementing JavaScript to control the scoreboard.
    • Modifications
      • More comfortable students can be challenged to implement text underneath the scoreboard, indicating “Team 1 wins!” or “Team 2 wins!” when one of the teams gets to a specified number of points (e.g., 5).
      • If short on time, the exercise can be adapted to focus solely on Events and Event Listeners. Students tend to finish the HTML and CSS aspects of the exercise quickly.
    • Topics
      • HTML elements (table, td, tr, th, button) and attributes (onclick)
      • CSS properties and CSS selectors
      • Events and event listeners
      • JavaScript’s querySelector
    • Distribution Code
    • Sample Solution

Discussion Questions

One technique to promote participation in section is a quick, 2–3 minute discussion question. Letting students posit their own reasoning, even if they’re not entirely sure of an answer, can help reinforce material from lecture. One model for introducing these questions is the “Think, Pair, Share” approach, in which students take 30 seconds to think of their own answer and 60 seconds to share their answer with a partner. Afterwards, you can call on random pairs to share their thinking with the larger group. It’s also best to follow up with your own answer, too!

  • Recall from lecture how it’s possible to write HTML, CSS, and JavaScript in separate files, and link them together using HTML’s link tag. One name for this principle is “Separation of Concerns”, where each language is written in its own file. Are there any instances you can think of where it might make sense to include JavaScript in the same file as your HTML?
  • Notice how some HTML tags, like footer or header don’t actually produce content a user sees on the webpage. What, then, is the point of them?

Annotated Sample Slides

Here you’ll find sample slides to adopt or adapt when teaching Week 8.

Some slides contain speaker notes to illustrate why the sample slides take a certain approach to illustrating a concept or leading an exercise. You’re welcome to modify these slides as you see fit, though do try to keep some of the same elements of active learning that have been included in these samples.

Past versions of sample slides are also available under the “Additional Slide Resources” dropdown.