Below are a few example programming exercises that engage students in hands-on practice on the week’s topics. Keep in mind that section 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.
- 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.
- HTML elements (
button) and attributes (
- CSS properties and CSS selectors
- Events and event listeners
- HTML elements (
- Distribution Code
- Sample Solution
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!
- Notice how some HTML tags, like
headerdon’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 Section 8.
Some slides contain speaker notes to illustrate why the sample section takes 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.