Interactive Web with JavaScript

Middle School – Wizard Level I – Class 3

About Interactive Web with JavaScript

Web technology continues to evolve; this course offers truly progressive content in front-end website development. Students utilize JavaScript, jQuery, HTML, and CSS3 to create stunning, interactive, dynamic websites they will love to build and show off. Students build a portfolio-worthy project at the end of the course show-casing their advanced skills and knowledge.

Learning Objectives

When students complete Interactive Web with JavaScript, they will be able to:

  • Learn foundational JavaScript and jQuery skills to add interactivity logic
  • Learn CSS3 keyframe and positioning skills to add realistic and effective animation, arrays, loops, and operators
  • Incorporate JavaScript, jQuery, and CSS3 into HTML to properly display an interactive page.
Interactive Web with JavaScriptExpand All Lessons
  • 1. Interactivity using JavaScript
    Learn the basics of using JavaScript with HTML.

    In this lesson, students learn how to use JavaScript in HTML pages, as well as JavaScript variables and if-else statements to create a fun, interactive quiz project which prompts the user for information and returns values.

  • 2. Learn Animation with CSS3
    Learn the power of CSS3.

    In this lesson, students are introduced to the power of CSS3 positioning and keyframes to create an impressive monster truck animation. This project incorporates CSS positioning elements which are critical to understand for all web developers.

  • 3. Basic Interactivity via JavaScript
    Dynamically change the HTML code of page.

    In this lesson, students learn how to dynamically change the HTML code of a page using functions, arrays, and DOM document objects. Students dynamically update a webpage with Superhero facts by utilizing items in an array and creating JavaScript functions and timing intervals.

  • 4. Time Functions
    Utilize JavaScript timing intervals to control animation functions.

    In this lesson, students learn how to add a variety of timed actions to increase the interactivity of a page. Students also use audio files to add sound effects to the project of the day.

  • 5. Create a Slot Machine I
    Utilize concepts in previous lessons to create a dynamic, interactive game.

    In this lesson, students draw upon knowledge and skills learned thus far to create part 1 of a dynamic, interactive slot-machine game. Arrays, variables, CSS3 elements, JavaScript functions, intervals, and DOM concepts are reinforced as the game is built.

  • 6. Create a Slot Machine II
    Learn how to create advanced functions, intervals, and event handlers.

    In this lesson, students add to the slot-machine project started in the previous lesson. Students create more complex functions utilizing time intervals and event handlers to create a realistic slot-machine game, complete with sound effects.

  • 7. DOM Manipulation using JQuery
    Learn the basics of jQuery to help create dynamic pages.

    In this lesson, students learn how to use the jQuery selector and DOM. Students learn how to hide, show, and change text using jQuery to create a Pokemon game, complete with score-keeping.

  • 8. Events using JQuery
    Combine keyboard events and CSS3 keyframes to create interactive animations.

    In this lesson, students learn how to utilize keyboard events and collision detection to create an interesting, interactive web page which is animated using keyframes.

  • 9. Using Colors
    Harness the power of color for engaging, dynamic web pages.

    In this lesson, students create an entertaining painting app while learning how to dynamically manipulate colors. Students build jQuery functions, loops, and operators to interact with the canvas and create works of art.

  • 10. Creating Animations with CSS3 and JQuery
    Advanced animations and element positions are covered.

    In this lesson, students create an animated archery game, requiring advanced animation, collision detection and element positioning. Keyframes move the archery target up and down, making the game even more challenging. Advanced concepts are introduced while students continue to reinforce skills from previous lessons.

  • 11. Space Wars Project
    Part 1 Utilize JavaScript, CSS3, and jQuery skills learned during the course to create a portfolio-quality Space Wars project. This final project utilizes HTML, JQuery functions, operators and arrays, and CSS3 keyframes and positioning to create this high quality final project.

    In part one of the final project, students create a Space Wars game incorporating past knowledge of jQuery functions, arrays, loops, and operators and CSS3 keyframes and positioning to create part 1 of this truly stunning game.

  • 12. Space Wars
    Part 2 Create a portfolio-quality Space Wars project showcasing knowledge learned in this course. Students will be proud of their hard work and effort over the course of the previous 12 weeks. This final project demonstrates the advanced skills and knowledge students have gained and will be useful for college course admission and future employment in website development fields.

    The final project concludes by adding collision detection and scoring to the Space Wars game. The completed game is a true showcase of the solid programming concepts and skills students have learned during the course.

VR Capstone Class

Imagine putting a headset over your eyes and getting teleported to a virtual world. What if you built that world yourself? How exciting and entertaining would that be, right? In this course, we use the latest tools from Mozilla and Google to launch a VR game by the end of the course.

Class Schedule

All students start in Intro to Programming at Wizard Level I. If you have previous coding experience, take the Advanced Placement test. Returning students can continue with the class where they left off.

#1 Most Comprehensive Program for Your Student’s Success!

The CodeWizardsHQ program comes with everything your child needs to be successful in learning to code.

All of the below are included at no extra cost.

Interactive Live Classes
Structured and Comprehensive Curriculum
Video Recordings of Every Class
Downloadable Slides for Every Class
Complimentary 1×1 Office Hours
Weekly Progress Report & Alerts
Daily Homework Help
Individual Course Certification
Highly Qualified and Experienced Teachers
Direct Messaging with Teachers
Supportive Online Student Community
24/7 Access to Proprietary Coding Platform
Hands-on, Project Based Learning
Path to Real-World Internship

Course Duration & Time Commitment
All courses are 12 weeks long. A Wizard will receive a certification for their achievement at the end of the course.

Expect a weekly time commitment of 2-3 hours. 1 hour of class time, plus 1-2 hours of practice time, with instructors support throughout, including weekends.

100% Guarantee

Our goal is to make all our students successful. If your child is not happy with our program, please notify us within the first four class sessions and you will receive a full refund.

Get Your Wizard Started

Pin It on Pinterest