In this screencast I cover the absolute bare minimum setup for utilizing jQuery on a "real" website. We have an index.html file with the basic HTML5 structure stubbed out. jQuery is included as a <script> and then we perform a super simple jQuery task. The entire file looks like this:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Learning jQuery</title>
</head>
<body>
  
  <h1>Hello, World!</h1>

  <script src="js/jquery-2.0.3.js"></script>
  <script>
    $("h1").css("color", "red");
  </script>

</body>
</html>

I wanted to cover that right away so that you can experience how easy using jQuery can be. And also because we'll be using CodePen for a lot of live coding for the rest of the series. CodePen just gives us a testing / demonstration environment that is easy to work with and great for screencasts. What it is doing behind the scenes is essentially the same as what we just did here. I wanted that to be understood - so you don't think using CodePen is some strange/magical place that is different from how you would write code.

The same exact thing as we did with the index.html file is like this on CodePen:

See the Pen 7e6827079ef62ec19ed37ea763ef79a1 by Chris Coyier (@chriscoyier) on CodePen

Files

Comments

  1. User Avatar
    Rachel H
    Permalink to comment#

    This is awesome, thank you for posting this course!

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-closeicon-emailicon-linkicon-logo-staricon-menuicon-searchicon-staricon-tag