@Ikuewumi
Posted
Hi✋. Awesome Project. About your questions, here are my suggestions:
- In manipulating an image, especially its dimensions without squishing the image, I don't think you'll find a better solution than the css
object-fit
property / family of properties. You can read more on this on the MDN website, but you could use it like so:
selector {
object-fit: cover;
object-position: top left;
width: 300px;
height: 100%;
}
- The mobile first approach is popular because generally, you don't have to do a lot to build the mobile version of a site (it usually just involves stacking the contents on top of one another) and it is inherently responsive. So the idea is to write the mobile-first styles, then use Grid or flex to add complexity to the layout as needed.
I hope you find these helpful. Overall, great project. Feel free to ack more questions and keep coding👍,
Ayobami