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.
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
Add interactivity & let users change elements on the page
Take user input & update content (like choosing the right image)
Add smooth scrolling, which makes in-page navigation nicer (popular on single page sites)
Add form validation to make sure users enter the correct info
Learn to make image galleries
Let users hide/show content to keep layouts clean
Custom Workbook Included
Part of a Certificate Program
This class is included in our web development certificate programs. Take the other courses to earn a certificate!
Highly Reviewed by Our Alumni
From our hands-on training style to world-class instructors and proprietary curriculum, we deliver a learning experience our alumni can be proud of.
Shonica St John
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.
Ben Schneider, Hudson River Park Trust
Charles Easton IV, The Lynx Group
Noble Desktop is fantastic 100% of classes (I have taken 4) have been well-paced and extremely real-world relevant.
Frequently Asked Questions
Are there prerequisites? Do I need to come in with any prior coding knowledge?
Students should feel comfortable coding HTML and CSS. You should have knowledge equivalent to our Web Development Level 2 class.
Do I need to bring anything to the class?
No. We provide computers (Mac or PC) with a coding editor installed. Choose your operating system at checkout.
Do you offer discounts or a payment plan for this course?
10% Alumni Discount: Get 10% off this course if you’ve previously taken any 12+ hour course.
$100 Individuals Discount: Take $100 off this course if you’re an individual paying for yourself (you’re not being reimbursed by a company).
Discounts are applied at checkout (no promo code required) and will be verified after you place your order. Discounts are subject to change. Read our discount policies for more details.
This course is not eligible for a payment plan, which is only available for programs priced at $2,495 and above. Read our Payment Plan FAQ for more details.
Take this course as part of a certificate program and save:
You may attend this training virtually (online) at the scheduled time the course is offered (New York, Eastern Time).
How does attending “live online” work?
Students can attend this training remotely through screen sharing software (we use Zoom).
Participants can hear the instruction, ask questions, and even share their screen with the instructor.
For audio you can use your computer’s microphone/speakers or call a phone number that we’ll provide.
Classes are activity-based and taught by a live instructor, so we strongly encourage students who are local to the area to attend in person!
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.