Digital Legos: The Art of the Brick

Photo by James Pond on Unsplash

Link to Github: Here

Hurdles:

• Trying to decide what components to add: I began this project with trying to work off of my previous website (“Ode to Merkato”) and that posed some complications with having various folders with similar names and navigation within Terminal, trying to add new templates to existing code, and trying to fit the square peg (existing code) in the round hole (code templates from bootstrap). With the advice of a classmate I decided to start from scratch and begin fresh and new.
• Deciding a new topic: This was a minor hurdle, but nonetheless I began with thinking about legos, which then lead me to finding the slightly more focused topic of the exhibit “The Art of the Brick” at the Denver Museum of Nature and Science.
• JS coding: This is tied to my above mentioned hurdle of trying to fit established code into a new template. When I started initially, I did not have the Bootstrap set up template in my code, which included all of the JS needed to run Bootstrap content. Once I began afresh and put in the new template, things ran much smoother.
• Making a Carousel: The basis of what I wanted to add was a carousel of images with captions and this was the most difficult part to figure out. I finally got the Bootstrap document template set up, linked my stylesheet and put in the code for a carousel. I assembled my images and once that came together it was time to input my images in the example code. Simple errors like not having enough components in the original list where we added new slides caused problems (so I added more elements to the list) and then in one image I typed the name incorrectly. There is a little bit of a lag with loading captions at times, but overall with the deeply appreciated help of Heather Kraft, I was able to build another site!

What worked and what didn’t?:

• The carousel finally worked!!
• …But the background color for the captions did not work and I finally gave it up. The white text worked for the most part on the slides so I just decided to go with it.
• I wanted to theme the text around Legos and their recognizable primary color branding. However, colored text can very quickly look like a podunk website. Therefore, the title was the only text that got a creative type treatment.

New Tools:

• Javascript: I did not use any JS on my previous site so tackling this hurdle was a whole other animal. Now it’s working for me!
• Bootstrap: Since I made my previous site from scratch it was all new to me to use a template and this made all the difference in the world. Once I began on a new project, got the template, then began to add other elements, the workflow was much smoother.

Basic Explanation: To break it down into simple terms, I used html to sort out my type content, CSS to style the font, colors, spacing/margin, and alignment, and JS to create an interactive carousel complete with buttons to change the slides, and a progress bar at the bottom to show the viewer where they are at. All of this was possible by starting simple, asking for help, and using templates and content from Bootstrap to make something new.