User Interface Development

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!

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.

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.

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!

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!

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.

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!

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!

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.

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.

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.

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!