jQuery for Web Designers
2h 7mIntermediate2016-09-20
Authors
Joe Chellman
Web Designer, Author, Trainer
Course details
JavaScript is the programming language of the web. But some problems are a little difficult to solve using 100% pure JavaScript. jQuery closes most of the gaps, and does it so well that a huge number of developers now use jQuery to create some of the coolest front-end plugins around. This course will help web designers learn how to use jQuery's core library and plugins to create richer, more usable sites—faster and more efficiently than with JavaScript alone. It features real-world examples and some easily learned best practices, while covering jQuery basics such as functions, classes, event binding, and data manipulation. Author and developer Joe Chellman shows how to install and customize popular plugins and offers some compelling use cases for jQuery-based (vs. CSS-based) animation.
Learning objectives
When to use jQuery
Installing jQuery
Setting up functions
Using jQuery classes
Modifying the DOM
Event binding
Reading and setting values
Integrating plugins
Animating websites with jQuery
Learning objectives
When to use jQuery
Installing jQuery
Setting up functions
Using jQuery classes
Modifying the DOM
Event binding
Reading and setting values
Integrating plugins
Animating websites with jQuery
Skills covered
jQueryJavaScript FrameworksPersonaWeb DevelopmentOpen Source
Concepts
0. Introduction
- 01 - Welcome
- 02 - What you should know
- 03 - How to use the exercise files
- 04 - Challenges
1. jQuery Introduction
- 05 - jQuery is a JavaScript library
- 06 - When to use jQuery
- 07 - Alternatives to jQuery
- 08 - Which version to use
- 09 - How to install jQuery
- 10 - Reference Materials
2. Essential Concepts
- 11 - Set up functions
- 12 - Select elements
- 13 - Shorter code with chaining
- 14 - Use classes
- 15 - Modify the DOM
- 16 - Challenge - Form feedback
- 17 - Solution - Form feedback
3. It's Easier in jQuery
- 18 - Event binding
- 19 - Read and set values
- 20 - Attributes and properties
- 21 - Challenge - Dynamic contact form
- 22 - Solution - Dynamic contact form
4. Integrate a Plugin
- 23 - Build a gallery with Colorbox
- 24 - Initialize the plugin
- 25 - Change gallery options
- 26 - Challenge - Convert to slideshow
- 27 - Solution - Convert to slideshow
5. Animation
- 28 - JavaScript or CSS for animation
- 29 - Simple animations
- 30 - Animate numeric properties
- 31 - Easing
- 32 - Enhance a shopping cart with animation
- 33 - Challenge - Improve the animation
- 34 - Solution - Improve the animation
Conclusion
- 35 - Next steps - Plugins
- 36 - Next Steps - jQuery
- 37 - Next Steps - JavaScript