Middle school boy in classroom

Course Description

In Web Interfaces, the third course in Wizard Level 2 of our middle school program, students learn how to create more advanced interactive websites utilizing various popular web development tools and techniques. They’ll gain experience working with jQuery, AJAX, Flexbox, API interfaces, and cookies. Students will produce practical web applications and a portfolio-quality final project which utilizes popular APIs. The complex programming in this course is made fun and easy through engaging projects students love to build and customize. After completing Web Interfaces, students are ready to enter our Wizard Level 2 Capstone course and show off what they’ve learned!

Middle school girl in coding class

Learning Objectives

When students complete Web Interfaces, they will be able to:

  • Build advanced web applications that use JavaScript, jQuery, and AJAX
  • Use advanced CSS layout techniques to build complicated user interfaces
  • Connect their web applications to popular APIs to add enhanced functionality
Level II

Prerequisites

These courses must be completed before Web Interfaces:

Web InterfacesExpand All Lessons
  • JavaScript class lesson 1
    1. JavaScript Refresher

    In this lesson, students review JavaScript functions, basic collision detection and animations to produce a fun pirate treasure hunt game. Students review score keeping and adding sound effects. Key CSS concepts are also reviewed to build a foundation for future skills used in the course.

  • JavaScript class lesson 2
    2. Let’s Learn Inputs

    In this session, students create a spell-binding web page which prompts the user for input and checks the answer to reveal a secret message. Additional jQuery animations are introduced in this session. The HTML input tag, CSS transparency, and JavaScript logic are used to create a truly magical page.

  • JavaScript class lesson 3
    3. Inputs Part 2

    In this session, students use radio button input and drop-down lists to create a game utilizing images that hide after 60 seconds. Questions about the image are asked and answers are checked for correctness. JavaScript, jQuery, and HTML skills are used to build this complex game.

  • JavaScript class lesson 4
    4. Validations

    In this session, students learn how to validate user input so that errors can be caught and corrected. Students create a form that collects name and email information. Data is validated for format and length.

  • JavaScript class lesson 5
    5. Let’s Learn Flexbox

    In this session, students learn how to create symmetrically pleasing layouts using flexbox. Students create an interesting mine-sweeper style game using flexbox, CSS and JavaScript. Interactivity is added by creating clickable elements on the page.

  • JavaScript class lesson 6
    6. Photo Editor I – Mid-Term Project

    In part one of this mid-term project, students create an interactive photo editor. Students utilize flexbox, jQuery, HTML, and CSS to create a dynamic and useful photo editor.

  • JavaScript class lesson 7
    7. Photo Editor II – Mid-Term Project

    In part two of this mid-term project, students complete an interactive photo editor. Students utilize flexbox, jQuery, HTML, and CSS to create a dynamic and useful photo editor. The result is an impressive portfolio quality project utilizing skills learned so far in this course. 

  • JavaScript class lesson 8
    8. Media Queries

    In this session, students learn how to use media queries to handle styling for different screen sizes. Users view websites and apps on computers, phones, tablets and other media. Students will use the meta tag to control the browser view. With the CSS media queries they’ll code a tree that grows as the screen expands.

  • JavaScript class lesson 9
    9. jQuery UI with CSS Combinators

    In this session, students utilize the jQuery UI Library to add interactions, widgets and effects. Students are introduced to CSS child, parent, and sibling combinators and create an interactive, sortable task list web application

  • JavaScript class lesson 10
    10. Local Storage

    In this session, students store data for the first time using local storage in their browser. They build a notepad application that can read and write data. Students also use attributes to make content editable within tags creating truly dynamic content.

  • JavaScript class lesson 11
    11. Activity Tracker – Final Project

    In this session, students utilize their HTML/CSS and jQuery skills to build an activity tracker app. They’ll start with the design and framework by adding styles and a dropdown input. Students also build a helpful timer feature to track activity minutes.

  • JavaScript class lesson 12
    12. Activity Tracker II – Final Project

    In this session, students complete their activity tracker app. They’ll store their activities in local storage and can show a progress bar to users. The final product is a fully functional application that helps kids get moving!

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
24/7 Access to Proprietary Coding Platform
Supportive Online Student Community
Path to Real-World Internship
Hands-on, Project Based Learning

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. 55 minutes of class time, plus 1-2 hours of practice time, with instructor 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. See refund details.

Get Your Wizard Started

Start coding with our experienced teachers today.
Enroll risk-free with our 4 session money-back guarantee. Full guarantee details.

[Click Here]
[Click Here]