30 Days to learn jQuery – Day 1

Day 1

So here is my first post in a series chronicling my process of learning jQuery.

I am using a series of video tutorials from Tuts+, the series is called ’30 Days to Learn jQuery‘ by Jeffrey Way.

I am a visual learner, that is just a fact I have come to recognize about myself, I have to either see or do something to understand it and both will always amplify my chances of retaining what I am learning.

So these blog posts may be redundant if you are going to watch the video series, but guess what? They are more for me anyway! If you get something out of reading and following along that would be awesome, as I do enjoy passing along skills to others, and anything that improves your skills(or mine) will hopefully better the web and thats the point of it all.

Confession time…

For over a year now I have been using it, but I have always seen it as some mystical code snippets that I should never modify or the magic dust might get contaminated. I am a jQuery ‘paster’ and that probably makes real jQuery coders view me as I used to view people back in the Myspace days when they copied and pasted “myspace codes” (HTML and CSS) to change the theme of their page, and wondered why it broke when they combined 50 of them that conflicted.  I knew HTML and CSS then, and would laugh at the ridiculous combinations and multiple styles trying to modify the same elements of the page. Thats one major reason I want to dive in and learn jQuery, because I feel ignorant, and I am (when it comes to this subject).

I won’t try to teach a complete beginner here, instead check out Jeffrey Way’s lessons, they are free and awesome, what I will do is post what I learned, no matter how basic from each lesson, so it might be a recap for you, or it might help more to reinforce what you are learning. Either way, here we go lesson one!


jQuery min is for production, meaning I will use this file when the site is complete, and ready to go live, that way it loads faster for the users, and good UX is important.

Production – Compressed, Development – Comments and spacing

The ‘$’ in jQuery code just calls jQuery to do something, its like saying, “hey jQuery do this:” shorthand

What is the DOM? Document Object Model, a representation of your page

recommends sublime text 2 as editor

load jQuery at bottom so it appears to user to have already loaded the page before it loads jQuery

Chrome dev tools shortcut: cmd + opt+ i


Use Google’s CDN because it is more likely to already be cached on a user’s system, reducing load times.