NEW Holiday AI Classes View Schedules
Student Login | Parent Login
Coding Classes for Kids, Teen Boy with Laptop

Course Description

In User Interface Development, the third course in Wizard Level 2 of our high school program, students learn how to design and build beautiful user interfaces. The user interface of an application drives the user experience, and developing a functional user interface is an in-demand skill. Students will learn to create user-friendly web forms, adjust the UI for different devices and screen sizes, and add animations to create a pleasing user experience. After finishing User Interface Development, students are ready to show off what they’ve learned in the Wizard Level 1 Capstone course.

Coding Classes for Kids, Teen Girl with Laptop

Learning Objectives

When students complete User Interface Development, they will be able to:

  • Create functional user interfaces that make using websites and web applications pleasant and easy
  • Design advanced layouts with HTML and CSS that look beautiful on a variety of devices and screen sizes
  • Use animations to assist and engage users as they interact with websites and web applications
Level II


These courses must be completed before User Interface Development:

User Interface Development Class LessonsExpand All Lessons
  • UI class lesson 1
    1. Introduction

    In this lesson, we are going to learn some important information about UI, the user interface. First, we will begin by defining and understanding what UI is, and then we will figure out what good and bad UI look like. Afterwards, we will take a stab at creating some good UI by making an avatar creation web app!

  • UI class lesson 2
    2. Form Validation

    In this lesson, we are going to learn about what forms are and how to make them! Forms are an important part of most websites because they are used to take valuable information from the user as well as to sign in or register. That’s why in this class we are going to revisit buttons to help us make our own forms for our project.

  • UI class lesson 3
    3. Flexbox

    In this lesson, we are going to use flexboxes to make a website on cool articles! To begin, we are going to take another look at important HTML/CSS syntax to help us make our card-like flexboxes. Afterwards, we will learn how to incorporate tech articles to preview on our website.

  • UI class lesson 4
    4. Timing Functions

    In this lesson, we are going to learn about a very important tool: timing functions. Timing functions can be used in a variety of ways, including kitchen timers, date countdowns, and video game mechanics timers. However, in this class we will be using it as an exercise timer to create our very own personalized online gym!

  • UI class lesson 5
    5. Using the Keyboard

    In this lesson, we will learn about how to use our keyboards to take input in order to increase interactivity in our website. We will do this by creating a drum pad project to make some fun beats!

  • UI class lesson 6
    6. Midterm Project – I

    In this lesson, we will work on our midterm project: a word scrambler game! We are going to use what we learned in previous sessions to tidy up the UI, set up inputs, and create scrambling buttons. After today, we will have a great skeleton for a basic scrambler game.

  • UI class lesson 7
    7. Mid term project – II

    In this lesson, we will add some complexity and functionality to our scrambler game. To do this, we will add some timers and counter variables to make the game a little bit more challenging as well as to keep track of progress made. After some debugging and coding, we’ll finish our scrambler game!

  • UI class lesson 8
    8. Animations and Keyframes

    In this lesson, we are going to be learning about how to animate objects by creating a quidditch game. We are going to talk about position, movement, and hover events in order to add some complexity to our game. When this session has ended, everyone will have a cool web app quidditch game to show all of their friends!

  • UI class lesson 9
    9. Media Queries

    In this lesson, we are going to learn about how to make a more responsive website. In order to make our website work on different browser sizes, tablets, and phones, we are going to use JavaScript to deep dive into media queries. This will ensure that our website stays beautiful and consistent, no matter how much it is resized.

  • UI class lesson 10
    10. Ghostbusters

    In this lesson, students will create a ghostbusters game using the programming concepts that they’ve learned throughout the semester. Students In this lesson, we are going to learn about how to use and create lists in our website. In order to do this, we are going to be creating a travel journal project to keep track of the places we want to visit. In this class, we are going to be using a combination of JavaScript and HTML to create interactable lists using list tags.

  • UI class lesson 11
    11. Final Project – I

    In this lesson, we are going to start working on our final project: a meme generator! We are going to be using everything that we have learned so far to work on our project and ensure that it has a great UI. In this class, we are going to utilize dropdowns, embedding images, input boxes, and more.

  • UI class lesson 12
    12. Final Project – II

    In this lesson, we are going to be finishing up our meme generator. Some of the final touches that we will be adding include implementing error checking in order to ensure that memes aren’t created without any text. After this is completed, we’ll be done!

Class Schedule

All students start in Intro to Python 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.