title: how do I put jquery in a separate file?
body: <p>I've been googling for the past hour or so but can't seem to figure out a solution to this problem. I just finished jQuery course from codecademy, and am now working on a project. For some reason my code jquery code will not work</p>
  
  <p>jQuery:  </p>
  
  <pre><code>$(document).ready(function(){
  $("div").css("border", "3px solid red");
  $(".storyblocks").mouseenter(function(){
      $(this).animate({
          height: "+= 20px"
          width: "+= 20px"
      });
  });
  
  $(".storyblocks").mouseleave(function(){
      $(this).animate({
          height: "-= 20px"
          width: "-= 20px"
      });
  });
  }); 
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Project Website&lt;/title&gt;
  &lt;link type = "text/css" rel = "stylesheet" href = "stylesheet.css"/&gt;
  &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="script.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  </code></pre>
  
  <p>I added the <code>$("div").css("border", "3px solid red");</code> to check if divs have red border, and so far no luck. Some say that I don't need $(document).ready, but I don't understand why not. </p>
  
  <p>Please help? </p>