overthemike

<div class="media comment">
  <div class="img"></div>
  <div class="content "></div>
</div>
<div class="media product featured">
  <div class="img"></div>
  <div class="content"></div>
</div>

overthemike

<div class="comment">
  <div class="comment__img"></div>
  <div class="comment__content "></div>
</div>
<div class="product product--featured">
  <div class="product__img"></div>
  <div class="product__content"></div>
</div>

overthemike

sass examples:
http://sassmeister.com/gist/0694893ba091121cb482
http://sassmeister.com/gist/f58be57b5f23fab6a1f6
http://sass-lang.com/documentation/Sass/Script/Functions.html

specificity wars:
https://stuffandnonsense.co.uk/archives/images/specificitywars-05v2.jpg
http://i.imgur.com/D2RzCKa.jpg

fun links:

overthemike

;(function(){
  window.myObject = {
  	sayHello: function () {
  	  console.log('Hello world');
  	}
  }

  myObject.sayHello();
}());

overthemike

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  .
  .
  .
  <li>Item 10,000</li>
</ul>

Given the above, write some code that would console.log the list item's innerHTML when any of the list items are clicked.

overthemike

<ul id="foo">
  <li>Item 1</li>
  <li>Item 2</li>
  .
  .
  .
  <li>Item 10,000</li>
</ul>

Given the above, write some code that would console.log a list item's contents when any of them are clicked.

overthemike

;(function(){
  window.myObject.prototype = {
  	sayHello: function () {
  	  console.log('Hello world');
  	}
  }

  myObject.sayHello();
}());

overthemike

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  .
  .
  .
  <li>Item 10,000</li>
</ul>

Given the above, write some code that would console.log the list item's innerHTML when any of the list items is clicked.

overthemike

Javascript - reference https://developer.mozilla.org/en/JavaScript/Reference
  Comments
  Variables
    - can store any value
  Types
    Number
    String
    Boolean
    Object
    Null

overthemike

CSS
  Css is for presentation
  External vs Internal vs Inline
  Selectors (css2) - http://www.w3.org/TR/CSS2/selector.html
    Universal: *
    Type: body
    Descendant: body div
    Child: body > div
    Class: .myclass
    ID: #myId