jQuery

jQuery is a framework based on Javascript. Think of the relationship like this:

jQuery is to Javascript
as
SASS is to CSS

Front-end developers use jQuery and Javascript to add interactive functionality to a site – showing a pop-up, using accordions, etc. jQuery can save you a lot of time when you are coding interactive elements.

In this lesson, you’ll get comfortable with the basic structure of jQuery. By the end of the lesson, you will be implementing jQuery in your class website and another website.

  1. Take this interactive course on codeacademy.com. Codeacademy is free – sign up on it so that you can come back to your lesson at a later point in time if needed.
  2. Take the lynda.com course on jQuery Essentials
  3. Resources:
    • jQuery has a whole site dedicated to learning it – learn.jquery.com
    • As always, if you have a question you can usually find the answer on stackoverflow

NOTE: jQuery and Javascript are very different from HTML and CSS. Just like learning those languages, this one is entirely new as well. Don’t get too frustrated when your syntax is off, or you forget to close a bracket. As with any language, it takes time to learn it! Use all of your resources at hand – including your DevTools. DevTools is GREAT for debugging jQuery and Javascript issues.

jQuery Final Project

Part 1: Menus

If you have not done so already, add a responsive menu to your site using some jQuery. If you’re feeling adventurous, you can code it on your own based on what you’ve learned. Otherwise you can follow one of these guidelines:

  1. Flyout Nav
  2. Toggle Menu
  3. More menu options here

Don’t forget to include jQuery in your project or your menu won’t work!
Upload your site via FTP and submit a link in Blackboard.


Part 2: Other Functionality

Create or redesign a website from scratch. You may choose any site, and the site may also be a client site. The site must have at least 3 pages. You can implement any jQuery plugin you choose for the site (with the exception of no carousels/slideshows): a lightbox, scrollspy, masonry, or anything else you choose. Here are some suggestions:

Don’t forget to include jQuery in your project or your fancy plugin won’t work!
Upload your site (Business Website) via FTP and submit a link on Blackboard.