Project-Two (Bootstrap) Case Study
This is a case study about the website that I made using bootstrap as a project for my NMIX 4010 class.
Fall 2024
Project Overview
My goal for this project was to create a much more complex website (both in function and aesthetics) as compared to our first project with the convenient tools given to us by bootstrap.
The Problem
This project was to test my understanding of standard html and how it links jquery. Alongside this, it tested my ability to apply hundreds of lines of code and to truly understand what these blocks of code functioned as. This understanding was necessary as customizing the building blocks from bootstrap using custom css was the best way to ensure that the website is taken to the next level. The real challenge of this project was how long and tedious the coding was. Despite having these blocks of code lined up for me already from bootstrap, it was still necessary for me to carefully adjust and change the code to fit the website. These adjustments caused problems in the use of widgets (which were necessary to make the website look functional and good) and the sizes of boxes and images. Finally, I had to make sure that all of these elements of the website were responsive to changes in screen sizes (mobile, desktop, etc). Overall, this project really forces you to be a patient problem solver and creative with coding.
The Solution
My decision to make a website about the movie “Kingdom of Heaven” inspired my decisions for the design of this project website. I wanted to have images and widgets that primarily focused on revealing the world and plot of the film, especially its characters. My first step in all of this, was first making sure that the navbar and background in which it lived in was both responsive to scrolling and creatively designed. I made sure to add a background image taken from the film’s poster and a title card to accompany the navbar. One thing I made sure to stick with starting from this section, was the font theme which had a medieval look to it. Below it was the title of the website.
Then, because one of the main themes of the website was to showcase the characters, I added 4 pictures of the 4 main characters of the film.
Get Augustin Htike’s stories in your inbox
Join Medium for free to get updates from this writer.
This was actually one of the hardest parts of the entire project. Having 4 different resolution sizes for the pictures was tough, especially considering that they all had to be responsive to changes in screen sizes. The boxes in which they were placed also needed to be responsive to accommodate these shifts. Before I got it to work, this section often looked like this:
Next, is a section that I’m proud of. It was my first time using the cards element in bootstrap and I really like how it turned out. Here, each button on the bottom linked to high resolution pictures that related to their respective cards. I thought this was a clever way to showcase one of my favorite plot points in the whole film.
Next, I had a bunch of brief descriptions of the overall timeline of the film. Alongside these descriptions were the clips that showcased these events. This was not hard, but defintely a tedious section as I had more than 10 events I had to individually link.
Finally, after this portion of using bootstrap, I upgraded the entire website with a template. This template gave the website such a cleaner and smoother look to the overall feel and mood of the film that it is based on.
Results
This project, while straightforward, came with a tons of problem solving. While these are (eventually) enjoyable to get through, they were incredibly difficult to get accustomed to. The biggest challenge was getting through the first stage of the project which was making the website from the ground up with only bootstrap elements and no themes. However, once past this step, it was very fun to see the website come to life and its true capabilities with the use of a theme. In the future, I would definitely start off with using a theme first so that I do not have to deal with any (additional) conflicts with the bootstrap elements.
