## Chronological Video Guide

+

All videos organized by creation date (oldest to newest):

### April 24, 2023

Apr 24 JavaScript to jQuery.mp4

This is the foundational video for the jQuery course - start here!

Apr 24 02-jQuery-selectors.mp4

Covers jQuery selector syntax

Apr 24 05-events-in-jQuery.mp4

Introduction to jQuery event handling

Apr 24 06-jQuery-effects.mp4

Built-in jQuery animation effects

Apr 24 07-jQuery-method-chaining.mp4

Understanding jQuery method chaining

Apr 24 08-the-importance-of-this-jQuery.mp4

Understanding "this" in jQuery context

Apr 24 jQuery Introduction.mp4

Introduction to jQuery library

Apr 24 jQuery1.mp4

First look at jQuery

Apr 24 jQuery - The DOM.mp4

jQuery and DOM manipulation

Apr 24 jquery events introduction.mp4

Introduction to jQuery events

### April 25, 2023

Apr 25 jQuery_ Traversing Mt. Dom Introduction.mp4

Introduction to DOM traversal with jQuery

Apr 25 Traversing up the DOM.mp4

Traversing up the DOM tree

Apr 25 Traversing Sideways.mp4

Traversing sideways in the DOM

Apr 25 jQuery_ Other Traversing Methods.mp4

Other DOM traversal methods

Apr 25 External Resources_ Intro.mp4

Introduction to external resources

Apr 25 External Resources_ cURL.mp4

Working with cURL

Apr 25 External Resources_ XHR in depth.mp4

In-depth look at XHR

Apr 25 External Resources_ URLs.mp4

Working with URLs

Apr 25 External Resources_ XHR.mp4

XMLHttpRequest basics

Apr 25 External Resources_ Unpacking Data.mp4

Unpacking data from external sources

Apr 25 External Resources_ JSON.parse.mp4

Parsing JSON data

Apr 25 External Resources_ Getting The Data Onto The Page.mp4

Displaying external data on the page

Apr 25 External Resources_ cURL and APIs.mp4

Working with cURL and APIs

Apr 25 External Resources_ Callbacks.mp4

Understanding callbacks

Apr 25 Tabular Data - Part One - Using The Keys To Generate A Table_.mp4

Generating tables from data

Apr 25 Tabular Data - Part Two.mp4

Continuation of tabular data work

Apr 25 Tabular Data - Part Three.mp4

Advanced tabular data techniques

Apr 25 Tabular Data - Part Four - Pagination.mp4

Pagination for large datasets

Apr 25 Adding The Markers To The Map(1).mp4

Adding markers to maps

Apr 25 Interactive Resume 20_ Adding the map element.mp4

Adding map elements to resumes

Apr 25 Resume 20_ Moving The Code Into It's Own Script.mp4

Organizing resume code into separate scripts

Apr 25 Referencing The JS Files.mp4

Properly referencing JavaScript files

Apr 25 Render The Map.mp4

Rendering maps on the page

Apr 25 Plugs & Sockets.mp4

Working with plugs and sockets

Apr 25 GoogleMapsAPIVid2.mp4

Working with Google Maps API

Apr 25 REST.mp4

Understanding REST principles

Apr 25 One Last Thing.mp4

Final thoughts and tips

## Module 1: From JavaScript to jQuery

+

### Videos to Watch:

JavaScript to jQuery.mp4

### Location:

01-FromJavaScriptTojQuery/03-manipulating_the_dom/

### Exercises:

1. Examine index.html to understand the HTML structure
2. Review js/app.js and js/transcript.js to see pure JavaScript implementation
3. Identify areas where DOM manipulation could be simplified with jQuery
4. Note the difference in syntax and complexity between standard JS and what jQuery offers

## Module 2: jQuery Introduction

+

### Videos to Watch:

jQuery Introduction.mp4 02-jQuery-selectors.mp4 jQuery1.mp4

### Location:

02-jQueryIntroduction/

### Sub-module 1: Downloading jQuery (02-downloading_jquery/)

Exercise: Examine Cards-jquery.html, script.js, and style.css to understand how to include jQuery in a project

    // Example jQuery inclusion in HTML
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="script.js"></script>

### Sub-module 2: jQuery Selectors (03-jquery_selectors/)

Video Solution: Review video_solution folder files to see jQuery selector examples

Challenge: Try the challenge_solution to practice selectors independently

    // jQuery Selectors Examples
    $('#myId')          // Select by ID
    $('.myClass')       // Select by Class
    $('p')              // Select by Tag
    $('div p')          // Descendant Selector
    $('div > p')        // Child Selector
    $('input[type=text]') // Attribute Selector

### Sub-module 3: Changing HTML/CSS (04-changing_html_and_css_with_jquery/)

Video Solution: Review video_solution folder files to see how to change HTML/CSS with jQuery

Challenge: Try the challenge_solution to practice HTML/CSS manipulation

    // jQuery HTML/CSS Methods
    $('#element').html()              // Get HTML content
    $('#element').html('New Content') // Set HTML content
    $('#element').text()              // Get text content
    $('#element').text('New Text')    // Set text content
    $('#element').css('color')        // Get CSS property
    $('#element').css('color', 'red') // Set CSS property
    $('#element').addClass('newClass')
    $('#element').removeClass('oldClass')
    $('#element').toggleClass('toggleClass')

### Sub-module 4: Challenge 2 (05-changing_html_and_css_with_jquery_challenge_2/)

Exercise: Work with Cards-jquery.html, script.js, statements.js, and style.css to practice HTML/CSS changes

### Sub-module 5: Challenge 3 (06-changing_html_and_css_with_jquery_challenge_3/)

Exercise: Review statements.js to understand advanced jQuery HTML/CSS manipulation

### Sub-module 6: First jQuery Script (07-writing_our_first_jquery_script/)

Video Solution: Review files in video_solution to see first jQuery scripts

Challenge: Try challenge_solution to practice writing jQuery scripts from scratch

    // Basic jQuery Document Ready Function
    $(document).ready(function() {
        // Your jQuery code here
        $('button').click(function() {
            $('p').hide();
        });
    });

    // Or shorthand version
    $(function() {
        // Your jQuery code here
    });

## Module 3: jQuery Events

+

### Videos to Watch:

jquery events introduction.mp4 05-events-in-jQuery.mp4 06-jQuery-effects.mp4 07-jQuery-method-chaining.mp4 08-the-importance-of-this-jQuery.mp4

### Location:

03-jQueryEvents/

### Sub-module 1: Events in jQuery (02-events_in_jquery/)

Video Solution: Review video_solution files to see jQuery event handling

Challenge: Try challenge_solution to practice event handling

    // jQuery Event Handling
    $('button').click(function() {
        // Handle click
    });

    $('input').keydown(function(event) {
        // Handle keydown
    });

    $('form').submit(function(event) {
        event.preventDefault(); // Prevent form submission
        // Handle form submission
    });

    // Event delegation
    $(document).on('click', '.dynamic-button', function() {
        // Handle clicks on dynamically added elements
    });

### Sub-module 2: jQuery Effects (03-jquery_effects/)

Challenge: Work with challenge_solution files to practice jQuery built-in effects

    // jQuery Effects
    $('#element').hide();
    $('#element').show();
    $('#element').toggle();

    $('#element').fadeIn();
    $('#element').fadeOut();
    $('#element').fadeToggle();

    $('#element').slideUp();
    $('#element').slideDown();
    $('#element').slideToggle();

    // With duration
    $('#element').fadeIn(1000); // 1 second

    // With callback
    $('#element').fadeOut(function() {
        alert('Fade out completed!');
    });

### Sub-module 3: Effects Challenge 2 (04-jquery_effects_challenge_2/)

Exercise: Work with Cards-jquery.html, script.js, and style.css to practice effects

### Sub-module 4: Effects Challenge 3 (05-jquery_effects_challenge_3/)

Exercise: Work with Cards-jquery.html, script.js, and style.css to practice advanced effects

### Sub-module 5: Effects Challenge 4 (06-jquery_effects_challenge_4/)

Exercise: Work with Cards-jquery.html, script.js, and style.css to practice complex effects

### Sub-module 6: Method Chaining (07-method_chaining/)

Video Solution: Review video_solution files to see jQuery method chaining

Challenge: Try challenge_solution to practice method chaining

    // jQuery Method Chaining
    $('#element')
        .css('color', 'blue')
        .fadeOut(1000)
        .delay(500)
        .fadeIn(1000)
        .addClass('highlight');

    // Each method returns a jQuery object, allowing chaining

### Sub-module 7: Method Chaining Challenge 2 (08-method_chaining_challenge_2/)

Exercise: Work with files in Sample-Site, css/style.css, js/script.js, and Cards-jquery.html

### Sub-module 8: Method Chaining Challenge 3 (09-method_chaining_challenge_3/)

Exercise: Work with files in Sample-Site, css/style.css, js/script.js, and Cards-jquery.html

### Sub-module 9: Importance of "this" (10-the_importance_of_this/)

Challenge: Review challenge_solution files to understand "this" in jQuery

Additional Exercises: Explore hiding_paragraphs, if_statements, mouseenter_and_mouseleave, and red_and_black_boxes

    // jQuery "this" keyword
    $('button').click(function() {
        // "this" refers to the clicked button element
        $(this).css('background-color', 'red');

        // Find elements relative to "this"
        $(this).siblings().hide();
        $(this).parent().addClass('active');
    });

## Module 4: Traversing the DOM with jQuery

+

### Videos to Watch:

jQuery_ Traversing Mt. Dom Introduction.mp4 Traversing up the DOM.mp4 Traversing Sideways.mp4 jQuery_ Other Traversing Methods.mp4

### Location:

04-jQuery-TraversingMtDOM/

### Sub-module 1: jQuery Traversing Mt DOM (01-jquery_traversing_mt_dom/)

Exercise: Work with button.html, css/, and js/ files to practice basic traversal

    // jQuery Traversing Methods
    $('#start').parent()         // Get direct parent
    $('#start').parents()        // Get all ancestors
    $('#start').parents('.class') // Get specific ancestor
    $('#start').children()       // Get direct children
    $('#start').find('.class')   // Find descendants
    $('#start').siblings()       // Get siblings
    $('#start').next()           // Get next sibling
    $('#start').prev()           // Get previous sibling

### Sub-module 2: Up and Down Tree (02-traversing_up_and_down_the_dom_tree/)

Exercise: Work with traversing_mt_dom.html, css/, and js/ files to practice parent/child traversal

### Sub-module 3: Traversing Sideways (03-traversing_sideways/)

Exercise: Work with index.html, css/, and js/ files to practice sibling traversal

### Sub-module 4: Sideways Challenge 2 (04-traversing_sideways_challenge_2/)

Exercise: Work with index.html, css/, and js/ files to practice sideways traversal

### Sub-module 5: Sideways Challenge 3 (05-traversing_sideways_challenge_3/)

Exercise: Work with index.html, css/, and js/ files to practice advanced sideways traversal

### Sub-module 6: Sideways Challenge 4 (06-traversing_sideways_challenge_4/)

Exercise: Work with index.html, css/, and js/ files to practice complex sideways traversal

### Sub-module 7: Other Methods Challenge 1 (07-other_traversing_methods_challenge_1/)

Exercise: Work with index.html, css/, and js/ files to practice other traversal methods

### Sub-module 8: Other Methods Challenge 2 (08-other_traversing_methods_challenge_2/)

Exercise: Work with index.html and js/ files to practice additional traversal methods

### Sub-module 9: Other Methods Challenge 3 (09-other_traversing_methods_challenge_3/)

Exercise: Work with index.html, css/, and js/ files to practice advanced traversal methods

## Lab Exercise Workflow

+

### For each module/sub-module:

1. Watch the corresponding video listed in the module section
2. Open both the "video_solution" and "challenge_solution" folders when available
3. Study the HTML and CSS files to understand the base structure
4. Analyze the JavaScript/jQuery code in the script files
5. Identify how jQuery simplifies the code compared to plain JavaScript
6. Try modifying the code to reinforce learning
7. Complete challenges when provided

### Helpful Tips for Success:

- Start with simple examples and gradually move to complex ones
- Always compare the vanilla JavaScript approach with the jQuery approach
- Take notes on syntax differences and shortcuts jQuery provides
- Test your code frequently in the browser
- Don't hesitate to experiment - try different jQuery methods
- Refer to jQuery documentation when exploring new methods

### Assessment Criteria:

By the end of this lab, you should be able to:

- Explain the advantages of using jQuery over vanilla JavaScript
- Convert basic JavaScript DOM manipulations to jQuery equivalents
- Use jQuery selectors effectively to target elements