Prerequisites: HTML & CSS knowledge equivalent to our Web Development Level 2 class.
This course is offered at our design school, Noble Desktop. View upcoming dates and register for this course directly on Noble Desktop’s website.Register at nobledesktop.com
Video Training and Workbook Included
Students get a workbook and lifetime access to self-paced training videos, a $95 value.
Modern computer classroom with your choice of Mac or PC to work on.
Small In-Person Classes
Get personalized attention in small groups with an expert instructor in the classroom.
Refresh the course materials within six months for free as long as there's space in the class.
What You'll Learn
- Create animated slideshows with transitions such as fades or slides
- Build animated image enlargers, show/hide additional content, and more
Full Course SyllabusDownload PDF Outline
- The importance of quotes
- Numbers vs. strings
Reusing Code with Functions
- Defining functions
- Calling functions
- Defining parameters & passing arguments
- Targeting elements by ID
If Statements: Clearing Form Fields
- Getting & setting properties
- Using if statements
- Reshowing text hints in empty form fields
- Intro to objects
- The global object
- Breaking open & manipulating objects
Dynamically Changing Content with Custom Objects
- Checking the functionality of the select menu
- Getting the chosen value
- Dynamically changing the state name value
- Dynamically changing the rest of the values
Introduction to Arrays & the Math Object
- Creating an array
- Editing an array
- Creating an array of welcome headings
- The Math object
- Using the Math object to pick random headlines
Introduction to For Loops
- Creating a for loop
- Using the for loop to set dropdown menus
- Clearing the To menu
- 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
- Click events
- 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
- Adding captions
- Removing the counter
- Customizing the appearance
jQuery Cycle: A Simple Slideshow
- Initial setup
- 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
Frequently Asked Questions
Do I need to bring a computer?
No. We provide a computer with the necessary software for each attendee. Choose a Mac or a PC during the checkout process.
Are discounts available for this course?
No. This course is not eligible for any discounts.
We offer discounts for packages of classes, including our Excel Bootcamp, SQL Bootcamp, Data Analytics, and PowerPoint Bootcamp.
We also provide discounts for ten or more classes purchased together. Please reach out for more information on our voucher programs.
Does this course come with a book?
Yes. This course includes a complimentary book or manual at no additional cost.
What if I need to retake this course? May I retake it for free?
Yes. You may retake this course for free once within six months, provided that the class is running with an available seat. For more information, visit our policies page.