User Interface Development

High School – Wizard Level I – Class 3

About User Interface Development

User Interface Development

In this class, we are going to be learning about what a user interface is and how to develop it to make it user-friendly. The UI is such a huge and important part of web development and can add to the user’s experience and drive behavior if done well. Whether it be utilizing things like dropdowns and forms, or making sure that the website is responsive and looks great on all devices, the power of a great UI should never be underestimated.

Learning Objectives

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

  • Understand the fundamentals of creating a good user experience
  • Design with HTML and CSS
  • Animations using keyframes and transitions
User Interface Development Class LessonsExpand All Lessons
  • 1. Introduction
    Answering some of the most common questions about UI.

    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!

  • 2. Form Validation
    Creating, validating, and styling forms.

    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.

  • 3. Flexbox
    Utilizing a flexbox using CSS.

    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.

  • 4. Timing Functions
    Creating dropdowns and using timing functions to add to the user’s experience.

    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!

  • 5. Using the Keyboard
    Increase a user’s interaction by utilizing 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!

  • 6. Midterm Project – I
    We’re halfway through so you know what that means: a midterm project!

    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.

  • 7. Mid term project – II
    Let’s keep the ball rolling by wrapping up our midterm.

    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!

  • 8. Animations and Keyframes
    For all you Harry Potter lovers, we’ll be learning about animation by making an online quidditch game!

    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!

  • 9. Media Queries
    Let’s learn some key skills to make our webpage more responsive!

    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.

  • 10. Ghostbusters
    We can work with large amounts of data using lists!

    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.

  • 11. Final Project – I
    Making a meme generator. Who doesn’t love a good meme?

    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.

  • 12. Final Project – II
    Wrapping up our final project and doing some debugging.

    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!

Capstone I

Wizard Level I Capstone

Over three different projects, students will be challenged to create websites from scratch using all of the coding skills they learned in their previous classes. This Capstone allows students to fully master everything they’ve learned so far and take charge of projects.

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.

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

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. 1 hour of class time, plus 1-2 hours of practice time, with instructors 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.

Get Your Wizard Started

Pin It on Pinterest