Slide 1 of 52
CSS - Responsive Review
Leon Noel
The cost of pokemon cards is too damn high!
#100Devs
Slide 2 of 52Agenda
- Questions?
- Review - How To Network
- Review - CSS Basics
- Review - CSS Layout
- Learn - Responsive Basics
- Build - Responsive Website
- Homework - Layouts
Slide 3 of 52
Questions
About last class or life
Slide 4 of 52Checking In
Like and Retweet the Tweet
!checkin
Slide 5 of 52Friends?
Slide 6 of 52Submitting Work
Slide 7 of 52Networking
3 Individuals Already In Tech
2 Coffee Chats
Slide 8 of 52Stranger > Acquaintance > Friend > Referral > Coworker
Slide 9 of 52Meet > Email > LinkedIn > Twitter
Next Day
Day 3
Day 6
Normal Follow Up
Slide 10 of 52
Hi Leon,
It was a pleasure meeting you last night! The event was so well done and it was exciting meeting such an amazing group of people - I hope you are enjoying a well deserved break after pulling it all together!
Also, I don't know if you saw this yet, but someone just bought a $375k first edition pokemon booster box and it wound up being fake! The Gaurdian covered it and I remember you mentioned being a big fan. Hope you have a great rest of the week!
Cheers,
Bob
Slide 11 of 52Email Follow Up 1 > Email Follow Up 2 > Last Email
1 Week
2 Weeks
1 Month
Want A Coffee Chat?
Slide 12 of 52
Hi Leon,
It was a pleasure meeting you last night! The event was so well done and it was exciting meeting such an amazing group of people - I hope you are enjoying a well deserved break after pulling it all together!
As I mentioned last night, I'm just starting my engineering career and would love to learn from successful people such as yourself. Please let me know if there might be a time you are free to grab a virtual coffee over the next week or two. Before 9am or after 5pm tends to work best for me, but happy to accommodate what works for you. Thanks!
Also, I don't know if you saw this yet, but someone just bought a $375k first edition pokemon booster box and it wound up being fake! The Gaurdian covered it and I remember you mentioned being a big fan. Have a great rest of the week!
Cheers,
Bob
Slide 14 of 52Questions ?
Slide 15 of 52Just because...
Slide 16 of 52The Golden Rule
SEPERATION OF CONCERNS
- HTML = Content / Structure
- CSS = Style
- JS = Behavior / Interaction
Slide 17 of 52Progressive Enhancement
According to the United States Department of Commerce, about 22 million Americans--roughly 35% of the nation's rural residents--lack access to broadband.
(2017)
https://1mb.club
Slide 18 of 52
CSS
Where does CSS go?
- Inline
- In the head
- In a separate file
Slide 19 of 52CSS BREAK DOWN
p{
color: red;
font-weight: bold;
}
What is this?
Slide 20 of 52
p{
color: red;
font-weight: bold;
}
p{
color: blue;
}
CSS is read top to bottom
What comes below, can override what came above
This is called the Cascade
Slide 21 of 52Selecting By Relationship
section > p {
color: red;
}
To select an element that is the direct descendent of another element use
parent > child
<section>
<p>Hello, Twitch!</p>
</section>
Slide 22 of 52Selecting By Relationship
section p {
color: red;
}
To select an element that is inside of another element without being directly descended use parent element
parent child
<section>
<article>
<p>Hello, Twitch!</p>
</article>
</section>
Slide 23 of 52Selecting By Relationship
p + p {
color: red;
}
To select an element that is the next sibling use
previous sibling + next sibling
<section>
<p>Hello, Twitch!</p>
<p>Hello, Youtube!</p>
</section>
Slide 24 of 52IDs & Classes
Slide 25 of 52IDs
#zebra {
color: red;
}
IDs are used for selecting distinct elements
Only one id with the same value per document
#idName
<section>
<p>Hello, Twitch!</p>
<p id="zebra">Hello, Youtube!</p>
</section>
Slide 26 of 52Classes
.bob {
color: red;
}
Classes are for selecting multiple elements
Multiple with same value allowed per document
.className
<section>
<p class="robot">Hello, Twitch!</p>
<p id="zebra" class="bob">Hello, Youtube!</p>
<p class="bob">Goodbye, Mixer!</p>
</section>
Slide 27 of 52Specificity
#pizza p span.gone {
color: red;
}
<section id="pizza">
<p class="jumanjiOriginalMovie">Hello, Twitch!</p>
<p id="car" class="hello">Hello, Youtube!</p>
<p>Goodbye, <span class="gone">Mixer!</span></p>
</section>
Slide 28 of 52Specificity
#dietCoke p.robot.unicorn + .bob {
color: red;
}
<section id="dietCoke">
<p class="robot unicorn">Hello, Twitch!</p>
<p id="zebra" class="bob dominosPizza">Hello, Youtube!</p>
<p class="bob">Goodbye, Mixer!</p>
</section>
Slide 29 of 52Specificity
#dietCoke > .robot + .dominosPizza + .bob {
color: red !important;
}
<section id="dietCoke">
<p class="robot unicorn">Hello, Twitch!</p>
<p id="zebra" class="bob dominosPizza">Hello, Youtube!</p>
<p class="bob">Goodbye, Mixer!</p>
</section>
Slide 31 of 52Let's Code
The Box Model
Slide 32 of 52
Time For Some
Layouts
not that kind...
Slide 33 of 52🚨 Let's Talk About Floats 🚨
Slide 35 of 52🚨 WARNING 🚨
Slide 36 of 52Let's Write BADD CODE
Real Layouts
Slide 37 of 52Layout 1
Slide 38 of 52Layout 2
Slide 39 of 52Layout 3
Slide 40 of 52Responsive Websites
Slide 42 of 52
Fluid
Elastic
Content Decisions
What makes a site responsive?
Slide 43 of 52
Fluid
Everything as a percentage
Slide 44 of 52
Elastic
EMs & REM
html{
font-size: 62.5%;
}
section{
font-size: 20px;
}
p{
font-size: 1em
}
vs.
p{
font-size: 1rem;
}
<section>
<p>Spam dominos in chat</p>
</section>
Font size of the parent, in the case of typographical properties like font-size, and font size of the element itself, in the case of other properties like width.
- mdn
Slide 45 of 52Content Decisions
Slide 46 of 52How do we make content decisions?
Slide 47 of 52Media Queries
@media screen and (max-width: 600px) {
h1 {
color: blue;
}
}
Slide 48 of 52Let's Code
A Media Query
Slide 49 of 52Important Addition To The Template
<meta name="viewport" content="width=device-width, initial-scale=1">
Slide 50 of 52How can we make this responsive?
Slide 51 of 52Let's Code
Make It Responsive
Slide 52 of 52Homework
Do: Code Homework Layout Photos - HTML & CSS
Read: Go Deep On Things That Don't Make Sense
