Skip to content

Latest commit

 

History

History
54 lines (36 loc) · 1.94 KB

unit-3-lesson-05.md

File metadata and controls

54 lines (36 loc) · 1.94 KB

Lesson 3.5: DOM Manipulation, Part 2


Lesson Materials

📖 Upload as Material in Google Classroom:

📝 Upload as Assignment in Google Classroom (5 points):


Key Points

👋 Welcome & Do Now (5) :

  • Instruct students to open the script.js file.
  • Ask students to complete the tasks listed in the file.
  • Discuss the question "What does .style do in JavaScript?"

✨ DOM & Styling (5) :

  • Discuss how sometimes we need to change the style of a web page during interactions. Examples include:
    • Changing the background color of the page.
    • Modifying the color of a font.
    • Toggling the visibility of an image.
  • Explain how .style is a property used to modify or add CSS styling of a webpage.
  • Point out how CSS properties with two words are camel cased in JavaScript.

💻 Code Along (5) :

  • Complete only the first task together.
  • Live code and explain the process of manipulating DOM elements with .style properties.
  • Encourage students to code alongside you for hands-on learning.

💻 Code Solo (20) :

  • Students will practice the concepts taught, independently.
  • Instruct students to complete the remaining tasks on their own.
  • Encourage them to search online for CSS properties and values they might not remember.

👋 Exit Ticket & Closing (5) :

  • Instruct students to navigate to Lesson 3.5 - DOM Manipulation, Part 2 Exit Ticket in Google Classroom.
  • They should complete and submit the exit ticket.
  • Emphasize to students the importance of double-checking that they've submitted their exit ticket.

Common Misconceptions

Additional Materials

  • n/a