Project Details

Overview

Image of Fire Emblem Character Selector

Project Name:

Fire Emblem Character Selector



Software & Technologies Used:

-Adobe Photoshop
-CSS/SASS
-HTML
-VS Code

Client:

Fanshawe College (Assignment)



Link:

Fire Emblem Character Selector


Description:

A character selector based off of Fire Emblem Heroes, that shows information of each character via their own lightbox!

Case Study


This was a project in my first term where we were tasked with making a character selector for any series we wanted. I wanted to branch away from Pokemon for a moment and focus on another series I loved; Fire Emblem!

Our task was to display six characters, containing their own images, names, and biography. At the time, this was all hard coded. Each character lived in their own lightbox, and when you click on a character, it would open the corresponding lightbox.

At the time, position: absolute and position:relative were some of the banes of my existence. It was rather rough to place the elements how I wanted them, but in the end, with enough patience and perseverance, I managed to get the result I achieved, using the methods taught in class mixed with some trial and error too.

Since this was a Term 1 assignment, everything is hard coded. If I was to go back and revisit this website, I would take out all of the hard coded information and use an array to dynamically generate and display all of the information.

In fact, I have another project where I did just that. My Pokemon Trainer website accomplishes something similar, minus the lightboxes.

↑ To Top

Mobile Menu

X