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!
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.
Prerequisites
These courses must be completed before Web Interfaces:
- Wizard Level 1
- Wizard Level 2, Course 1 : Responsive Web Development
- Wizard Level 2, Course 2 : Interactive JavaScript
-
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.
-
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.
-
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.
-
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.
-
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.
-
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.
-
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.
-
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.
-
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.
-
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.
-
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.
-
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.
#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.
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.