NEW Holiday AI Classes View Schedules
Student Login | Parent Login
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 complex web applications using industry-standard programming patterns. They’ll learn how to use validated inputs and forms to enhance the user experience of their web applications. They’ll also get hands-on experience with advanced CSS concepts, like variables and motion paths, and learn how to use local browser storage to retain data. 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 interactive web applications that can take various types of user input.
  • Use advanced CSS properties for complex layouts and optimize code quality.
  • Able to retain small amounts of data in their web applications using local browser storage.
Level II


These courses must be completed before Web Interfaces:

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

    In this lesson, students revisit the JavaScript concepts they learned in previous courses. This lesson aims to use jQuery animation and timing functions to create a pirate-themed chase game. The player must collect the treasure coins before the enemy reaches them to win. They learn to control jQuery animations using the stop() function or run a function after a specific animation ends.

  • Web interfaces class lesson 2
    2. Getting Starts with Inputs

    In this lesson, students learn how to add inputs to their web pages. They also use jQuery functions to retrieve values from those input boxes. By the end of this lesson, they create a form with a question and input for an answer. If answered correctly, the project reveals a secret ingredient for a bakery. As a bonus, they also learn to add fade or slide animations using jQuery.

  • Web interfaces class lesson 3
    3. Continuing with Inputs

    In this lesson, students continue their journey with inputs. Instead of text or number inputs, they use another method to get input from the user, by using radio inputs with dropdowns, which allows them to select any of the given choices. They create a questions page for an Image Quiz in this lesson project. To win, answer all questions correctly.

  • Web interfaces class lesson 4
    4. Validating User Inputs

    In this lesson, students learn how to group and validate multiple inputs. They use the form tag and add different validations to get an email in the correct format. Additionally, they ensure there are no empty submissions, and set a limit to the number of characters in the textarea input. By the end of this lesson, they create a form that generates a customized birthday card greeting, which they can download and share with friends.

  • Web interfaces class lesson 5
    5. Mid-term Project I Photo Editor

    In this lesson, students start with the mid-term project of this course, Photo Editor. They use Flexbox to create a responsive layout of the editor and radio inputs to select a photo. This lesson focuses on the basic design and styling of the photo editor application. They will continue from where they left in the next lesson.

  • Web interfaces class lesson 6
    6. Mid-term Project II Photo Editor

    Students continue with the mid-term project from where they left off in the previous lesson. In this lesson, they work on adding options like changing the style of text that they can add to the photos. Also, they use the draggable() function in the jQuery UI library to implement the stickers functionality. As a bonus, they use the download() function from the CodewizardsHQ in-house library to download the edited photo.

  • Web interfaces class lesson 7
    7. Creating Link Preview Using Meta Tag

    In this lesson, students learn a more professional way to write their HTML code using semantic tags like header, section, and footer. In addition to that, they also work on link previews of the page using meta tags. Using these meta tags also improve the SEO of the page. This lesson project is to create a landing page for the Paint app they did in the previous course.

  • Web interfaces class lesson 8
    8. Using CSS Variables to Add Themes in Page

    In this lesson, students witness the power of CSS. Using CSS variables, they can change the entire appearance of the webpage. This concept is vastly used in many websites to add a dark mode to their application. The lesson project is to add themes to an invite page of a gaming website called GameFest. Meanwhile, they also learn how to add or remove classes to an element from JavaScript.

  • Web interfaces class lesson 9
    9. Using CSS Combinators with Todo List

    In this lesson, students learn about lists in HTML. They use the lists to set up a Todo list application. They can add new tasks, mark them as complete or even delete the completed tasks from the page. In addition to lists, they also learn about combinator selectors to style an element differently based on its parent element.

  • Web interfaces class lesson 10
    10. Using Local Storage in a Notepad App

    In this lesson, students learn how to retain information on a webpage even when they close it. They use the browser’s local storage to store small bits of data the user provides, where they can retrieve the saved data on page load. They implement this logic to create a notepad app, which users can use to jot down thoughts quickly, and it would stay there for as long as they want.

  • Web interfaces class lesson 11
    11. Final Project – Activity Tracker

    This lesson marks the end of this course with a final project, Activity Tracker. This project aims to revisit all the concepts they learned throughout the course and implement them in a single project. In this first half of the final project, they create a form with input validations to select an activity and start the timer.

  • Web interfaces class lesson 12
    12. Continuing with Final Project – Activity Tracker

    In this lesson, students complete their final project, Activity Tracker. They show the completed activities in a list and stored them in the browser’s local storage. In addition to that, they add a progress bar using the jQuery animate() function to show the remaining time of the timer. As a lesson bonus, they can add sound effects to enhance the user experience of using this timer.

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.

  • loading icon

#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
1×1 Office Hours (Advanced Courses)
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.