Design comparison
Solution retrospective
I am proud to complete this without too much trouble. Although it is slightly different than the design provided. I feel this is more visually appealing.
What challenges did you encounter, and how did you overcome them?The problem I encounter was the image element. In the beginning I used img element tag but then ran into responsive issue when in larger viewport. In order for me to overcome this, I used the image element tag in mobile viewport and background image on desktop viewport while hiding the image element tag.
Community feedback
- @danielmrz-devPosted 4 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 helpful1 - @Kai0LeePosted 4 months ago
I just have some comments on the visuals - overall, I think your design looks nice as well - I just think if you added some rounded edges on the card it would look a little better (for laptop view). The mobile version looks good. I think your code is readable and your design does look good on different screen sizes.
Marked as helpful1@JamesYcodePosted 4 months ago@Kai0Lee
Thank you for your feedback and tips! I have added the round edges for tablet, laptop and desktop. It does look better!
0
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