Interactive Web with JavaScript

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.