Responsive Images and Layout Website

Today we were tasked with replicating a website from a choice of three, including the webpage having responsive images and layout. This is the website I chose to emulate.

The original website that I was aiming to recreate

The website I chose is full of images of different shapes and sizes, and it has a very sporadic layout, so I felt it posed a good challenge for me to test my skills. I created the layout first, using flexbox elements to have divs cascade horizontally and wrap onto the next line, as opposed to everything falling vertically one after the other. From here, the challenge was to make the site mobile friendly, and this means making all of the divs fall vertically one after the other, the exact thing I was trying to get away from. This has reaffirmed in my mind, the importance of design a website 'mobile first', where you create the website for the mobile experience and then adapt it for tablets, then laptops, and so on. To make the site fall vertically, I used a media query to take out all of the flexbox functionality, and set all of the divs' widths to 100%. This way, everything was vertical, a much more user friendly experience on mobile devices.

Here is a link to the site, hosted on Github.