Bachelor of Fine Arts in Graphic Design - learn more

Online JavaScript/Jquery Course

JavaScript for Designers II

Learn to code with JavaScript and jQuery with techniques geared to visually oriented designers. In this online JavaScript/jQuery course, you'll learn the fundamentals of JavaScript programming, focusing on how you can add interactivity and responsiveness to your Web designs. Working with a JavaScript guru, you'll learn coding and programming concepts through fun, step-by-step exercises and apply what you've learned to creative, professionally oriented projects. Class projects include a range of interactive projects: a quiz, adaptive form, single-page site, Web application, responsive site, and portfolio/personal site enhanced by plugins.

JavaScript&JQuery course graphic 

Expand your Web dev skills with JQuery

Learn to code with JavaScript and jQuery

Instructor-Led Course

Feedback from design professionals

Creative Projects

Stretch your skills, grow your portfolio

Learn at Your Own Pace

Self-paced and scheduled programs available

Course Outline

1 - Another Jolt of JavaScript

Put on another cup of coffee, it's time to expand your JavaScript knowledge. Lesson One is a fun-filled crash course in the Web's #1 interactive programming language. Working with your instructor, you'll review how to up a JavaScript skeleton in an HTML document and use it to write basic programs. You'll unleash your inner programmer by writing basic JavaScript expressions and statements and learning how to define variables, operators, and functions for your programs. You'll discover how to store different kinds of values in your variables and use conditional statements for flow control in your programming.

Project - Interactive quiz

2 - Dominating the DOM with jQuery

With JavaScript basics under your belt, world DOMination can't be far off. And in Lesson Two, you'll begin your exploration of jQuery, the most popular, ubiquitous JavaScript toolkit on the Web. Just what makes jQuery so great? As you'll find out, using CSS selectors, JavaScript (and jQuery) enable you to access and control elements throughout a Web site, creating interactivity where you decide to use it. Working with your instructor, you'll set up a jQuery skeleton in an HTML document and learn how to hide, show, and change the appearance of Web content in response to user input. You'll learn how to get, store, and return information in response to multiple user actions.

Project - Form with validation

3 - Fully Loaded with jQuery

Using jQuery, interactivity can take many forms: User input can allow us to insert and remove content, move content around, generate new content, or even load content from external files. In Lesson Three, we explore how jQuery's insertion methods can help us manipulate content (text, images, or media) throughout a Web site. We explore how to get and set content and program safely within important browser security protections. We look at how to write code that runs asynchronously to accomplish a series of tasks, and how to use callback functions to detect program completion. We look at effect methods that can make interactivity clearer or more exciting, and how to use event methods to program different stages in user interaction.

Project - Single page site

4 - Collect Your Thoughts with Arrays

Many useful Web interfaces are driven by a database. In Lesson Four, you'll explore how to efficiently and elegantly select data, run programs with it, and design it for your Web pages. You'll learn how to work with the array object type and use for-loops to iterate code and execute your programs. You'll learn how to avoid the trap of the "infinite loop" and break out of for-loops. You'll learn how to make the data more usable for Web visitors with array methods.

Project - Contact Management Page

5 - Responding to Responsive Needs

Mobile devices have changed the game. It's no longer enough to make a site or an app that looks good on a desktop computer screen. We need to make sure our user interfaces thrive in the mobile market. In Lesson Five, you'll explore how to apply everything you've learned about jQuery to the increasingly popular responsive framework Bootstrap. Working with your instructor, you'll breeze through your very own Bootstrap bootcamp. You'll learn how to set up a Bootstrap framework in an HTML document and control important Web page elements: text content, images, tables, panels, accordions, buttons, dropdowns, and even navigation elements like navigation bars, tabs, and pills. Armed with this knowledge, you'll design a jQuery or JavaScript enabled responsive client site in the assignment.

Project - Client site with Bootstrap

6 - Plugging in to jQuery

Learning JavaScript and jQuery opens your horizons to a whole world of plugins that you can use to extend the functionality of your Web sites. As a Web developer, you need to understand how to research, download, and integrate these add-ons for your projects. Lesson Six walks you through the process of powering up your pages with jQuery plugins. You'll learn how to implement the popular lightgallery and Cycle 2 plugins in your projects and even add parallax scrolling effects using a custom plugin created by the course developer! A special focus in the lesson is how to use debugging tools such as Firebug to systematically identify and eliminate errors in your code.

Project - Personal or portfolio project

Course Outcomes

Students in this course can expect to learn to:

  • Set up a basic JavaScript skeleton within an HTML document.
  • Write fundamental JavaScript expressions and statements.
  • Define and use variables, operators, and functions and use variable types correctly.
  • Construct and understand conditional statements.
  • Interpret and utilize the Document Object Model (DOM) of HTML pages.
  • Use CSS selectors to reference elements of the DOM.
  • Set up a basic jQuery skeleton within an HTML document.
  • Use jQuery and CSS selectors to alter the appearance and behavior of an HTML document.
  • Use jQuery to get information about the current state of DOM elements.
  • Use jQuery's insertion methods for manipulating the DOM.
  • Load external content into a single HTML page with jQuery.
  • Utilize asynchronous code and hand off control from one function to another.
  • Work with arrays, manipulating them and sorting the order of elements.
  • Utilize for-loops to control program flow.
  • Implement interactive effects and event methods.
  • Work with the object data type.
  • Explain the difference between a framework and a library.
  • Set up and use the Bootstrap framework in HTML documents.
  • Edit and customize Bootstrap's grid, contextual colors, and other responsive styles.
  • Create full-featured interfaces using Bootstrapped HTML elements.
  • Explain how Bootstrap and jQuery interact.
  • Debug programs using professional developer tools
  • Apply a lightbox model plugin, a slideshow model plugin, and a parallax scrolling plugin to an HTML page.

Course Registration

Interested in this course? Scheduled enrollment options are available. Ask Admissions about taking this course as part of a degree program.

Course LevelClasses startRegistration FeeTuition
Degree course
3-credit course, 15 week
Jan, Apr, Aug$200$510/credit
* Registration fees are nonrefundable after 5 days from enrollment. All tuition includes a digital materials fee for updates to course or program content.

Software and Supplies

To take this course you'll need:

  • Computer with Internet connection.
  • Account with a Web hosting service (free services are available).
  • Experience in HTML and CSS and FTPing files to the Web.
  • Adobe Photoshop or equivalent digital imaging program.
  • Experience in the above software.

Who’s Teaching

Course developed by Geoph Essex

Getting Started

Enrolling online is easy and convenient.

Chat with our knowledgeable admissions staff to select course and program options.

Complete your registration entirely online.

Related Programs

Did you know? You can take this course as part of an award-winning certificate or degree program.