Interactive Media II at UC Davis
A showcase of the web pages I built using HTML, CSS, and JavaScript
Course Description
DES 157A addresses design methodologies and practices of web-based interactive design including UI/UX methodologies, and code-based development using HTML, CSS, and (vanilla) JavaScript, commonly referred to as the “front-end stack.” Weekly tasks include attending course meetings, completing skills-based examples, as well as designing and coding four creative Studio Projects.
Students will type in all code themselves, by hand, because this is a proven method for learning to code.
Objectives
Learn Javascript
Solidify competency with HTML and CSS, while developing literacy with the JavaScript language
Apply knowledge
Complete skills-based examples while building creative studio projects alongside the lessons
Share Ideas
Communicate your thoughts in the format of a Learning Journal and articulate feedback by writing peer reviews, integrating the feedback you receive
Project 1: Mad Libs
In this assignment, we learned how to create your own Mad Libs using code! Mad Libs is a popular word game where you have an existing piece of text with blank spaces and you ty to fill in those blanks with verbs, nouns and adjectives. Usually the outcome produces some sort of wacky or funny result.
I structured the webpage using semantic HTML, then linked external resources like Google Fonts and Normalize.css for styling. Additionally, this was my first experience with JavaScript, allowing me to practice event listeners, form submissions, and extracting user input values.
All materials during this course needed to be hand-drawn or produced by the student so I had a lot of fun drawing this watercolor-style landscape of Amsterdam in Procreate and creating the “boarding pass” background in Photoshop.
Project 2: Every Picture
For the second project, we learned how to create a gallery of images that trigger JavaScript functions by clicking. This consisted of adding event listeners for ‘keydown’ events and class manipulation to show or hide image overlays. I decided to go for a Pinterest styled gallery, so I needed to use CSS grid and columns to organize the images.
This process took a bit of trial and error, but it taught me how to think like a developer to solve real-world UI challenges. I kept the design simple just to get the fundamentals down, but I later iterated on this project further for my final project.
Final: Every Picture Iteration #2
For my final project, the goal was to create a new homepage before my original Every Picture page to introduce the initial gallery of photos. My project shares similarities with Pinterest, particularly in its grid layout and the ability to open overlays with more information about each photo. I was inspired by how Pinterest can save and add photos to moodboards and wanted to incorporate that aspect. However, my project stands apart with its unique South Asian branding and logo, and offers less functionality than Pinterest.
User Test Results
1.) Some users had trouble finding which picture to hover over, but once they did, they immediately knew to click the image.
2.) User tried to click search bar, even though it was non-functional.
3.) User scrolled down on overlay even though it is supposed to be fixed positioning.
Based on this feedback, I added the overlay to around 8 photos so the user can hover around and find the correct photos. I also added a title over the search bar and have it animate like a typewriter so the user does not get confused and click a non-functional button. The last thing I fixed was a scroll bug on the overlay.
Reflections
Looking back in 2025, I’m grateful I took this class in 2023 because it gave me an excellent introduction to website development. With the rise of low-code platforms like Webflow, Framer, and Squarespace (which nehakamal.com was created with!), learning the fundamentals of code was essential before experimenting with Framer.
One area I want to improve on is setting different breakpoints for desktop, tablet, and mobile to ensure seamless responsiveness. The pages I designed in this class were coded with a fixed width based on the laptop I was using, which worked for learning but isn’t practical for real-world applications.
As a designer, I often question how important it is to learn coding or if development will always be separate role. Will we see the designer and developer roles merge with the evolution of AI? Regardless, I feel more confident in bridging the gap between design and development, finding a middle ground that helps me understand both perspectives.