1) Please download Class 07 Starter Code

2) Move the following into your homework directory:


3) The solution to last class's lab/hw is included:


Class #07


Page Layout: Lab


• Final Projects:

⇒ First deliverable due Monday, October 22nd

⇒ Two weeks away!

⇒ Project proposal/ideas

⇒ Wirefames if possible!


Final project review

Floats/clears review

Startup Matchmaker lab

Final Project

Final Project

• Culmination of all skills/technologies (and then some...)

• Five deliverables; due weekly starting next Monday, October 16th

• Watch out for scope creep!

• Student Gallery: http://gallery.ga.co/

Floats/Clears Review

Floats: Review

• Enable advanced layout by altering a block element's "flow"

• Three rules:

1) Floated elements should be assigned a width

2) Floated elements will shift left or right, until:

⇒ They reach the side of their parent

⇒ They encounter another floating element

3) Floated elements need to be cleared


Clears: Review

• How we "handle" floating elements

• Various approaches to clearing elements:

clear CSS property

overflow: auto;

clearfix class

• The hard part is knowing which to use!

Startup Matchmaker Lab

• Open startup-matchmaker in SublimeText

• Build what you see in spec.png

• Styling help can be found in readme.txt

• Will have to research the following CSS properties:


border-radius (rounded corners)

rgba color values (used for opacity)

Font Awesome

Font Awesome

Font Awesome provides a set of free (paid) icons

• Easy to use; add the following to your <head>:

  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">

• Add icons in HTML:

	<i class="fas fa-heart"></i>
On Deck: #16 - Responsive Web Design

box-sizing: border-box

• Responsive Web Design Overview

• Fluid Layout

• Media Queries

Exit Tickets!