HELLO

1) Please download Class 07 Starter Code

2) Move the following into your homework directory:

• startup-matchmaker

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

• fashion-blog-part2-solution

Class #07

10/08/2018

Page Layout: Lab

Annoucements

• Final Projects:

⇒ First deliverable due Monday, October 22nd

⇒ Two weeks away!

⇒ Project proposal/ideas

⇒ Wirefames if possible!

Agenda

• Final project review

• Floats/clears review

• Startup Matchmaker lab

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/

⇒ Trippy Dog

⇒ Find That Country

⇒ Erlyn

⇒ Disrupticon

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

• Example

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:

⇒ background-position

⇒ border-radius (rounded corners)

⇒ rgba color values (used for opacity)

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