title: Javascript not loading? Newbie here
body: <p>When I open the html file in a browser the javascript doesn't work, I can't figure out why? The exact same code works in the codecademy prompts, but not when I launch it from files on my desktop.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;html&gt;
        &lt;head&gt;
          &lt;link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"&gt;
          &lt;link href='http://fonts.googleapis.com/css?family=Open+Sans:400;300' rel='stylesheet' type='text/css'&gt;
          &lt;link href='style.css' rel='stylesheet'&gt;
  
    &lt;/head&gt;
    &lt;body&gt;
  
      &lt;div class="menu"&gt;
  
        &lt;!-- Menu icon --&gt;
        &lt;div class="icon-close"&gt;
          &lt;img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/close.png"&gt;
        &lt;/div&gt;
  
        &lt;!-- Menu --&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Blog&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Help&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
  
      &lt;!-- Main body --&gt;
      &lt;div class="jumbotron"&gt;
  
        &lt;div class="icon-menu"&gt;
          &lt;i class="fa fa-bars"&gt;&lt;/i&gt;
          Menu
        &lt;/div&gt;
  
      &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="app.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>/* Initial body */
  body {
    left: 0;
    margin: 0;
    overflow: hidden;
    position: relative;
  }
  
  /* Initial menu */
  .menu {
    background: #202024 url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/black-thread.png') repeat left top;
    left: -285px;  /* start off behind the scenes */
    height: 100%;
    position: fixed;
    width: 285px;
  }
  
  /* Basic styling */
  
  .jumbotron {
    background-image: url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/bg.png'); 
    height: 100%;
    -webkit-background-size: cover;
       -moz-background-size: cover;
         -o-background-size: cover;
            background-size: cover;
  }
  
  .menu ul {
    border-top: 1px solid #636366;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  
  .menu li {
    border-bottom: 1px solid #636366;
    font-family: 'Open Sans', sans-serif;
    line-height: 45px;
    padding-bottom: 3px;
    padding-left: 20px;
    padding-top: 3px;
  }
  
  .menu a {
    color: #fff;
    font-size: 15px;
    text-decoration: none;
    text-transform: uppercase;
  }
  
  .icon-close {
    cursor: pointer;
    padding-left: 10px;
    padding-top: 10px;
  }
  
  .icon-menu {
    color: #fff;
    cursor: pointer;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    padding-bottom: 25px;
    padding-left: 25px;
    padding-top: 25px;
    text-decoration: none;
    text-transform: uppercase;
  }
  
  .icon-menu i {
    margin-right: 5px;
  }
  </code></pre>
  
  <p>Javascript</p>
  
  <pre><code>var main = function() {
    /* Push the body and the nav over by 285px over */
    $('.icon-menu').click(function() {
      $('.menu').animate({
        left: "0px"
      }, 200);
  
      $('body').animate({
        left: "285px"
      }, 200);
    });
  
    /* Then push them back */
    $('.icon-close').click(function() {
      $('.menu').animate({
        left: "-285px"
      }, 200);
  
      $('body').animate({
        left: "0px"
      }, 200);
    });
  };
  
  
  $(document).ready(main);
  </code></pre>