Week 4

Notes

Browser Web Inspectors

• Browser Dev Tools Exercise
• Google Chrome Developer Tools: Get Started With Viewing And Changing CSS
• Safari Web Inspector Help: Elements tab
• Firefox Developer Tools: Page Inspector

CSS Selectors and Big Concepts

• Block and Inline Elements
• Divs, Spans, Id's, and Classes
• The HTML Document Tree
• CSS Selectors
• CSS Inheritance, Cascade, and Specificity
• CSS Reset

Exercise Files for Class

• CSS Concepts files

Homework

Reading

Required Reading

Learning Web Design:

• Review page 245
• Read Chapter 13: pages 348-350: Section "Finally, External Style Sheets"
• Read Chapter 12:
  • pages 281-285: Section "A Few More Selector Types", stop at Exercise 12-5
  • pages 296-298: Section "Changing List Bullets and Numbers" to end of chapter
• Read Chapter 13:
  • pages 315-319: Start at "Playing with Opacity", stop at "Other Pseudo-Class Selectors"
  • pages 324-339: Start at "Background Images", stop at "Like A Rainbow (Gradients)"
    • There's a lot of information here. You can skim over the fine details. Just make sure you can use a basic CSS background image

Supplemental

Online:

• On browser developer tools
  • From Linkedin Learning. Log in with your Simmons account for full access (linkedinlearning.simmons.edu).
    • Browser Development Tools - CSS Essential Training 2
    • Debugging CSS - CSS Essential Training 2
  • Google Chrome Developer Tools: Get Started With Viewing And Changing CSS
• Read through the following sections from Selectutorial - CSS selectors
  • Rules: all pages

Exercises

Class Website

• Add the CSS Reset or the normalize.css to the site (on all pages except any demo pages)
• Update your stylesheet to fix your design after the reset

Recipe Book

Begin thinking about how you might want your final Recipe Book website to look. Pick out color schemes. Create your own name for the site and start working on a logo or logotype for the site. You may use Sketch, Photoshop, Illustrator or whatever else suits you. We still haven't learned how to arrange things on our page, but that's coming up soon, so get ready.

Make sure all pages follow the same general HTML format in regards to sectioning content (sections, articles, main, etc.) and headings. Use the Spicy Thai Kale Salad recipe we did in class as a guide.

Make sure to complete the following items if you haven't already:

• Add the CSS Reset or the normalize.css to all pages on the site
• Update your stylesheet to to fix your design after the reset
• Review any comments I made on your site and fix any errors
• 5 recipes and 2 tips
• All pages should contain semantic sectioning content (main, article, section, header, footer and nav as appropriate)
• All pages should validate
  • Press Ctrl+Shift+v in TextMate to validate the current page
• All pages should have a clear and consistent navigation system
• All pages should have consistent typography and colors

Blog Assignment

Read the following article from A List Apart about Style Tiles and review the Style Tile site

• A List Apart: Style Tiles and How They Work
• Style Tiles website
• Style Tile Example: The Washington Examiner
• Style Tile Example: Georgia gov

Use the Photoshop style tile template from the Style Tile website to create your own style tile for your Recipe Book

• Chose typefaces (no more than 3) from Google Fonts and use them in the template
• Chose a color scheme for the site
• Show what your headings will look like
• Show what your links will look like (make sure to include an example of the hover state)
• Add example photos
• Modify the template as needed

Save a version of your file as a jpg or png and link to it from your website.