Today’s goals:

• Finish the HTML Championships and double-check your code
• Learn about browsers: what they are, how to use the developer tools, clearing the cache
• Decorate for Halloween/Fall (optional): October desktop wallpaper from Smashing Magazine is here!

 Today’s featured websites:

• http://www.onlinepumpkincarving.com/– Possibly easier than the real thing! Let’s also check out http://isitfridayyet.net/ and see what the site says today.

 HTML Championships

• Click here for the instructions
• Check your code against this answer key and make sure you have EVERYTHING. Check for typos such as extra or missing pointy brackets, HTML tags out of order, missing opening or closing tags, etc.

    All About Browsers

• Introduction
  • What is a browser and why do we use one?
  • Let’s watch this basic browser intro video before we start exploring our browsers’ features
  • Check out this informative site http://yourbrowser.is/ and try it in Chrome and Firefox
• Questions
  • What are some of the most popular browsers?
  • 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: what happened to the former browser and what’s new?
  • Have you heard of these?: Let’s check some out.
• Understanding Your Users
  • Let’s look at web statistics for the school website that let me know what browsers our visitors are using to access the site
  • 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 and Firefox this year. These tools can help us check out website code, find errors, preview changes, and much more! Today we’ll look at Firefox.

 Browser Developer Tools

• Check out some of the useful web developer tools available in Firefox by doing the following activities
  1. Open Firefox. You should see your web developer tools in the tool bar at the top of the browser. If not, right click in the tool bar and then make sure “web developer” has a check in front of it.
  2. Go to a website you like
  3. Go to the CSS tab, click on it, and select “Disable all styles” so you can see the difference CSS makes to a webpage.
  4. Click on the Images tab and go to View Image Information in the menu.
  5. Click on the Information tab and then go to Display Element Information. Now point your mouse to different things on the page to see the code.
  6. Go back to the Information tab and choose View Color Information; this will show you all of the colors a website uses.
  7. Go to the Miscellaneous tab and choose Edit HTML. Change some of the HTML on the page and see what happens.
  8. Go to the Outline tab and choose Outline Block level elements. What do you notice about them?
  9. Go to the Resize tab and choose View Responsive Layouts to see how the page looks on different screen sizes. Also, go to the top right of the browser, click on the “hamburger” (3 horizontal lines in the tool bar), choose Developer, then Responsive Design mode. Drag the edge around to see how the page shifts depending on the screen size (if the page is responsive; make note of whether it is).