Skip to main content
Course image for jQuery Building Blocks

jQuery Building Blocks

Full Course

jQuery Building Blocks will teach you 5 easy techniques for adding interactivity to your web pages. By the end of the course, you’ll be able to add features and style to your web pages, from simple animations to complex dynamic content.

Course Preview

5 Ways To Cut Your Web Development Time In Half

In this practical introduction to the technology, students will learn how to use jQuery to create a variety of visual effects, how to add complex, fully-functional widgets (such as an image carousel) to a page, how to work with and customize jQuery plug-ins, how to handle “events,” and how to pull in data for use in a web page or application. In addition to learning these specific techniques, students will also walk away with a framework for figuring out how jQuery can help them solve any development challenges they might face.

Course Outline

  • Lesson 1: Welcome to jQuery

    This lesson outlines the course and gives a brief introduction to jQuery. Learn how jQuery fits into the context of web technologies and has evolved as a solution for adding interactivity to your pages in the least painful and most efficient way possible. This lesson provides an overview of the five projects covered in this course and introduces you to jQuery selector syntax, as well as how to use a browser console for interactive “sleuthing” of web page code.

  • Lesson 2: That Certain Sparkle

    Learn how the appropriate use of animation in web pages can benefit users through examples currently found on the web. To begin, you will learn the importance of jQuery’s .ready function and then move on to explore the use of jQuery’s .animate() method with its ability to control the duration and relative smoothness of your animations.

  • Lesson 3: The jQuery Carousel(s)

    Learn the vast world of functionality that jQuery’s plugin ecosystem provides access to. You will walk through the process of downloading, including initializing a plugin—in this case, the jQuery cycle plugin. The coding project involves the use of a carousel, and before learning to configure it, you will also learn the advantages and disadvantages of this user interface component. The user experience of carousels is currently a hot topic in web development and you will learn what aspects are necessary to consider before you add one, as well as which features you should look for (and which to avoid!).

  • Lesson 4: Building Tabs…To Last

    This lesson will turn you into a more powerful and savvy developer by diving deeper into the world of plugins covered in Lesson 3 and instructing you on how to create your own. In this scenario you will learn how to add custom jQuery tabs to a section of your page and then convert this to a plugin for future use.

  • Lesson 5: Introspective Dynamism

    This lesson will move you toward becoming fluent in event handling, including what events are and why we need to handle them. Specifically, you will explore the use of the click and draggable events.

  • Lesson 6: External Dynamism and Epilogue

    You will learn the role of Ajax and JSON as techniques used to work with data on the web and how jQuery relies on the .ajax() method to retrieve data for use on a page. Additionally, you will walk through the process for basic templating, which is the process for translating data to HTML. Lastly, you will explore resources for working with various Web APIs as a way to fold public sources of data into your projects.

Prerequisites

  • The ability to code HTML/CSS by hand
  • Some experience using and modifying JavaScript without necessarily having written JavaScript from scratch

Software Requirements

  • Mac or Windows desktop or laptop
  • A text editor (We suggest Visual Code Studio, it’s free, and available for Mac, Windows, and Linux)
  • Google Chrome web browser is recommended, although any modern browser with Developer Tools will suffice.

This Course is For

  • Designers with coding chops
  • Front-end developers
  • JavaScript developers

Meet the Instructor

Dave Porter

Dave Porter

Dave Porter is a long-time web and web application developer. He is currently a software developer for Apple and a core team member of SproutCore, an open-source JavaScript framework which is built on top of jQuery. He has served as application architect and developer on multiple projects. He’s been working with jQuery since it was first introduced and his deep appreciation for the technology stems from his time spent building websites in a “jQueryless world.” Dave has taught at Boston University, has a degree from Trinity College, and lives in Boston.

Enroll

🛠 We’re planning some website maintenance on . We’ll be down temporarily — we apologize for any inconvenience.