Today’s Goals:

• Finish up image projects; review grading system; play with Firefox’s web developer tools; and find examples of good design

 Today’s Featured Site:

• https://www.kindness.org/– What will you do?

 Finish up image projects

• Pixlr.com image challenges #2-#6 (click here)
• Inspirational quote (if you’re just beginning) (click here, scroll to Final Image Challenge)
• Inspirational quote (EVERYONE): go back to our Wall of Inspiration and tell me in a sentence or two why you picked your quote- see mine at the bottom as an example. If you didn’t include the quote author in your image, please add the name in the title on Padlet.
• Harvest of the Month– make sure you have everything in the checklist for success and email the finished product to agoldsberry@medford.k12.ma.us.

 Grades:

• Click here to see how you will be graded

 Browser Developer Tools

• Check out some of the useful web developer tools available in Firefox by doing the following activities
• 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.
• Go to a website you like
• Go to the CSS tab, click on it, and select “Disable all styles” so you can see the difference CSS makes to a webpage.
• Click on the Images tab and go to View Image Information in the menu.
• 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.
• Go back to the Information tab and choose View Color Information; this will show you all of the colors a website uses.
• Go to the Miscellaneous tab and choose Edit HTML. Change some of the HTML on the page and see what happens.
• Go to the Outline tab and choose Outline Block level elements. What do you notice about them?
• 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).

 Good Design & Effective Use of Color

• Find and make note of 2 websites: 1 is an example of good design and 1 is an example of bad design. Make sure you note WHY you chose those sites (what is good, what is bad, etc.). We are all going to share our examples.
• Think: What is good design? Why?
• Color: How do you pick colors for your website? Take this color survey and see how your answers compare to others around the world. Also, check out this interesting article about the psychology of color. Does it surprise you after seeing the color survey results?
• Design inspiration: The best in web design; fresh designs; and DJ Khaled’s questions for designers.