JavaScript to jQuery Programming Lab - Student Instruction Sheet

================================================================================

Welcome to the JavaScript to jQuery Conversion Lab! This lab will guide you through 
converting plain JavaScript code to jQuery, helping you understand the benefits and 
syntax differences between these two approaches to DOM manipulation.

DIRECTORY STRUCTURE OVERVIEW:

The course is organized in 4 main modules:
1. 01-FromJavaScriptTojQuery - Introduction and basic DOM manipulation
2. 02-jQueryIntroduction - Core jQuery concepts and selectors
3. 03-jQueryEvents - Event handling and effects with jQuery
4. 04-jQuery-TraversingMtDOM - DOM traversal techniques

DETAILED VIDEO MAPPINGS AND EXERCISES:

MODULE 1: From JavaScript to jQuery (Starting Point)
----------------------------------------------------
Video: 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: 
- jQuery Introduction.mp4
- 02-jQuery-selectors.mp4
- jQuery1.mp4

Location: 02-jQueryIntroduction/

Sub-modules and exercises:
1. 02-downloading_jquery/
   Exercise: Examine Cards-jquery.html, script.js, and style.css to understand how to include jQuery in a project

2. 03-jquery_selectors/
   Video Solution: Review video_solution folder files to see jQuery selector examples
   Challenge: Try the challenge_solution to practice selectors independently
   
3. 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
   
4. 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
   
5. 06-changing_html_and_css_with_jquery_challenge_3/
   Exercise: Review statements.js to understand advanced jQuery HTML/CSS manipulation
   
6. 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

MODULE 3: jQuery Events
-----------------------
Videos:
- 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-modules and exercises:
1. 02-events_in_jquery/
   Video Solution: Review video_solution files to see jQuery event handling
   Challenge: Try challenge_solution to practice event handling
   
2. 03-jquery_effects/
   Challenge: Work with challenge_solution files to practice jQuery built-in effects
   
3. 04-jquery_effects_challenge_2/
   Exercise: Work with Cards-jquery.html, script.js, and style.css to practice effects
   
4. 05-jquery_effects_challenge_3/
   Exercise: Work with Cards-jquery.html, script.js, and style.css to practice advanced effects
   
5. 06-jquery_effects_challenge_4/
   Exercise: Work with Cards-jquery.html, script.js, and style.css to practice complex effects
   
6. 07-method_chaining/
   Video Solution: Review video_solution files to see jQuery method chaining
   Challenge: Try challenge_solution to practice method chaining
   
7. 08-method_chaining_challenge_2/
   Exercise: Work with files in Sample-Site, css/style.css, js/script.js, and Cards-jquery.html
   
8. 09-method_chaining_challenge_3/
   Exercise: Work with files in Sample-Site, css/style.css, js/script.js, and Cards-jquery.html
   
9. 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

MODULE 4: Traversing the DOM with jQuery
----------------------------------------
Videos:
- jQuery_ Traversing Mt. Dom Introduction.mp4
- Traversing up the DOM.mp4
- Traversing Sideways.mp4
- jQuery_ Other Traversing Methods.mp4

Location: 04-jQuery-TraversingMtDOM/

Sub-modules and exercises:
1. 01-jquery_traversing_mt_dom/
   Exercise: Work with button.html, css/, and js/ files to practice basic traversal
   
2. 02-traversing_up_and_down_the_dom_tree/
   Exercise: Work with traversing_mt_dom.html, css/, and js/ files to practice parent/child traversal
   
3. 03-traversing_sideways/
   Exercise: Work with index.html, css/, and js/ files to practice sibling traversal
   
4. 04-traversing_sideways_challenge_2/
   Exercise: Work with index.html, css/, and js/ files to practice sideways traversal
   
5. 05-traversing_sideways_challenge_3/
   Exercise: Work with index.html, css/, and js/ files to practice advanced sideways traversal
   
6. 06-traversing_sideways_challenge_4/
   Exercise: Work with index.html, css/, and js/ files to practice complex sideways traversal
   
7. 07-other_traversing_methods_challenge_1/
   Exercise: Work with index.html, css/, and js/ files to practice other traversal methods
   
8. 08-other_traversing_methods_challenge_2/
   Exercise: Work with index.html and js/ files to practice additional traversal methods
   
9. 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:

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

ASSESSMENT CRITERIA:

By the end of this lab, you should be able to:
1. Explain the advantages of using jQuery over vanilla JavaScript
2. Convert basic JavaScript DOM manipulations to jQuery equivalents
3. Use jQuery selectors effectively to target elements