Submitted over 1 year ago
Product-preview-card-component using grid and flexbox.
@NugyTomas
Design comparison
SolutionDesign
Solution retrospective
Any problem I had i found online so no questions but if anyone have some tips and tricks I will be glad for anything! :). Happy coding.
Community feedback
- @0xabdulkhaliqPosted over 1 year ago
Hello there 👋. Congratulations on successfully completing the challenge! 🎉
- I have other recommendations regarding your code that I believe will be of great interest to you.
PiCTURE TAG 📸:
- Looks like you're currently using media queries for swapping different version of
image
, So let me introduce thepicture
element.
- The
<picture>
tag is commonly used for responsive images, where different image sources are provided for different screen sizes and devices, and for art direction, where different images are used for different contexts or layouts.
- Example:
<picture> <source media="(max-width: 768px)" srcset="small-image.jpg"> <source media="(min-width: 769px)" srcset="large-image.jpg"> <img src="fallback-image.jpg" alt="Example image"> </picture>
- In this example, the
<picture>
tag contains three child elements: two<source>
elements and an<img>
element. The<source>
elements specifies different image sources and the conditions under which they should be used.
- Using this approach allows you to provide different images for different screen sizes without relying on CSS, and it also helps to improve page load times by reducing the size of the images that are served to the user
- If you have any questions or need further clarification, you can always check out
my submission
and/or feel free to reach out to me.
.
I hope you find this helpful 😄 Above all, the solution you submitted is great !
Happy coding!
Marked as helpful2 - Account deleted
Nice work ✨, congratulations
here is some suggestions for your code:
- you can remove the first
div
tag, and take theflex-container
class's design to thebody
design instyle.css
file - you should write
min-height: 100vh;
instead ofheight: 100vh;
to make sure that thebody
will expand if the height is more than the screen height - I think you should remove
image-container
'sdiv
tag, why do you need it ? - you should minimize the size of tags in the mobile screens, you can use percentage instead of pixel units
- you should replace each
div
tag with HTML5 sematic tags, like:<main>
,<section>
,<header>
,<footer>
and go on
Good luck in the next challenges, keep going on 🔥
Marked as helpful1 - you can remove the first
Please log in to post a comment
Log in with GitHubJoin 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