During our second project, we explored how to use Bootstrap in order to build a 3-panel website. Each panel was a different variation of a one-page site including various Bootstrap elements. The first panel was built entirely from scratch using Bootstrap elements. Then, on the second panel, we imported the HTML from the original into a Bootstrap template that we selected and imported. Finally, on the third panel, we customized the CSS of the template to make the site our own.

Panel One

In making Panel 1, I learned the foundations of working with Bootstrap. I spent a significant amount of my efforts on this panel learning how to develop a multi-column, or grid, layout, which significantly improved my design capabilities. Some other Bootstrap elements I chose to work with included a carousel, buttons, and cards. These made my website more dynamic and interactive. I struggled the most with adding the carousel to this panel, and had to be very careful about which images I selected and changing the padding and surrounding features to ensure that it fit nicely into the rest of the page. Developing this panel also allowed me to decide on a general aesthetic for my website. I really enjoy the colorful palette and sans serif fonts I selected, and they guided me through my styling of Panel 3.

Panel Two

In Panel 2, I learned how to select and work with pre-made Bootstrap templates. I was really excited to learn how to do this because I think that working with templates is a really useful skill in web development. However, some components in my chosen theme were not conducive to my website’s layout, so I deleted several elements. I also added a carousel to this panel because I really enjoyed the effect mine had in Panel 1, thus I managed to copy over the HTML from Panel 1 into this website. I also had to work to resize the carousel so that it looked more pleasing amidst the rest of the content in the panel.

Panel Three

Working on Panel 3 was certainly where I learned the most throughout this process. Most noticeably, I changed the colors and fonts on the site so that it was more similar to my Panel 1 design. The template I selected initially had a very dark theme, and since I was writing about summertime, I thought it fitting that I used more vibrant, light colors and a more casual font. So, I changed the background color, colors within the grid, button colors, and even the hover states of the buttons in my navigation bar to ensure that the theme was cohesive throughout my site. In order to do this, I used the inspect tool to help me see what parts of the CSS in Panel 2 I specifically needed to change.

Some more large-scale changes I made were to the general structure of the panel. For instance, I didn’t like the look of the gradient between the first image on my page and the “Welcome” section, as I thought it had too dark of a look and undesirable spacing. So, I eliminated this section and added an introductory text block instead. I also made this blue to fit with the rest of my theme, and think it made my website look much more appealing. In doing this, I struggled with adjusting the padding and margins around the block, and solved the issue by manipulating these classes until I achieved my desired look.

Lastly, the thing I struggled with the most in making Panel 3 was reordering the images and text when you shift from desktop to mobile layouts. I spent a lot of time researching different breakpoints and how to reorder elements, and after later identifying some issues in my div element organization, I managed to achieve two clean layouts. In the future, I would like to learn more about how to optimize layout between desktop and mobile layouts on my sites.