Design comparison
Solution retrospective
I am not very familiar with media queries, but I am trying to learn. I have gained a bit more understanding in this project. What I did not fully understand in the project was the difference between the width shown in Figma and the width I see on the screen. Nevertheless, I achieved a fairly close result. I set a specific height, but I am not very happy with it.
What specific areas of your project would you like help with?I am not sure whether I should use the values in the design file exactly as width and height, or if I should evaluate them myself.
Community feedback
- @danielmrz-devPosted 5 months ago
Hey there! šš½āāļø
Congrats on finishing the challenge! ā
Your project looks awesome!
Here's a tip that might interest you:
š When you have different versions of the same image, consider using the
<picture>tag.This will help ensure the correct image loads on the user's device, saving bandwidth and boosting performance.
Example:
<picture> <source media="(min-width: 768px)" srcset="{desktop image path here}"> <img src="{mobile image path here}" alt="{alternative text here}"> </picture>Hope you find this useful!
Great job overall!
Marked as helpful0@tunaertenPosted 5 months ago@danielmrz-dev Thank you for your comment. To be honest, I didn't think using two consecutive img tags made much sense while writing the code, but I wasn't aware of the method you suggested. I also saw it while reviewing others' code in the same project. Frankly, I did some research to understand what it was. Additionally, knowing that using it this way positively impacts performance is great. I will pay attention to this in my future projects. Thank you.
1 - @LucasJCFreirePosted 5 months ago
Good Job! Its is perfect.
Marked as helpful0
Please log in to post a comment
Log in with GitHub
Join our Discord community
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