I found that my coding process was somewhat smoother at the beginning as I got most of HTML structure done using Bootstrap. Bootstrap was especially helpful since it comes with default styling that can be easily adjusted with CSS. After inputting all of my HTML, I began formatting my HTML with CSS in mobile first, then for tablet screen sizes, and finally for desktop. A lot of the code I did were adjustments to padding and text sizes so each breakpoint had properly sized elements.

Although Bootstrap helped a lot with creating basic structure for my website, most of the time I dedicated towards this project was styling my Bootstrap components with CSS. My prototype was challenging to recreate perfectly as stylistic choices I made in my prototype couldn't be formatted with some of the Bootstrap components. I was able to overcome this by using Google Chrome's inspect element tool to see what stlying was being applied to which elements. This helped immensely when I ran into interfenences with Bootstrap styling and my own.

Although Bootstrap was helpful for base structuring, I learned that I prefer coding projects from scratch. The interferences between Bootstrap's code and mine was a problem that was frustrating to deal with, and I find styling over Bootstrap's existing styling very pain-staking. I think it would overall save me time and effort to code my HTML structure and CSS from scratch.

Structural components borrowed from Bootstrap

Borrowed background image from Unsplash

Schwarzkopf, Termina, and Gopher font families borrowed from Adobe Fonts

Animate.css library used to add animations