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
- visit www.egwineco.com
- Inspect the page using Chrome's Developer Tools
- Identify 4-5 elements or style rules that you have never seen before
Part 2 - 10 minutes
- Research each item that you jotted down
- Your query should contain: the element or selector you are looking up, the language it uses, and "mdn"
- For example: "box-sizing css mdn"
Part 3 - 10 minutes
- 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
- elements
- 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
- 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:
- Create a project folder
- Utilize Sublime to create our project files
- Leverage Sublime packages to create some HTML
- 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 name: FEWD 14
URL will be Slacked out.
HTML / CSS -2
By Brett Haymaker
HTML / CSS -2
Week 1 Lesson 2
- 47