User Interface Development
High School – Wizard Level I – Class 3
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. IntroductionAnswering 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 ValidationCreating, 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. FlexboxUtilizing 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 FunctionsCreating 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 KeyboardIncrease 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 – IWe’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 – IILet’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 KeyframesFor 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 QueriesLet’s learn some key skills to make our webpage more responsive!
- 10. GhostbustersWe can work with large amounts of data using lists!
- 11. Final Project – IMaking 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 – IIWrapping 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!
#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. 1 hour of class time, plus 1-2 hours of practice time, with instructors 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.