Skip to content

Instantly share code, notes, and snippets.

@olitreadwell

olitreadwell/lecture-1.md

Last active April 28, 2023 14:15
Show Gist options
  • Save olitreadwell/bf53ac65c1aed615e8ee4edbb524eeae to your computer and use it in GitHub Desktop.
Save olitreadwell/bf53ac65c1aed615e8ee4edbb524eeae to your computer and use it in GitHub Desktop.
Download ZIP
2023-04-18-frontend-lesson-plans-html-css-dom-and-dom-manipulation
Raw
lecture-1.md

Monday Lecture: HTML/CSS Review

Objective: At the end of this lesson, students will be able to:

  • Build websites without Repl.It
  • Use the VS Code Live Preview Extension
  • Open Website projects in the browser with Live Preview
  • Use Chrome DevTools
  • Understand the Chrome Dev Tools Element Tab
  • Utilize HTML boilerplate
  • Describe semantic HTML
  • Use Chrome Dev Tools - Responsive View
  • Develop mobile first websites
  • Understand Chrome Dev Tools Styles
  • Connect a CSS Stylesheet to a website and verify it is working
  • Manipulate CSS in the Chrome Dev Tools

Materials:

  • Computer with internet access
  • Access to Chrome Dev Tools

Procedure:

Introduction (10 minutes):

  • Welcome students and introduce the lesson
  • Ask students to introduce themselves
  • Review the objective for the lesson

Building websites without Repl.It (15 minutes):

  • Explain the concept of building websites without Repl.It
  • Demonstrate how to use the VS Code Live Preview Extension
  • Show how to open Website projects in the browser with Live Preview

Chrome DevTools (20 minutes):

  • Provide an overview of Chrome DevTools
  • Demonstrate how to use the Chrome Dev Tools Element Tab
  • Explain HTML boilerplate
  • Discuss semantic HTML
  • Explain Chrome Dev Tools - Responsive View
  • Explain developing mobile first websites
  • Show how to use Chrome Dev Tools Styles

Connecting a CSS Stylesheet to your Website & Verifying it is working (15 minutes):

  • Explain how to connect a CSS Stylesheet to a website
  • Demonstrate how to verify that it is working

Manipulating CSS in the Chrome Dev Tools (15 minutes):

  • Explain how to manipulate CSS in the Chrome Dev Tools
  • Demonstrate how to do this in the Chrome Dev Tools

Questions & Wrap-up (5 minutes):

  • Ask students if they have any questions
  • Wrap-up the lesson

Break (5 minutes):

  • Take a 5-minute break

Conclusion (10 minutes):

  • Review the objectives for the lesson
  • Discuss any additional questions
  • Give students feedback on their progress

imagine you're an expert instructor, with knowledge of the book Teach Like a Champion by Doug Lemov teaching strategies, creating content for online learning to adult learners.

Write 2 10-15 minute interactive group student activities where they write some code in VS Code or interact with the Chrome DevTools using the material for Mondays lesson.

Activity 1: HTML Boilerplate (10-15 minutes):

  • Divide the students into groups of 4-5 people
  • Give each group a blank HTML document and ask them to create a basic HTML boilerplate using the VS Code editor
  • Ask the groups to discuss and decide on the elements and content needed for the boilerplate
  • Provide guidance as necessary
  • Circulate among the groups to check their progress and answer any questions

Activity 2: Using Chrome Dev Tools (10-15 minutes):

  • Divide the students into groups of 4-5 people
  • Each group should open a web page in Chrome and use the Chrome Dev Tools to inspect the elements and content
  • Ask the groups to discuss and identify the different elements and content on the page
  • Provide guidance as necessary
  • Circulate among the groups to check their progress and answer any questions

Activity 1: Connecting a CSS Stylesheet to Your Website (10-15 minutes):

  • Divide the students into groups of 4-5 people
  • Give each group a website template and ask them to connect a CSS Stylesheet to the website
  • Ask the groups to discuss and decide on which elements and content they would like to include in the Stylesheet
  • Provide guidance as necessary
  • Circulate among the groups to check their progress and answer any questions

Activity 2: Chrome Dev Tools - Responsive View (10-15 minutes):

  • Divide the students into groups of 4-5 people
  • Each group should open a web page in Chrome and use the Chrome DevTools Responsive View to view the page on different devices
  • Ask the groups to discuss and identify the differences in the page layout when viewed on different devices
  • Provide guidance as necessary
  • Circulate among the groups to check their progress and answer any questions

Activity 3: Manipulating CSS in the Chrome Dev Tools (10-15 minutes):

  • Divide the students into groups of 4-5 people
  • Each group should open a web page in Chrome and use the Chrome DevTools to manipulate the CSS of the page
  • Ask the groups to discuss and identify how the changes they make to the CSS affects the layout of the page
  • Provide guidance as necessary
  • Circulate among the groups to check their progress and answer any questions

Activity 4: Semantic HTML (10-15 minutes):

  • Divide the students into groups of 4-5 people
  • Give each group a website template and ask them to create HTML markup using semantic HTML
  • Ask the groups to discuss and decide which elements and content they need to use to write semantic HTML
  • Provide guidance as necessary
  • Circulate among the groups to check their progress and answer any questions

Activity 5: Mobile First Website Development (10-15 minutes):

  • Divide the students into groups of 4-5 people
  • Give each group a website template and ask them to create a mobile first view of the website
  • Ask the groups to discuss and decide how to best format the page for mobile devices
  • Provide guidance as necessary
  • Circulate among the groups to check their progress and answer any questions

write 15 specific descriptive examples of using Teach Like A Champion Strategiesabout the HTML/CSS review lecture , please give specific examples about topic of HTML/CSS Review

Here are some good examples to follow:

  1. Model. Demonstrate the steps of connecting a CSS Stylesheet to a website and verifying that it is working.
  2. Cold Call. Randomly call upon students to answer questions about semantic HTML.
  3. Gradual Release of Responsibility. Guide students with step-by-step instructions before allowing them to attempt an HTML or CSS task.
  4. Draw the Map. Provide students with a graphical representation of the Chrome Devtool’s elements in order to better understand their purpose.
  5. Interactive Modeling. Show students how to use the Live Preview Extension, then ask them to display the same task on their machine.
  6. Fast Reviewing. Quickly go over the concepts of the Chrome Devtools features in order to move forward with the lesson.
  7. Check for Understanding. Poll the class periodically and ask for responses about the topics discussed.
  8. Attack Mishandled Material. Focus on any concepts that may have been misunderstood or need to be reviewed to ensure good understanding.
  9. Short Do Now Activities. At the start of class, engage students by asking them to perform a specific task before moving onto the lesson.
  10. Provide Structure. Provide the class with a frame of reference for future HTML and CSS tasks.
  11. Every Person Every Time. Make sure to address each student during the lesson, even remote learners.
  12. Keep Slogans. Motivate the class by giving concise directions of what is to be done (e.g. “use semantic HTML”)
  13. Rehearse. Allow students to have time to practice HTML and CSS within the lesson context in order to be prepared.
  14. Activate Prior Knowledge. Ask students to recall usthat they have learned previously and analyze it with the current lesson.
  15. Clarify and Over-Enunciate. Explain any terms or concepts that the students may not be familiar with and make sure to speak clearly and present the material in an organized manner.
Raw
lecture-2.md

Wednesday Lecture: Intro to the Document Object Model

Objectives:

At the end of the lesson, students will be able to:

  1. Understand the concept of the Document Object Model (DOM).
  2. Use the Chrome Dev Tools JavaScript Console.
  3. Connect a JS Script to their website & verify it is working.
  4. Use the Dev Tools Element Tab to manipulate elements.
  5. Change text, add attributes, and manipulate CSS in the Dev Tools Element Tab.
  6. Select elements in the JavaScript console and store them as variables.

Agenda:

Introduction & Review (10 min):

  • Introduce the lesson and review the topics from the previous lesson: Building websites without Repl.It, VS Code Live Preview Extension, Opening Website projects in the browser with Live Preview, Chrome DevTools, Chrome Dev Tools Element Tab, HTML boilerplate, Semantic HTML, Chrome Dev Tools
  • Responsive View, Developing Mobile First, Chrome Dev Tools Styles, Connecting a CSS Stylesheet to your Website & Verifying it is working, Manipulating CSS in the Chrome Dev Tools (5 min)

Chrome Dev Tools JavaScript Console (10 min):

  • Explain the Chrome Dev Tools JavaScript Console (5 min)
  • Demonstrate how to use the Chrome Dev Tools JavaScript Console (5 min)

Connect a JS Script to your Website & Verifying it is working (15 min):

  • Explain how to connect a JS Script to your Website & Verify it is working (5 min)
  • Provide an example of connecting a JS Script to the website and verifying it is working using the Chrome Dev Tools (10 min)

Intro to the DOM (10 min):

  • Explain the concept of the Document Object Model (DOM) (5 min)
  • Demonstrate how the DOM is like a tree (5 min)

Manipulating Elements in the Dev Tools Element Tab (15 min):

  • Explain how to manipulate elements in the Dev Tools Element Tab (5 min)
  • Demonstrate how to add, remove, change text, and add attributes (5 min)
  • Demonstrate how to manipulate CSS in the Dev Tools Element Tab (5 min)

Selecting elements in the JavaScript console (15 min):

  • Explain how to select elements in the JavaScript console (5 min)
  • Demonstrate how to select elements in the JavaScript console (5 min)
  • Explain how to store selected elements as variables (5 min)

-- imagine you're an expert instructor, with knowledge of the book Teach Like a Champion by Doug Lemov teaching strategies, creating content for online learning to adult learners.

Write 5 10-15 minute interactive group student activities where they write some code in VS Code or interact with the Chrome DevTools using the material for Wednesdays lesson.

here are two examples from a different lesson

Activity 1: DOM Console Exploration (10-15 minutes):

  • Divide the students into groups of 4-5 people
  • Ask the groups to open the Chrome Dev Tools JavaScript Console
  • Ask the groups to explore the DOM and its elements and content by experimenting with the console
  • Provide guidance as necessary
  • Circulate among the groups to check their progress and answer any questions

Activity 2: Selecting Elements in the Dev Tools (10-15 minutes):

  • Divide the students into groups of 4-5 people
  • Ask the groups to open the Chrome Dev Tools Element Tab
  • Ask the groups to explore the DOM by selecting different elements and store them in variables
  • Provide guidance as necessary

  • Circulate among the groups to check their progress and answer any questions

Activity 3: Manipulating Elements in the Dev Tools (10-15 minutes):

  • Divide the students into groups of 4-5 people
  • Ask the groups to open the Chrome Dev Tools Element Tab
  • Ask the groups to explore the DOM by manipulating different elements such as adding, removing, changing text, and adding attributes
  • Provide guidance as necessary
  • Circulate among the groups to check their progress and answer any questions

Activity 4: Connecting a JS Script Demo (10-15 minutes):

  • Divide the students into groups of 4-5 people
  • Demonstrate how to connect a JS Script to their website & Verify it is working
  • Ask the groups to discuss the process and any questions they may have
  • Provide guidance as necessary

Activity 5: Connecting a JS Script Assignment (10-15 minutes):

  • Divide the students into groups of 4-5 people
  • Ask the groups to connect a JS Script to their website & Verify it is working
  • Ask the groups to discuss the process and any questions they may have
  • Provide guidance as necessary
  • Circulate among the groups to check their progress and answer any questions

imagine you're an expert instructor, with knowledge of the book Teach Like a Champion by Doug Lemov teaching strategies, creating content for online learning to adult learners. write 15 specific descriptive examples of using Teach Like A Champion Strategies about the Intro to the Document Object Model lecture , please give specific examples about the topic of Intro to the Document Object Model

Here are some good examples to follow from a different lecture topic:

  1. Model. Demonstrate the steps of connecting a CSS Stylesheet to a website and verifying that it is working.
  2. Cold Call. Randomly call upon students to answer questions about semantic HTML.
  3. Gradual Release of Responsibility. Guide students with step-by-step instructions before allowing them to attempt an HTML or CSS task.
  1. No Opt Out. Ask questions and require all students to answer, even if they are unsure of the answer.
  2. Respect Every Voice. Make sure every student has a chance to speak and ask questions about the Document Object Model.
  3. Active Listening. Allow students to discuss and explain their understanding of the DOM and respond with appropriate questions and feedback.
  4. Show Call. Ask students to explain how to use the Chrome Dev Tools JavaScript Console.
  5. Check for Understanding. Ask students to summarize their understanding of the DOM and the steps required to connect a JS Script to a website.
  6. Right is Right. Encourage students to use the right terminology when discussing the Document Object Model.
  7. Choral Responding. Ask the class to repeat key points such as the purpose of the DOM.
  8. No Hands. Allow students to share their ideas through discussion rather than through hands-up.
  9. Wait Time. Allow enough time for students to think and respond to questions before moving on.
  10. Cold Call. Randomly call on students to answer questions related to the DOM.
  11. Independent Practice. Give students time to practice manipulating elements through the Dev Tools Element Tab.
  12. Name It. Ask students to name the elements they are manipulating in the Dev Tools Element Tab.
  13. Group Critique. Have students work in groups to discuss their solutions and point out mistakes.
  14. Quality Criteria. Set criteria for the quality of answers and solutions that students should strive for.
  15. Describe, Compare, Contrast. Ask students to describe the similarities and differences between manipulating elements in the Dev Tools Element Tab and selecting elements in the JavaScript console.
Raw
lecture-3.md

Friday Lecture: Document Object Model Manipulation

Objectives:

At the end of the lesson, students will be able to:

  1. Select elements in an external JavaScript file and store them as variables.
  2. Select single elements using querySelector, getElementByID.
  3. Select multiple elements using querySelectorAll, getElementsByTagName.
  4. Fix errors by using DOMContentLoaded.
  5. Change content using an external JavaScript file.
  6. Get and set content using textContent, innerText, innerHTML (and its dangers).
  7. Change the content of multiple elements.
  8. Add elements using an external JavaScript file.
  9. Use createElement and appendChild.
  10. Add multiple elements using a loop.
  11. Remove selected elements using the Chrome DevTools JavaScript Console.
  12. Remove selected elements using an external JavaScript file.
  13. Remove multiple elements.
  14. Change styles using an external JavaScript file.
  15. Get and set styles using JavaScript.
  16. Change styles of multiple elements.

Time: 2 hours

Materials:

  • Computer with internet access
  • Zoom
  • Chrome Dev Tools

Agenda:

Introduction & Review (10 min):

  • Introduce the lesson and review the topics from the previous lessons: Building websites without Repl.It, VS Code Live Preview Extension, Opening Website projects in the browser with Live Preview, Chrome DevTools, Chrome Dev Tools Element Tab, HTML boilerplate, Semantic HTML, Chrome Dev Tools - Responsive View, Developing Mobile First, Chrome Dev Tools Styles, Connecting a CSS Stylesheet to your Website & Verifying it is working, Manipulating CSS in the Chrome Dev Tools, Chrome Dev Tools JavaScript Console, Connecting a JS Script to your Website & Verifying it is working, Intro to the DOM, Manipulating Elements in the Dev Tools Element Tab (5 min)

Selecting elements in external JavaScript file & storing as variables (15 min):

  • Explain how to select elements in an external JavaScript file and store them as variables (5 min)
  • Demonstrate how to select single elements using querySelector, getElementByID (5 min)
  • Demonstrate how to select multiple elements using querySelectorAll, getElementsByTagName (5 min)

Error fixed by DOMContentLoaded (10 min):

  • Explain how to fix errors by using DOMContentLoaded (5 min)
  • Demonstrate how to fix errors by using DOMContentLoaded (5 min)

Changing content using external JavaScript file (15 min):

  • Explain how to change content using an external JavaScript file (5 min)
  • Demonstrate how to get and set content using textContent, innerText, innerHTML (and its dangers) (5 min)
  • Demonstrate how to change the content of multiple elements (5 min)

Adding elements using external JavaScript file (15 min):

  • Explain how to add elements using an external JavaScript file (5 min)
  • Demonstrate how to use createElement and appendChild (5 min)
  • Demonstrate how to add multiple elements using a loop (5 min)

Break (5 min):

Removing selected elements using the Chrome DevTools JavaScript console & external JavaScript file (15 min):

  • Explain how to remove selected elements using the Chrome DevTools JavaScript console (5 min)
  • Demonstrate how to remove selected elements using the Chrome DevTools JavaScript console (5 min)
  • Explain how to remove selected elements using an external JavaScript file (5 min)
  • Demonstrate how to remove multiple elements (5 min)

Change styles using external JavaScript files (15 min):

  • Explain how to change styles using an external JavaScript file (5 min)
  • Demonstrate how to get and set styles using JavaScript (5 min)
  • Demonstrate how to change styles of multiple elements (5 min)

Conclusion & Wrap-up (5 min):

  • Review the main points of the lesson (2 min)
  • Answer any questions (3 min)

-- imagine you're an expert instructor, with knowledge of the book Teach Like a Champion by Doug Lemov teaching strategies, creating content for online learning to adult learners.

Write 5 10-15 minute interactive group student activities where they write some code in VS Code or interact with the Chrome DevTools using the material for Fridays lesson.

Write 5 10-15 minute interactive group student activities where they write some code in VS Code or interact with the Chrome DevTools using the material for Fridays lesson.

here are two examples from a different lesson

Activity 1: DOM Console Exploration (10-15 minutes):

  • Divide the students into groups of 4-5 people
  • Ask the groups to open the Chrome Dev Tools JavaScript Console
  • Ask the groups to explore the DOM and its elements and content by experimenting with the console
  • Provide guidance as necessary
  • Circulate among the groups to check their progress and answer any questions

Activity 2: Selecting Elements in the Dev Tools (10-15 minutes):

  • Divide the students into groups of 4-5 people

  • Ask the groups to open the Chrome Dev Tools Element Tab

  • Ask the groups to explore the DOM by selecting different elements and store them in variables

  • Provide guidance as necessary

  • Circulate among the groups to check their progress and answer any questions

    Activity 1: Adding Elements using JavaScript (10-15 minutes):

  • Divide the students into groups of 4-5 people

  • Ask the groups to open their text editor and create an external JavaScript file

  • Ask the groups to use createElement and appendChild to add elements to the DOM

  • Provide guidance as necessary

  • Circulate among the groups to check their progress and answer any questions

Activity 2: Changing Content Using JavaScript (10-15 minutes):

  • Divide the students into groups of 4-5 people
  • Ask the groups to open their text editor and create an external JavaScript file
  • Ask the groups to use textContent, innerText, and innerHTML to change content in the DOM
  • Provide guidance as necessary
  • Circulate among the groups to check their progress and answer any questions

Activity 3: Selecting Multiple Elements (10-15 minutes):

  • Divide the students into groups of 4-5 people
  • Ask the groups to open their text editor and create an external JavaScript file
  • Ask the groups to use querySelectorAll and getElementsByTagName to select multiple elements from the DOM
  • Provide guidance as necessary
  • Circulate among the groups to check their progress and answer any questions

Activity 4: Removing Elements Using JavaScript (10-15 minutes):

  • Divide the students into groups of 4-5 people
  • Ask the groups to open their text editor and create an external JavaScript file
  • Ask the groups to use removeChild to remove elements from the DOM
  • Provide guidance as necessary
  • Circulate among the groups to check their progress and answer any questions

Activity 5: Changing Styles Using JavaScript (10-15 minutes):

  • Divide the students into groups of 4-5 people
  • Ask the groups to open their text editor and create an external JavaScript file
  • Ask the groups to use JavaScript to get and set styles
  • Provide guidance as necessary
  • Circulate among the groups to check their progress and answer any questions

imagine you're an expert instructor, with knowledge of the book Teach Like a Champion by Doug Lemov teaching strategies, creating content for online learning to adult learners. write 15 specific descriptive examples of using Teach Like A Champion Strategies about the Document Object Model Manipulation lecture , please give specific examples about the topic of Document Object Model Manipulation

Here are some good examples to follow from a different lecture topic:

  1. Model. Demonstrate the steps of connecting a CSS Stylesheet to a website and verifying that it is working.
  2. Cold Call. Randomly call upon students to answer questions about semantic HTML.

  3. Gradual Release of Responsibility. Guide students with step-by-step instructions before allowing them to attempt an HTML or CSS task.

  4. Model. Demonstrate the steps of selecting elements in an external JavaScript file and storing them as variables.
  5. Cold Call. Randomly call upon students to explain the differences between querySelector, getElementByID, querySelectorAll, and getElementsByTagName.
  6. Gradual Release of Responsibility. Guide students with step-by-step instructions before allowing them to manipulate elements on the DOM.
  7. No Opt Out. Ask all students to provide an answer when asking questions about the DOM manipulation.
  8. Activation. Ask students to come up with a way to use DOM manipulation to solve a problem.
  9. Right Is Right. Ask students to create a solution to a problem using DOM manipulation and discuss the most efficient and correct way to do it.
  10. Show Me. Ask students to provide a visual example of how they would use DOM manipulation to solve a problem.
  11. Chunking. Break down the different elements of DOM manipulation into manageable parts and explain each concept one at a time.
  12. Check for Understanding. Ask students questions throughout the lesson to gauge their understanding of the concepts being taught.
  13. Differentiated Instruction. Modify the instruction for students that need additional help or challenge those that need more of a challenge.
  14. Do It Again. Ask students to refactor their code to make it more efficient.
  15. One at a Time. Ask students to select one element at a time using the DOM manipulation methods and discuss the differences between the methods.
  16. Positive Framing. Emphasize the usefulness of DOM manipulation in everyday web development.
  17. Rehearsal. Ask students to practice manipulating elements on the DOM and discuss the results.
  18. Questions. Ask students to come up with questions about DOM manipulation to discuss with the class.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment