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
- 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!
- 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.
- 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.
- 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!
- 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!
- 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.
- 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!
- 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!
- 9. Media Queries
- 10. Ghostbusters
- 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.
- 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!
#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.
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.