This week I made some progress in achieving my project’s main goal by finalizing the look and functionality of my banner. Last week, I had the banner set up, but it was taking up too much of the screen in the vertical direction. This week, I worked on making sure the banner was the proper height that I wanted it to be and also properly responsive with all different devices, in addition to the logo that is placed over top of the banner. Next, I attempted to insert social media icons for the band’s Facebook, YouTube, and Bandcamp pages. This was a lot harder than it seemed at first because I had to figure out whether to insert ready made icons using some online icon tool (which require special setup that I experimented with) or to just use images of the social media websites’ logos and add a hover effect on them. I chose to go with the latter and the social media icons are now functional. I chose to put them on the bottom of the page, in the footer. I also added some formatting to my page, such as a background image, as well changing up some of the padding.
Something I learned through my work this week was how to work with hover effects in CSS. There are many different hover effects and they can easily be applied to any item on your website if you reference their class and have a stylesheet that will apply those effects. I also learned a little bit more about responsive design from trying to make sure that the icons would be properly sized on many different screen dimensions.