CSS Page: http://imanas.shanghai.nyu.edu/~cc5581/week01/portfolio_chloechan.html
I really enjoyed this project, I thought it was a really great way to figure out for ourselves how to add different styling onto a simple HTML page. I knew that this was a page that I wanted to come back to in the future, so I definitely put a lot of effort into making it look nice and pretty and including my portfolio. I had a pretty smooth time styling my page, however, towards the end of styling I hit two major problems that lead to me pouring hours and hours into trying to figure out the problem.
On my homepage, I decided to include a bunch of images that documented a portion of my travels because it’s a big part of who I am as an individual and it’s something that I love doing, and spend most of my money on. However, each image was huge, and I couldn’t figure out how to resize it using CSS because either the proportions would be warped, or they weren’t all the same, therefore I ended up just resizing it in HTML. Even though I had resized the image properly, the images were not lining up together. They ended up positioning themselves in really awkward places with huge gaps in between each image even though they were organized quite nicely in rows. I poured hours on the internet trying to figure out how to remove the huge gaps of space in between the images but I couldn’t solve the problem. I then decided to put flexboxes around the images in rows so that I could remove the huge spaces in between the images. This worked, and eventually the lined up together, however, because the images were of different sizes, there were still gaps in between images because one image would be portrait, and the other two in the row would be landscape.
I ended up going to see the fellows and realized that no matter how much I tried to reformat the images, I wouldn’t be able to achieve a stacked format without using grid, which was something that was much harder to do than just using flexbox. So, to close the gaps so that they weren’t as obvious, I just resized the portrait images that I used to make them less tall so the gaps would not be as obvious as they were if the portrait images were quite tall.
The second major issue that I ran into was when I uploaded my final website onto Cyberduck, although all of the images had shown up when I was creating the page, after uploading them to the server, the photos failed to show up, it took a lot of trial and error before I realised that the images were labelled .JPG in my folders and I had labelled all my images .jpg in atom which caused the discrepancy. After changing the extension, all the images showed up again and it was working great!