1) Please download Class 09 Starter Code

2) Solution to startup-matchmaker included

Class #09




• Final Projects:

⇒ First deliverable due Monday, October 22nd

⇒ One week away!

⇒ Project proposal/ideas

⇒ Wirefames if possible!

• We start JavaScript next week!


Responsive Review

Responsive Navbar



• In-class Final Project Work

Responsive Review

Responsive Review


• Designing the optimal viewing experience no matter the device

Static vs. Fluid Layouts:

• Using %-based widths, margins, etc. instead of px-based

Media Queries:

• CSS targeted at specific variables, like screen-size

• When width > 1000px color text red

Responsive Review: Media Queries

Within CSS Stylesheet:

	@media screen and (min-width: 1024px) {
	  ...styles here

Media Type: screen

Only target devices with a viewable screen

Rule: (mid-width: 1024px)

Only target windows larger than, or equal to, 1024px

Media Queries: Multiple Rules

• Multiple rules:

	@media (min-width: 320px) and (max-width: 480px) {

	@media (min-width: 480px) and (max-width: 760px) {

Responsive Review: Other Tools

• Set box-sizing: border-box;:

  * {
    box-sizing: border-box;

• Use calc() for help determining exact widths:

  div {
    width: calc(100% / 3)

Responsive Navbar

Responsive Navbar

1. Open the following CodePen

2. Use float's to render the desktop

3. Use media queries to render the mobile

4. Research display: none to hide/show icon

5. Approximate margin and padding values


Flexbox: Overview

• Page layout can be difficult/annoying/life-ruining

Flexbox is a CSS tool for easy 2D layouts

• Helps parent element "flex" childrens' sizes

• Parents can vertically/horizontally align children

Flexbox: Overview

• Two components: a flex container and its flex children

Flexbox: Overview

• The equivalent HTML:

	<div class="container">
	  <div class="child"></div>
	  <div class="child"></div>
	  <div class="child"></div>

<div class="container"> is the flex container

<div class="child">'s are the flex children

Flexbox: Overview

• Easy to use!

• Apply display: flex; to the flex container

• Container's immediate children are flex children

• The flex children will render inline (like floats)

Codepen example

Flexbox: Containers - Horizontal Alignment

justify-content horiztonally aligns the container's children:

flex-start (default): items align at the left

flex-end: items align at the right

center: items are centered

space-between: evenly distributed - aligned with conatiner's start/end

space-around: evenly distributed with equal space around them

Flexbox: Containers - Vertical Alignment

align-items vertically aligns the container's children:

flex-start: items aligned at the top of the container

flex-end: itemts aligned at the bottom of the container

center: items are centered

baseline: aligned along the baseline of their respective text

stretch (default): items stretch to fill their container

Flexbox Froggy

Codealong: Flexbox + Startup Matchmaker

1) Startup Matchmaker Nav

2) Startup Matchmaker Jumbotron

3) Startup Matchmaker CTA's

5 minute break

The Viewport

The Viewport

• Ever had to zoom to move around a mobile website?

• Mobile browsers render webpages in a window wider than the screen

The Viewport

The Viewport
The Viewport

• Esnure content is viewed at the width of the device

• ...not the viewport

  <meta name="viewport" content="width=device-width, initial-scale=1">

The Viewport

 <meta name="viewport" content="width=device-width, initial-scale=1">


⇒ Controls the size of the viewport; sets it to the device's width


⇒ Controls the zoom level

The Viewport

• Open your Startup Matchmaker with mobile dev tools

• Apply the <meta> tag

• Refresh!

• Ensure this tag is included on mobile

Final Project Work

On Deck: #10 - Responsive Capstone

• Relaxr Responsive Capstone

• ...or In-Class Final Project Work

Exit Tickets!