Slide 1 of 72CSS - Thunderdome
Leon Noel
Who's going to carry the boats and the logs?
#100Devs
Slide 2 of 72Agenda
- Questions?
- Review - How To Network
- Review - CSS Basics
- Review - CSS Layout
- Learn - Responsive Basics
- Build - Responsive Website
- Homework - Layouts
Slide 3 of 72
Questions
About last class or life
Slide 4 of 72!newsletter
Slide 5 of 72Trough Of Sorrow
Slide 6 of 72
Manage Frustration
Consistency
Taking Care Of Yourself
Slide 7 of 72Submitting Work
I DON'T WANT IT
Make It Better
Slide 8 of 72Networking
3 Individuals Already In Tech
2 Coffee Chats
Slide 9 of 72Stranger > Acquaintance > Friend > Referral > Coworker
Slide 10 of 72Meet > Email > LinkedIn > Twitter
Next Day
Day 3
Day 6
Normal Follow Up
Slide 11 of 72
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 12 of 72Email Follow Up 1 > Email Follow Up 2 > Last Email
1 Week
2 Weeks
1 Month
Want A Coffee Chat?
Slide 13 of 72
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 15 of 72Coding Challenges
Daily - Starting Next Week
Slide 16 of 72Paid Client
Due by Mar. 29th
Slide 17 of 72Homework
Slide 18 of 72Layout 1
Slide 19 of 72Layout 2
Slide 20 of 72Layout 3
Slide 21 of 72Layout 4
Slide 26 of 72Watch:
Independence Day
Slide 27 of 72Shit Just GOT REAL
Slide 28 of 72You can't read someone else's book about some theory on how to do shit...
Slide 29 of 72Those that want to be a seal will be a seal
Slide 30 of 72You have to go into those dark chambers that we often shut off and you gotta open them up and fight that fucking demon - get in there talk to that mother fucker and say what's up
Slide 31 of 72
Weeding out the 'weak' to bring the strong together....
*STRONG DISCLAIMER*
Slide 32 of 72Never saw someone carry a boat or log by themselves
Slide 33 of 72Who's gonna carry the boats and the logs
Slide 34 of 72Just because...
Slide 35 of 72The Golden Rule
SEPERATION OF CONCERNS
- HTML = Content / Structure
- CSS = Style
- JS = Behavior / Interaction
Slide 36 of 72Progressive 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 37 of 72
CSS
Where does CSS go?
- Inline
- In the head
- In a separate file
Slide 38 of 72CSS BREAK DOWN
p{
color: red;
font-weight: bold;
}
What is this?
Slide 39 of 72
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 40 of 72Selecting 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 41 of 72Selecting 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 42 of 72Selecting 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 43 of 72IDs & Classes
Slide 44 of 72IDs
#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 45 of 72Classes
.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 46 of 72Specificity
#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 47 of 72Specificity
#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 48 of 72Specificity
#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 50 of 72
Time For Some
Layouts
not that kind...
Slide 51 of 72🚨 Let's Talk About Floats 🚨
Slide 53 of 72Let's Talk
How to approach Layouts
Slide 54 of 72🚨 WARNING 🚨
Slide 55 of 72Layout 1
Slide 56 of 72Layout 2
Slide 57 of 72Layout 3
Slide 58 of 72Layout 4
Slide 63 of 72Watch:
Independence Day
Slide 64 of 72Responsive Websites
Slide 66 of 72
Fluid
Elastic
Content Decisions
What makes a site responsive?
Slide 67 of 72
Fluid
Everything as a percentage
Slide 68 of 72
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 69 of 72Content Decisions
Slide 70 of 72How do we make content decisions?
Slide 71 of 72Media Queries
@media screen and (max-width: 600px) {
h1 {
color: blue;
}
}
Slide 72 of 72Dig Deep, Fight The Suck, Carry The FUCKING Logs
I believe in you
