Today’s Goals:

• Quickly review security tips from last week’s class
• Learn about browsers: what they are, how to use the developer tools, clearing the cache
• Images: where to find them and how to edit them for your webpage

 Today’s featured web site:

• http://oldweb.today/– See how the web used to look in the past!

 Quick Security Review

• Let’s take this quiz
• Last thoughts on passwords- consider password managers and password generators

    All About Browsers

• Introduction
  • What is a browser and why do we use one?
  • Check out this informative site http://yourbrowser.is/ and try it in Chrome and Firefox
• Questions
  • What are some of the most popular browsers? Which one is the most popular?
  • What browsers do you use on your computer and your phone? Why?
  • Is it important to know how your website looks in different browsers?
  • Browser cache: what is it, how to clear it, and why?
• Other Browsers
  • Wayback Wednesday: check out what a browser looked like when I was in high school!
  • Internet Explorer: Why don’t we use it? What’s IE’s status?
  • Have you heard of these?: Let’s check some out.
• Browser Differences
  • Keeping up with the latest trends: Caniuse.com helps web developers find out which browsers support the latest innovations in HTML, CSS, and JavaScript.
• Developer tools:
  • We will make use of the built-in developer tools for Chrome this year. These tools can help us check out website code, find errors, preview changes, and much more!

  Browser Developer Tools- Chrome

• Documentation- Chrome developer tools
• Let’s go to the school district webpage
• Open up Chrome’s menu (click on the 3 vertical dots in the top right of the browser)
• Go to More Tools, then Developer Tools
• Click on Elements and you should see the webpage code
• Let’s hover our mouse over the code and also right-click on content on the webpage and choose Inspect to see what happens
• How is this different than View Page Source?
• Let’s change the position of the dock (tool display) and use toggle device toolbar (to check how site looks on different screen sizes)
• Let’s also open Firefox to see their developer tools
• Questions: Why would you use browser developer tools? Do all browsers have developer tools?

 Finding images

• Bad = downloading, using, helping yourself to whatever you find on Google (illegal, unethical, wrong)
• Good = using things freely available under Creative Commons licensing and from websites where people give explicit permission for their image usage.
• Great resources for finding images to use with your web projects. Let’s look at these sites to see how to find and download images:
  • https://unsplash.com/
  • https://www.pexels.com/
  • https://pixabay.com/
  • Bing.com (do image search, then click License, choose free to share and use)
• You must ONLY use these sites, or one that you find that I approve, for ALL of your projects this year. No exceptions! It is useful to build good habits now so you won’t have problems later.
• Even if we’re just testing and experimenting, you must only use images you find from these sources.