front end web development

Brett Haymaker, JavaScript Consultant & GA Instructor

FEWD 17

HTML Tags & CSS Selectors Review: PART 2

Warm-up Activity: 30 mins

Part 1 - 10 minutes

1. visit www.egwineco.com
2. Inspect the page using Chrome's Developer Tools
3. Identify 4-5 elements or style rules that you have never seen before

Part 2 - 10 minutes

1. Research each item that you jotted down
2. Your query should contain: the element or selector you are looking up, the language it uses, and "mdn"
3. For example: "box-sizing css mdn"

Part 3 - 10 minutes

1. Everyone share at least 1 thing they discovered

Learning Objectives:

• Apply and explain CSS “cascade” including: importance, specificity and inheritance.

• Describe the DOM and draw simple DOM tree.

• Predict image paths and apply relative paths to <img> and <a> tags.

• Experiment with margin and border

CSS from 27,000 Feet

• The "Cascade"
• Specificity
• Types of selectors:
  • elements
    • h1, p, header, div
  • class selectors
    • .button, .call-to-action
  • ID
    • #mobileNav
• Chaining selectors

LET's BUILD TOGETHER...

: : CLASS recap : :

Learning Objectives:

• Apply and explain CSS “cascade” including: importance, specificity and inheritance.

• Describe the DOM and draw simple DOM tree.

• Predict image paths and apply relative paths to <img> and <a> tags.

• Experiment with margin and border

EXIT TICKET