Today’s Goals:

• Review cybersecurity topics from last week by playing a quick game
• 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 website:

• https://www.webdesignmuseum.org/ – An online museum of web design

 Cybersecurity Review

• Review game: I’ll divide you into a few teams and then we’ll play!
• What can you do to protect yourself?
  • Your passwords
    Strong password generator: https://www.lastpass.com/password-generator 
    Password manager and strong master password
  • List of To-do’s for accounts and devices
    https://staysafeonline.org/stay-safe-online/securing-key-accounts-devices/ 
    Your online accounts and browsing
    Your phone/computer
    Downloading things and playing online games

    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
  • Old School: 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.