This advanced course is for people who have experience building webpages. It is a coding class, so HTML & CSS knowledge equivalent to our Web Development Level 2 class is expected.
Register for a Class
Customize your own schedule (choose dates at checkout), or choose a preset certificate track by expanding the dates below.
Optional bonus: refining the menu selection experience
Selecting multiple elements & elements without IDs
Getting a specific list item
Getting elements by class name
Getting multiple items using querySelectorAll()
Getting a single item using querySelector()
Chaining selectors together
Targeting elements by data attribute
Photo Filter Website: User Friendly Navigation
Setting up the selectors with data attributes
Getting the selectors on load
Toggling the filter buttons
Refining the filter buttons
Photo Filter Website: Getting the Photos to Filter
Creating an array to store the selectors
Getting the All button to select all filters
Getting the rest of the buttons to select the other filters
Initially hiding the photos
Getting the photos to filter
Photo Filter Website: Creating an Exclusive Filter
Adding a checkbox to toggle exclusive filtering on/off
Separating the inclusive & exclusive filters
Writing a conditional to select the appropriate filter
Programming the exclusive filter
Rerunning the filter when the checkbox is toggled
Improving the user experience
Showing/Hiding Content with jQuery Animation
Getting started with jQuery
Running code when the document is ready
Using jQuery’s slideToggle() method
jQuery Hover Animation
Adding an outline with CSS
Using jQuery’s hover() method
Using jQuery’s animate() method
More Advanced jQuery Showing/Hiding
Adding an animation to reveal hidden content
Targeting the proper div: traversing the document
Swapping the button image with jQuery
jQuery Lightbox: A Pop-up Image Viewer
Linking to the plugin files
Initializing the pop-up
Grouping the photos into a gallery
Removing the counter
Customizing the appearance
jQuery Cycle: A Simple Slideshow
Defining what content gets cycled
Adding more cycles & exploring options
Reversing the animation
jQuery Cycle: Adding Slideshow Controls
Preventing a possible “flash of unstyled content”
Enabling the slideshow
Adding & customizing the controls
jQuery Cycle: Adding a Pause Button
Adding a pause/play button
Styling the pause/play button
Checking to see if the cycle is paused
Making the pause/play button work
jQuery Form Validation
Initializing the plugin & setting options
Customizing the error messages
Changing the location of the error messages
Styling the error messages
jQuery Image Carousel
Linking to the plugin files
Creating the carousel
Styling the carousel
An easy way to add prev & next buttons
Adding custom prev & next buttons
Setting how many items are shown
Create accordions to elegantly hide and show content.
Learn to make great-looking gallery slideshows.
Create robust client-side form validation with ease.
Cycles are a way to display lots of content in a small area.
Learn how to hide and show content to keep your layouts clean.
Create cycle slideshows that you can fully control.
Carousel sliders let you easily scroll through content.
“Excellent instructors... patient and extremely knowledgeable.”
“Noble Desktop takes you through the development path with ease and provides you the background needed for a career in web development and design.”
Web Associate, Hudson River Park Trust
Shonica St John
We use HTML to tag content appropriately as headings, paragraphs, links, images, forms, etc.
Once we’ve marked up the content, we style it with CSS. Using CSS we style type (color, size, etc.), set spacing, position, alignment, adjust the layout for multiple screen sizes and much more.
GreenSock: Ultra high-performance, professional-grade animation. This library is focused solely on animation, allowing you to create amazing animations as fast as possible. You can use it to animation just about anythiing in a webpage, and even Google recommends it for animating ads.