Web Interfaces

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.