User Interface Development

In the first lesson of our UI-focused web design course, students explored the concept of User Interface (UI) by analyzing the usability of everyday platforms like WhatsApp, TikTok, and government apps. They discussed what makes an interface intuitive or cluttered and why good design matters. To apply their learning, students created a custom avatar project, learning how to collect user input using radio buttons. This engaging activity laid the foundation for designing with empathy and building user-friendly web experiences.

In this lesson, students learn the importance of form validation while building a visiting card generator. They ensure that forms cannot be submitted with empty fields, reinforcing the concept of input checks. To add interactivity, they use jQuery animation functions to show and hide the back of the card—creating a polished and dynamic user experience.

In this lesson, students dive into UI design principles and explore how to achieve symmetry using grids. They are introduced to Flexbox, a powerful CSS layout tool, and use it to build a tech articles page with both list and grid views. Along the way, they discover new CSS properties that help them create a responsive and well-structured layout—bringing modern design techniques into their workflow.

In this lesson, students explore JavaScript timing functions to schedule code execution after a set duration. They put their knowledge into practice by building an Activity Timer app—perfect for workouts or any timed activity. As a bonus, they enhance the user experience by adding sound effects that play while the timer runs, making the app both functional and engaging.

In this lesson, students are introduced to one of JavaScript’s most essential data structures: Objects. They learn how to store and access data using object properties, and explore built-in methods like `Object.keys()` and `includes()`. To make things interactive, they use keyboard events to trigger sound effects for each key press—culminating in a fully functional drum pad that responds to keyboard input.

In this lesson, students begin their midterm project—Word Scrambler. Using an external JavaScript file with an array of 100 words, they display a random word and scramble its characters before showing it on the screen. Along the way, they explore useful JavaScript methods for working with arrays and strings. As a bonus, they enhance the visual design by applying the `letter-spacing` CSS property. This project will be continued in the next class.

In this lesson, students continue developing their Word Scrambler project by adding game logic. They implement input validation to check if the typed word matches the original and introduce a 60-second timer to increase the challenge. If the player runs out of time, they lose the round. To track progress, students also add a score counter that records the number of correctly solved words—making the game both fun and competitive.

In this lesson, students explore the fundamentals of web animations—key techniques that bring modern websites to life. They apply these concepts to create a minimalist Quidditch game, where users try to catch a Snitch. Along the way, they learn about CSS transitions, hover events, disabling interactions when needed, and defining smooth animations using CSS keyframes.

In this lesson, students are introduced to the concept of responsive design—websites that adapt seamlessly to different screen sizes, from mobile phones to laptops. With the growing variety of devices, responsiveness has become a crucial aspect of modern web development. By the end of the class, students build their own portfolio page and make it responsive using CSS media queries.

In this lesson, students learn how to display information using HTML lists—both unordered (`ul`) and ordered (`ol`) formats. They also explore the Unsplash Source tool to display dynamic images that change on each refresh. As a bonus, students customize list icons and even use their own images as list markers, adding a creative touch to their content.

To wrap up the course, students put their skills to the test by building a meme generator—a fun and creative way to apply everything they’ve learned. Using helper functions to fetch data from the ImgFlip API, they create a meme selector complete with input boxes for custom text. By the end of the class, students are confident in building advanced, responsive layouts and integrating APIs into their web projects.

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!