Session 6 – Wednesday, June 17
div on the page. A CodePen sample can be found here.
After briefly looking at several examples from chapter 8, we looked at how to create a simple jQuery plugin (see the first several examples from chapter 9).
We finished up by looking at how parallaxing works by using the window’s scroll event to reposition fixed elements at new locations relative to the browser windows. Assigning scroll rate multipliers and changing an element’s top attribute, allows them to move at different rates. A CodePen sample can be found here.
Session 5 – Tuesday, June 16
Class started with a JSON exercise that would read random customer comments from a URL and display them within a
div on the page. We then built on the example by adding a form that would allow comments to be submitted and randomly selected for display on the page. A CodePen version of the exercise can be found here.
Once we finished with the example, we looked at several form validation techniques, particularly the validation plugin that’s mentioned in the book.
We finished with a tour of the remaining content examples from chapter 7.
Session 4 – Monday, June 15
We took a look at a few CodePen examples of animated menus: two using only CSS to perform the animations (here and here) and one using jQuery. The intent was to understand that quite a bit of animation can be accomplished strictly with CSS.
Session 3 – Wednesday, June 10
Class started with another CodePen quiz, along with a challenge to go from animating a single box to animating multiple boxes. [SPOILER ALERT: The second link is a complete solution. You should complete the quiz, then move on to completing the challenge by making the quiz solution more general purpose.]
We quickly moved through jQuery’s resizing features, and worked through the lightbox example at the start of chapter 4. The remainder of chapter 4 walks through a lot of jQuery plug-ins that don’t require much programming, so we mainly looked at how simple it was to use plug-ins to accomplish complex tasks by loading the completed examples into the browser.
Session 2 – Tuesday, June 9
We started with a quick CodePen quiz.
We followed up the quiz with a start-from-scratch practice exercise developing a horizontal menu that mimics the drop-down behavior of the W3Schools.com menu.
Once we finished the practice exercise, we looked at the jQuery animate() function and worked through many of the examples from chapter 3 in “jQuery: Novice to Ninja.” Several examples incorporated jQuery plug-ins or parts of the jQuery UI library. We looked at how you can generate a custom version of the jQuery UI library.
Session 1 – Monday, June 8