One of the most difficult parts of this project was thinking of an idea for my website to be centered around. Naturally, I am obsessed with sparkling water to the point where I drink up to 3-4 cans a day, so I decided to make a blog-style page with my favorite brands and flavors. Once I had my idea, this project was much more of a smooth-sailing process. Panel 1 was by far the most difficult part of the project for me, however. I have never used Bootstrap before, so that was a learning curve for sure. Similar to the last project, I struggled with the navigation bar. Once I saw the message in Slack to delete the last two lines of JavaScript, my problem was fixed. I incorporated two Google fonts (one for headers, one for body text) and created a logo for the fake blog. I tried to use minimal colors and fonts to keep my design clean and accessible.
Panel two was a much more fun process for me. Since I had my base from Panel 1, I was excited to be able to add to it with elements from the Bootstrap template. The template I chose had a lot of cool features, but I had to get rid of some of them to fit the information on my website. I was super excited to be able to fit my rankings in a pop-up feature, which allowed me to add more information in a clean, stylish format, and I liked how my nav bar was able to change colors when I scrolled. I knew there were several things I wanted to change in panel three, though, such as the coloring of the page, adding my carousel from panel 1 back into the website and adding logos that acted as buttons for the “Reviews from Other Critics” section. Interacting with a pre-made Bootstrap template helped me better understand how the CSS framework operates. If I could change one thing about how I did Panel 2, I would have chosen a theme that already had a carousel as the top image. I was unable to change this without messing with the CSS.
This panel was a lot more difficult than I expected. First, I changed the fonts and colors to match the ones I used in Panel 1. My template had over 10,000 lines of CSS, and I had deleted parts of the template in Panel 2 because I did not need it, so it was difficult to find which font elements belonged to my elements at first. This panel gave me good practice of knowing what ids/classes went with what elements, and how to find them within CSS. Additionally, I added the carousel from Panel 1 back into Panel 3, which was a tricky process. After much internet research, along with some trial and error, I finally figured it out! I am very proud of that. I also added media queries for the overlay text on the carousel so it would be appropriately sized. I also changed the navbar so that the logo icon was larger, the bar was not transparent when at fullscreen, and it had the same colors/fonts as my Panel 1 one. I kept the navbar links aligned to the right instead of the left because I felt like it looked better. I also gave this panel a thicker font version of "Poppins" than Panel 1 because I felt like it looked better with the theme. Finally, I changed the buttons/links at the bottom in Panels 1 and 2 to the websites' logos for the purpose of aesthetics.