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:
- https://routeshuffle.com/ – A 16-year-old created this useful site that helps runners and walkers find new routes!
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:
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.