Project Two: Bootstrap Triptych

Panel 1

Panel one was, by far, my favorite panel to create. Building it from scratch, it felt much more personalized. Learning Bootstrap was a lifesaver for me since these newly acquired skills allowed me to finally make the responsive website I dreamed about making for project one!

The grid structure was actually a little bit more difficult for me to get the hang of than I intitally throught. However, building it from scratch meant I also had the most trouble with it sadly.

I had some trouble placing elements exactly where I wanted them in the grid, but through trial and error, I was able to get there eventually! Also, one of my biggest struggles was getting the modals on my website to work. For a very long time, I glazed over the fact that I wasn't linking my modals to open correctly, so I felt an intense sense of relief when I finally figured it out! I can say I'm pretty satisfied with how this turned out, I am extremely proud of what I made!


Panel 2

Panel two was pretty fun to make. At first, I was overwhelmed with the amount of content the Bootstrap template I chose contained. After playing around with it for a while and looking at the code that each component contained, I felt more comfortable with manipulating/changing it to fit what I needed for my website.

Additionally, I needed to take out a lot of code since I didn't need most of it! I got a bit anxious every time I took out a huge chunk of code, since I was afraid I was going to break the whole website in the process. Overall, this panel was a bit less stressful than panel one, since all the components I needed were there and I essentially just had to copy and paste any headers/paragraph text I had on panel one.


Panel 3

I went into this panel thinking it was going to be the easiest panel to create, since I thought it would involve just applying some CSS and going along my way. But boy was I wrong.

I was unaware of how tedious it was to have to go through the inspector and find which classes/ids corresponded to each element and have to apply custom CSS to the parts that I wanted to change. And when I thought I was finished, I would play around with the website, clicking and hovering on links, just to discover that some elements still weren't changed, and I had to go through the tedious inspecting process again.

Easily, the hardest part of this panel was changing the navigation bar elements. every time I would think I changed the correct class or id would end in me slowly losing my mind as my efforts were futile. upon inspecting I found a selector by the name of “:root” in which it seemed like all the colors were listed. like background color, accent color, etc. so I took advantage of that, and I can say it made me job a hell of a lot easier. I still had to go in and change certain elements individually, but it definitely helped a lot!