CSS - Responsive Basics
Leon Noel
![](https://s3.amazonaws.com/media-p.slid.es/uploads/549074/images/7626184/Learn_with_Leon_v2__bonus_.png)
#100Devs
"If she don't love me What can I do?
Just put on my best pair of shoes
Because, oh, I'm me"
Agenda
-
Questions?
-
Learn - How To Network (Part 1)
-
Review - CSS Fundamentals
-
Review - Box Model
-
Review - Float 😱
-
Review - Three Simple LayoutsÂ
-
Learn - Responsive Basics
-
Learn - Flexbox 🎉
-
Homework - Flexbox Froggy + Movie
Questions
About last class or life
![](https://s3.amazonaws.com/media-p.slid.es/uploads/549074/images/7634660/how-dare.gif)
Checking In
![](https://media2.giphy.com/media/BmmfETghGOPrW/giphy.gif)
Like and Retweet the Tweet
!checkin
Friends?
![](https://media4.giphy.com/media/VduFvPwm3gfGO8duNN/giphy.gif)
Study Community Survey:
"I'm officially employed as a full-time software engineer... well, technically, the role is "consultant" and the position is "software engineer"! Â I started my journey in Leon's last cohort as a single mom, an unemployed real estate agent during the pandemic, with two awesome kids, a noisy little dog, and a BIG DREAM.
Those of you on the other side of 40: you can do this. Listen to everything Leon tells you to do and then just do it. Those of you with family obligations: just keep going... take needed breaks, find support where you can get it. Those of you with mental health profiles: I hear you loud and clear (GAD/SAD, unmedicated). Neurodiverse folx: my peeps we're all in it together and we've got this!
There are so many people who helped me keep going, I don't want to name names because I'm sure I'll forget super-important folx (I'm on a lunch break and have to do tons of stuff). But I mean this sincerely: I am eternally grateful for my cohort friends and our amazing, dedicated teacher @Leon."
CONGRATS! OCC (Jennifer)!
![](https://media0.giphy.com/media/o75ajIFH0QnQC3nCeD/giphy.gif)
Submitting Work
![](https://media3.giphy.com/media/26uf7rl7j6RVibDz2/giphy.gif)
None Today
Serious Money...
![](https://media2.giphy.com/media/xUPGGw7jxnwjk073sA/giphy.gif)
Thank you!
!unban
![](https://media2.giphy.com/media/EOfarA6ZUqzZu/giphy.gif)
You may appeal your ban by filling out this form: https://bit.ly/100devs-unban
Networking
![](https://media4.giphy.com/media/PnI2Lj854uGN68fPo5/giphy.gif)
3 Individuals Already In Tech
2 Coffee Chats
Stranger > Acquaintance > Friend > Referral > Coworker
![](https://media4.giphy.com/media/l1ughbsd9qXz2s9SE/giphy.gif)
How to talk good for folx who don't talk too good?
![](https://media1.giphy.com/media/x7IB0QWpg5MgE/giphy.gif)
How To Meet People
![](https://media4.giphy.com/media/uNx0YANtETDM6piXju/giphy.gif)
Events
Start on Meetup.com and then find local boards
Conferences
Google Interest + Conference or #100devs-events
(plenty are free or you can get a scholar/hard-ship)
Community Groups
![](https://media0.giphy.com/media/Vwl11uQ9Rp6EiJxVRo/giphy.gif)
Local is always better
Apps
![](https://media0.giphy.com/media/VGbSh9YikbINz3jh7d/giphy.gif)
Lunchclub
Bumble Bizz
Friends & Family
![](https://media4.giphy.com/media/YTDZakyAorkLDYqN0q/giphy.gif)
Meet > Email > LinkedIn > Twitter
Next Day
Day 3
Day 6
Normal Follow Up
![](https://media1.giphy.com/media/3o751UlMjHZKbNJ0be/giphy.gif)
Email Follow Up 1 > Email Follow Up 2 > Last Email
1 Week
2 Weeks
1 Month
Want A Coffee Chat?
![](https://media4.giphy.com/media/yx400dIdkwWdsCgWYp/giphy.gif)
USE THE SHEET!
![](https://media1.giphy.com/media/in6mnJNYjGKpq/giphy.gif)
Pro Moves
![](https://media4.giphy.com/media/8BQrUp5nJgIGnYUHBA/giphy.gif)
RSS Feed
Questions ?
Part 2 - Thursday w/ Examples
![](https://media3.giphy.com/media/PK4XAT9Ususco/giphy.gif)
TURN IT UP!
![](https://media4.giphy.com/media/3o6ozDe18rO1daw4Mg/giphy.gif)
The Golden Rule
SEPERATION OF CONCERNS
-
HTML = Content / Structure
-
CSS = Style
-
JS = Behavior / Interaction
CSS
Where does CSS go?
-
Inline
-
In the head
-
In a separate file
CSS BREAK DOWN
p{
color: red;
font-weight: bold;
}
What is this?
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
Selecting 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>
Selecting 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>
Selecting 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>
IDs & Classes
![](https://s3.amazonaws.com/media-p.slid.es/uploads/549074/images/7647416/specific.gif)
IDs
#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>
Classes
.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>
Specificity
![](https://s3.amazonaws.com/media-p.slid.es/uploads/549074/images/7647512/specificity.png)
#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>
Specificity
![](https://s3.amazonaws.com/media-p.slid.es/uploads/549074/images/7647512/specificity.png)
#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>
Specificity
![](https://s3.amazonaws.com/media-p.slid.es/uploads/549074/images/7647512/specificity.png)
#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>
The Box Model
![](https://s3.amazonaws.com/media-p.slid.es/uploads/549074/images/7653537/box-model.png)
Let's Code
The Box Model
![](https://s3.amazonaws.com/media-p.slid.es/uploads/549074/images/7626184/Learn_with_Leon_v2__bonus_.png)
Time For Some
Layouts
not that kind...
![](https://s3.amazonaws.com/media-p.slid.es/uploads/549074/images/7653556/layouts.gif)
🚨 Let's Talk About Floats 🚨
![](https://media.giphy.com/media/r0iSs6QBcoeic/giphy.gif)
Floats
![](https://s3.amazonaws.com/media-p.slid.es/uploads/549074/images/7653569/float-layout.png)
By css-tricks
Let's Code
Simple Layouts
![](https://s3.amazonaws.com/media-p.slid.es/uploads/549074/images/7626184/Learn_with_Leon_v2__bonus_.png)
Layout 1
![](https://s3.amazonaws.com/media-p.slid.es/uploads/549074/images/7653887/layout1.png)
Layout 2
![](https://s3.amazonaws.com/media-p.slid.es/uploads/549074/images/7653888/layout2.png)
Layout 3
![](https://s3.amazonaws.com/media-p.slid.es/uploads/549074/images/7653889/layout3.png)
Responsive Websites
![](https://media.giphy.com/media/xT0Gqn9yuw8hnPGn5K/source.gif)
Fixed Vs. Responsive
![](https://s3.amazonaws.com/media-p.slid.es/uploads/549074/images/7666469/Screen_Shot_2020-08-25_at_12.09.02_PM.png)
vs.
Â
Fluid
Elastic
Content Decisions
What makes a site responsive?
Fluid
Everything as a percentage
![](https://s3.amazonaws.com/media-p.slid.es/uploads/549074/images/7653887/layout1.png)
Elastic
EMs & REM
html{
font-size: 62.5%;
}
section{
font-size: 10px;
}
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
Content Decisions
![](https://s3.amazonaws.com/media-p.slid.es/uploads/549074/images/7673640/Screen_Shot_2020-08-27_at_1.32.23_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/549074/images/7673641/Screen_Shot_2020-08-27_at_1.32.47_PM.png)
How do we make content decisions?
Media QueriesÂ
@media screen and (max-width: 600px) {
h1 {
color: blue;
}
}
Let's Code
A Media Query
![](https://s3.amazonaws.com/media-p.slid.es/uploads/549074/images/7626184/Learn_with_Leon_v2__bonus_.png)
Important Addition To The Template
<meta name="viewport" content="width=device-width, initial-scale=1">
How can we make this responsive?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/549074/images/7653589/15minutes.png)
Minimum Of 3 Media Queries
Let's Code
Make It Responsive
![](https://s3.amazonaws.com/media-p.slid.es/uploads/549074/images/7626184/Learn_with_Leon_v2__bonus_.png)
The Magic Of Flexbox
![](https://media.giphy.com/media/12NUbkX6p4xOO4/source.gif)
A One-dimensional Layout Model
css-tricks.com: Complete Guide To Flexbox
Let's Code
A Flexbox Example
![](https://s3.amazonaws.com/media-p.slid.es/uploads/549074/images/7626184/Learn_with_Leon_v2__bonus_.png)
Test CS:GO Server
![](https://media2.giphy.com/media/giXg3XI9QDbVRXFI1L/giphy.gif)
24/7 Office
Homework
![](https://media.giphy.com/media/3oEjI5pYnV0zNvKzXa/source.gif)
#100Devs CSS - Responsive Basics (cohort 2)
By Leon Noel
#100Devs CSS - Responsive Basics (cohort 2)
Class 07 of our Free Web Dev Bootcamp for folx affected by the pandemic. Join live T/Th 6:30pm ET leonnoel.com/twitch and ask questions here: leonnoel.com/discord
- 7,476