front end web development

Brett Haymaker, Web Developer @ c|change & instructor

FEWD 14

ATTENDANCE!

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 Setup a project together from Scratch...

But before we do that...

We are going to build a web page today

WHY DO WE USE SUBLIME?

Part 2

GET ON THE SAME PAGE: Install 'HTML SNIPPETS', 'HTML HEAD SNippets', 'Normalize Indentation'

LET's BUILD TOGETHER...

Ping-pong

  1. We'll build something together and introduce a new concept, then you'll get to practice building your page and experiment with what we are learning -- ping-ponging back and forth

Together, let's:

  1. Create a project folder
  2. Utilize Sublime to create our project files
  3. Leverage Sublime packages to create some HTML
  4. Style that element using our CSS selectors

We will be incorporating:

  • Images
    • How do we link to our images?
  • links
    • absolute
    • relative

Lab Time

Instructions will be Slacked out.

: : 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

Class Survey

Class name: FEWD 14

URL will be Slacked out.

Made with Slides.com