I did a mobile first approach where I used flexbox for everything except the 4 images under 01, which was done with grid. My reasoning for this was that I imagined flexbox to be more suitable for the main layout than grid. For example, flexbox with the desktop hero image and description was easily achievable, where I used order
to put the two images on both ends, and the text in the middle.
Next time I might try grid. Please let me know if you think grid is better for this layout, and why.
What challenges did you encounter, and how did you overcome them?The most challenge I went through was figuring out how to code out the footer image with the blue overlay. I solved it by using picture
and source
elements in html rather than css background-image (for responsive reasons), and adding a background-color in css for the footer
selector.
I also had a bit of trouble planning out how to code the hero image for the desktop view, but I solved it by using display: none;
Please let me know if grid was a better choice for this challenge.
In addition, I feel like my media query may have a lot of redundancy. If there's better ways to code responsive sizing, please let me know. If there's any other area where I could use more work on or I should change, please let me know as well. Thanks for your time!