#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

Skip to first slide
Slide 1 of 63

CSS - Responsive Basics

Leon Noel

#100Devs

"If she don't love me What can I do?
Just put on my best pair of shoes
Because, oh, I'm me"

Slide 2 of 63

Agenda

Slide 3 of 63

Questions

About last class or life

Slide 4 of 63

Checking In

Like and Retweet the Tweet

!checkin

Slide 5 of 63

Friends?

Study Community Survey:

https://forms.gle/5qvnYVw3tA3Xaoye8

Slide 6 of 63

"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://discord.com/channels/735923219315425401/735936014832369687/938128809373339728

Slide 7 of 63

Submitting Work

None Today


Slide 8 of 63

Serious Money...

Thank you!

Slide 9 of 63

!unban

You may appeal your ban by filling out this form: https://bit.ly/100devs-unban

Slide 10 of 63

Networking

3 Individuals Already In Tech

2 Coffee Chats

Slide 11 of 63

Stranger > Acquaintance > Friend > Referral > Coworker

Slide 12 of 63

How to talk good for folx who don't talk too good?

"How to win friends and influence people"

Slide 13 of 63

How To Meet People

Slide 14 of 63

Events

Start on Meetup.com and then find local boards

Slide 15 of 63

Conferences

Google Interest + Conference or #100devs-events

(plenty are free or you can get a scholar/hard-ship)

Slide 16 of 63

Community Groups

Local is always better

Slide 17 of 63

Apps

Lunchclub

Bumble Bizz

Slide 18 of 63

Friends & Family

Slide 19 of 63

Meet > Email > LinkedIn > Twitter

Next Day

Day 3

Day 6

Normal Follow Up

Slide 20 of 63

Email Follow Up 1 > Email Follow Up 2 > Last Email

1 Week

2 Weeks

1 Month

Want A Coffee Chat?

Slide 21 of 63

USE THE SHEET!

Networking Google Sheet

Slide 22 of 63

Pro Moves

https://www.google.com/alerts

RSS Feed

Slide 23 of 63

Questions ?
Part 2 - Thursday w/ Examples

Slide 24 of 63

TURN IT UP!

Slide 25 of 63

The Golden Rule

SEPERATION OF CONCERNS

Slide 26 of 63

CSS

Where does CSS go?

Slide 27 of 63

CSS BREAK DOWN

p{
  color: red;
  font-weight: bold;
}

What is this?

Slide 28 of 63 
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 29 of 63

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>
Slide 30 of 63

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>
Slide 31 of 63

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>
Slide 32 of 63

IDs & Classes

Slide 33 of 63

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>
Slide 34 of 63

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>
Slide 35 of 63

Specificity

#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 36 of 63

Specificity

#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 37 of 63

Specificity

#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 38 of 63

The Box Model

By Matthias Apsel

Slide 39 of 63

Let's Code

The Box Model

Slide 40 of 63

Time For Some

Layouts

not that kind...

Slide 41 of 63

🚨 Let's Talk About Floats 🚨

Slide 42 of 63

Floats

By css-tricks

Slide 43 of 63

Let's Code

Simple Layouts

Slide 44 of 63

Layout 1

Slide 45 of 63

Layout 2

Slide 46 of 63

Layout 3

Slide 47 of 63

Responsive Websites

Slide 48 of 63

Fixed Vs. Responsive

UPS.com Wayback Machine

Boston.com

vs.

Slide 49 of 63

 

Fluid

Elastic

Content Decisions

What makes a site responsive?

Slide 50 of 63

Fluid

Everything as a percentage

Slide 51 of 63

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

Slide 52 of 63

Content Decisions

Slide 53 of 63

How do we make content decisions?

Slide 54 of 63

Media Queries 

@media screen and (max-width: 600px) {
    h1 {
        color: blue;
    }
}
Slide 55 of 63

Let's Code

A Media Query

Slide 56 of 63

Important Addition To The Template


<meta name="viewport" content="width=device-width, initial-scale=1">
Slide 57 of 63

How can we make this responsive?

Minimum Of 3 Media Queries

Slide 58 of 63

Let's Code

Make It Responsive

Slide 59 of 63

The Magic Of Flexbox

Slide 60 of 63

A One-dimensional Layout Model

css-tricks.com: Complete Guide To Flexbox

Slide 61 of 63

Let's Code

A Flexbox Example

Slide 62 of 63

Test CS:GO Server

24/7 Office

Slide 63 of 63

Homework

Do: Responsive Layout

Read: The Complete Guide To Flexbox   

Do: http://flexboxfroggy.com/

Watch: Independence Day