kellishouts

1.  Finish "Out of this World" markup.

2.  Styles
    Create a directory called /stylesheets
    In your /stylesheets directory, create a stylesheet called styles.css
    In your index.html, link to your styles.css.
    
    Style the layout (do not touch the markup[HTML]).
    
    

kellishouts

<h1>Fastenate</h1>

<ul>
  <li>Study the EASYMODE Layouts provided. Be sure you are viewing them at Actual Size.</li>
  <li>Start up a server for your project.</li>
  <li>Write the Markup for the layout in index.html. unformatted_text.txt has been provided for you so you don't have to type it in.</li>
  <li>Create an external stylesheet in the styles directory. Link to the stylesheet in your index.html</li>
  <li>Add a CSS Reset and CSS Clearfix to your styles.</li>
  <li>Import the Google fonts used in the layout:
  <br /><b>Oswald Regular, Lato Regular</b></li>

kellishouts

// d. Media Query Ranges
// - - - - - - - - - - - - - - - - - - - - - - - - -

$small-range: (0em, 40em);
$medium-range: (40.063em, 64em);
$large-range: (64.063em, 90em);
$xlarge-range: (90.063em, 120em);
$xxlarge-range: (120.063em, 99999999em);

$screen: "only screen";

kellishouts

@import "http://fonts.googleapis.com/css?family=Lato:400,700.css";
@import "partials/settings";
@import "../public/bower_components/foundation/scss/foundation.scss";
$break-small: 480px;
$break-medium:768px;
$flappy-dark-grey:#2B2D33;
$flappy-blue:#00CCCC;

body{
  background-color:$flappy-dark-grey;

kellishouts

// Your markup may be different. The following styles only apply for this markup snippet:

//   <header id="page_header">
//     <div class="row">
//       <div class="large-6 medium-3 small-12 columns">
//         <div class="title">
//           <h1>
//             <span class="flappy">flappy</span>
//             <span class="app">app</span>
//           </h1>

kellishouts

// Requires a custom media query $medium-down
// Uses the following markup:

// <nav class="top-bar" data-topbar role="navigation">
//   <ul class="title-area">
//     <li class="name">
//       <a href="#" class="clearfix">
//         <div class="logo_image"></div>
//         <h1>
//           <span id="flappy">Flappy</span> 

kellishouts

Starting up a project with /app/public for final output files AND using Foundation

---

In your project root

Copy over relevant assets into a ./Layouts directory.

Make this file to ignore installable components.
.gitignore

kellishouts

Code is not Math

Equality is Weird

• = does not mean “equals” it means “set a value”
• == means “equal”
• === also means “equal”

Programmers start counting at 0

• var potatoes = [0, 1, 2, 3, 4, 5]

kellishouts

Closure

a closure is the local variables for a function - kept alive after the function has returned

a closure is a stack-frame which is not deallocated when the function returns



// scope
function outer_scope() {

kellishouts

//callbacks
var counter = 0;
var english = ["zero","one","two","three"];

function increase( cb ){
  
  counter = counter + 1;
  
  var counter_in_english = english[counter];