HTML and CSS

Exploring interactive web design through HTML, CSS, and JavaScript

Project Overview

In my advanced interactive media class, we learned how to implement JavaScript into our pre-existing knowledge of HTML and CSS. Throughout the quarter, we coded three meaningful products which included: coding a Madlibs game, telling a narrative through photos, and creating an interface for an existing piece of code.

Year
Winter 2021 (10 weeks)
Platform
Visual Studio Code
Role
Designer,
Developer

Project 1

Mad Libs

For the first project of this class, we worked on form design and overlays in order to create our own mad lib game. The task of this project was quite straightforward -- design a form that collects data from the user and displays it back once the form is submitted.

Sketch

I decided to create one themed for Valentine’s Day since the holiday was coming up, and the form would create a love letter based on the inputs from the user. The form design was quite simple and uses a heart motif throughout to express the theme of the mad lib.

Refined Sketch

At this stage, I started to think more about the design system and the colors and fonts that I would be using. I decided to go with fonts that were more scripted to allude to the love letter that would be created. I obviously decided to go with a pink color scheme with a pattern of hearts as the background.

My overall inspiration for this design was to mimic a postcard, almost like if someone were to mail this card to their crush. The completed form output would appear on top of the entire form, much like how you would flip over a postcard to read the letter on the back. I also decided to highlight the user’s form inputs on the submission so that the user could easily identify where they participated in the mad lib.
Form design
Form output design

The Code

The main components of the code for this assignment was made of a template literal that collected the user’s inputs and placed them within the completed mad lib. Within the template literal, I also had to do a lot of in-line styling for the form as the HTML of the form was being replaced with the completed madlib. 

The other main part of this project, and also the most confusing part for me, was figuring out how to show and hide the overlay of the completed submission when the user presses the submit button. After hours of troubleshooting and attending office hours, I landed on a solution that uses an event listener and two classes - a “hidden” and “showing” class in order to get the completed submission to show on top of the form field. When the user exists out of the love letter, the form is then reset, ready for the user to input new information.

Project 2

Game of Pig

This project focused purely on visual design through creating an interface for a dice game called “Game of Pig.” For this project, the JavaScript was already given as a basis for the code, and I was given complete creative freedom as to how I wanted the visual interface to look like. Sound was also used in this project to give the game more personality and interactivity.

Sketch

For this project, I wanted to go for a very 8-bit inspired looking, drawing inspiration from old video games such as Tetris and Pacman. As far as the format goes, the player will start by reading the rules before going down to the actual game in which a scoreboard is shown on the right side. A dialog box also appears on the bottom of the game when an action is needed.

Refined Sketch

For the colors and typography, I decided to go for very 8-bit-like fonts as well as bright, neon colors against a black background to pay homage to video games from the 80’s. The main design elements include pixelated borders and playful dice graphics.

Final Project

Every Picture

For the final project, I was tasked with taking a previous project and expanding on it even further with all of the skills that we have learned in the class thus far. I decided to elaborate on a studio project called “Every Picture,” in which I created a site around photos detailing a collection that I had, creating a visual narrative.

Sketch

For the initial project, I focused it around photos of my skincare products and what skincare meant to me. I started with a few rough sketches of the layout, and eventually landed on a landing page style, categorized by scrolling and sectioning.

I also wanted to emphasize the morning and night time skincare routine that I have, which would be shown through a color change in the background once the user scrolls to a certain part of the page.

Refined Sketch

For the colors and typography, I decided to go for very 8-bit-like fonts as well as bright, neon colors against a black background to pay homage to video games from the 80’s. The main design elements include pixelated borders and playful dice graphics.

The Code

The first major piece of code was the timed text phrase on the hero image. In order to achieve this, I created a timer and an array. Every two seconds, the inner html of the phrase would be replaced by a word in the array.

The second major piece of code was the code for the background color changes that signify different sections on the page: morning, night time, and everything in between. I created a switch statement that triggers a color change when the user gets down to a certain amount of pixels down the page.

The last piece of code that I spent a lot of time on was the type animation for the quotes, which is triggered once the user clicks on the button. When the button is clicked, it disappears and shows a quote being shown on screen with a typewriter effect.
Code for the text on the hero image
Code for color change
Code for text showing when button is clicked

Hi there!

If you're here to connect with me, then you're in the right place! Feel free to reach out to me on my socials if you want to see what I've been up to.
Want to send me a message?