#Lesson 2 - Developer Tools
- Students will be able to open and explore the Chrome developer tools with precision.
- A webpage is a text document running in a browser.
- All code online can be seen by any user.
- Students will be assesed on their performance on the Do Now and Exit Task.
- Webpage
- Developer Tools
- Volunteer takes attendance. Procedure found here.
- Pose Do Now question to students, by projecting it onto the board:
There are two errors in the HTML page below. What are they and how can you fix them?
This question should be answered on paper.
“Does anyone want to answer the Do Now?”
Invite a student up to the board to point out the errors.
Explain to the students how to access the developer tools in their browser. Bring up a website (preferably an article based site that is gender neutral - i.e. about.com, bbc.co.uk, etc.). Showcase how you can use the developer tools to edit and personalize features on a site that is only viewable on your local machine. If using chrome be sure to point out the magnifying tool to easily locate the text on a page.
With the same webpage from the 'Introduction to New Material' still open, ask for student volunteers to come up to the front of the room and try to make their own edit to the page.
Allow 2-3 students to come up and make changes.
After changes have been made, demonstrate that simply reloading the page will undo all edits.
"For our next project, you will be remixing an article on the NY Times to be about yourself."
Ask students to visit nytimes.com and choose an article. Using the developer tools, students should edit a story to be about themselves.
Extension: Ask students to experiment with other sites they use frequently.
Wrap up the day with a quick recap on everything that was covered.