oreo turkeys

Class Friday, November 22, 2019

 Today’s Goals:

  • Finish Thanksgiving webpage challenge
  • Take a quiz about the box model
  • New CSS: position properties and z-index
  • Play a CSS selector game!
  • Coming up: Review Thanksgiving answer code and box model quiz

 Today’s featured website:

 CSS Stats from Around the Web

From The Web Almanac :

  • Most popular color types: RGBA and Hex
  • Top color….white! Then black, then red, then blue, then everything else.
  • Distribution of colors per page just for text: 131-140!
  • Most popular unit types: px and em
  • Most popular selectors per page: #ID and .class (and then .class is far more popular than #ID on a style sheet- however, classes can be used multiple times and IDs how many times?)
  • Usage of flexbox layout (we will learn later): around half
  • Usage of grid layout (we will learn later): around only 2%! Both flexbox and grid layout are GREAT for mobile and responsive websites.
  • Median number of web fonts per page: 3
  • Most popular font families (many are Google Fonts): Open Sans, Roboto
  • Median number of font sizes: 40!
  • Average amount of margin-spacing code: 100!
  • Percentage of sites using the filter property (we will learn later): 78%
  • Median number of style sheets used per page: 6
  • Most popular CSS libraries: Bootstrap and animate.css (also learning both later)

 Thanksgiving Webpage Project

You are going to make this:

oreo turkey webpage

You will take broken code and follow the directions in the comments. Copy and paste the following code into a new Notepad++ file. Save it as thanksgiving.html.

  • What you’re practicing:
    Box model properties (margin, border, padding)
    Applying the CSS ID selector
    Applying the CSS class selector
    Using div tags with ID and class attributes
    Setting up a page wrapper that’s centered in the browser window
    Opacity property
    Line-height property
    Text-shadow property
    Box-shadow property (similar to text-shadow but gives non-text content a shadow- really the invisible “box” in the box model gets a shadow)

  • Starter code:
    Thanksgiving starter code 

 CSS Box Model Quiz

 New- Positioning and Z-Index

  • We are going to start learning about CSS positioning, which is just one of many different ways to lay out content on your webpage.
  • Read this: When you’re done with the Box Model Quiz, please read this page  and look at the examples for CSS positioning and z-index.

 CSS Diner Game

  • Do your best to identify the selectors (selector SELECT the content you want to style with CSS) in the CSS Diner Game . You might find the CSS Vocabulary site  helpful to review the different selectors. Some of these selectors you already know (type, ID, and class) and some are new.