What are you most proud of, and what would you do differently next time?
I took way more time than needed on this challenge, so inshallah I'll try to be faster next time.
What challenges did you encounter, and how did you overcome them?
This was a good challenge, as it differs from the other challenges from the learning path with the presence of two images one for desktop and another for mobile. It took me some time to figure out how to make it work when I deployed it on GitHub.
First, as I've been using the mobile-first design I put the mobile image on the HTML with the `` tag and then changed it with a media query, it did work locally but not on deployment.
So to make it work, I've put both the desktop and mobile images on the html file, and using the media query I've changed the display property from "none" to "block" and vice versa and that resolved the problem.
What specific areas of your project would you like help with?
I've got a problem concerning the performance of this page on mobile devices as I couldn't surpass 93/100 score on Lighthouse. I tried to change the image format from .jpg to .webp which dropped the image size by nearly 50%, and I also changed the fetchpriority attribute of the images using both values "low" and "high" but it didn't work.
I would love to get some help from you guys on that.
@Bamo-D-Abdallah
Posted
it is better to use rem instead of px.
@AymaneOnline
Posted
@Bamo-D-Abdallah Do you mean that I need to change every px in the code to rem ?
@Bamo-D-Abdallah
Posted
@AymaneOnline yes, never use px, always use rem and for some cases use em.
Even for @media use rem:
@media (min-width: 30rem) {
.card {
max-width: 10rem;
}
}
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord
