Panel 1 was great because it was so fun to focus more on the CSS and less on the web page's structure, thanks to Bootstrap. I loved using the grid and playing around with different sizes for each of the columns. It was an adjustment from Project One because it required a shift from using just HTML and CSS to relying completely on Bootstrap, there were a few times when I had to go back and make sure that all of the elements I included on my website were created using responsive design. I originally coded my h2 tags and one paragraph tag using only HTML so I had to return to those elements and fix them so they were responsive. I also decided to focus more on additional features beyond structural ones. I used a bootstrap button to link to another webpage with more information about tourism in Seville, because I thought it would be nice to have a feature with more information about the city itself instead of just information about my experience all around Spain.
Panel 1
Panel 2 presented its own, unique challenges. It was hard to pick a template when I had such a specific idea of what I wanted my site to look like from Panel 1. I chose the Agriculture template from Bootstrap Made because it had an image carousel and an overall clean look. It was difficult to decide what to keep and what to delete. I also had trouble figuring out exactly where to put things to keep the theme of my website consistent. In Panel 2, elements of my website shifted towards the study abroad experience, and more specifically the immersion experience, in general. On the testimonials.html page, there was a section with pictures of people giving testimonials about the agriculture company that the template was based on. I decided to take this and transform it into testimonials of people who went on various invented study abroad trips. I also added more images to fill the second image carousel. I did not carry over my exact button from panel 1 because the template had several functional buttons that served better purposes for the template structure. I changed the structure of my section about “the importance of immersion” slightly by adding more points and shorter descriptions. This fit the container in the template better than my grid element from panel 1 would have.
Panel 2
Panel 3 proved to be the hardest part of this project for me. I found it especially hard to figure out exactly which elements were which. When I started working on this part of the project I realized I accidentally deleted the main CSS file for Panel 2 as I was trying to duplicate the folder and move things over. I panicked, but thankfully I could use the copy I’d made of each of the HTML files and the main CSS file and rename them. Then, when I started going through and changing each element in my custom CSS stylesheet, I had trouble figuring out which part of the website was which and deciding which elements I needed to call to specifically to change them in my custom CSS file.
Panel 3