Design comparison
Solution retrospective
I feel than my code is not perfect. I want to optimize my code and the img. If you want, we can chat about that!
Thanks for your time :)
Community feedback
- @AdrianoEscarabotePosted about 2 years ago
Hi McMuffin1022, how are you? I really liked the result of your project, but I have some tips that I think you will enjoy:
I noticed that you made your entire code using divs! this is not a good practice since div has no meaning, to improve the structure of your code we can use semantic elements that have meanings, not only for us who are developers, but also for screen readers, that is, a person who uses tools to browse the web, can better understand the content if our code is well written with semantic tags and some other features to improve accessibility!
The rest is great!
I hope it helps... 👍
Marked as helpful0@McMuffin1022Posted about 2 years ago@AdrianoEscarabote Hi Adriano! I am very good! It's true that I use the div every time. Usually I use Flutter, so this is an easy way to work for me. I'm going to check to understand the semantic tags.
You know, I think clean code is the big challenge when you're doing code! We are kind of artists
1 - @tanererenPosted about 2 years ago
Hey, the project looks great - well done!
In order to optimise the image and make it mobile responsive the first step would be to use the
<picture>
element - it's a really useful tool that allows you to have multiple images that changes with the viewport width. It saves on writing loads of CSS media-queries for the image!You would replace your
<div class="card__image"></div>
with:<picture> <source media="(min-width:750px)" srcset="images/image-product-mobile.jpg"> <img src="images/image-product-desktop.jpg" alt=""> </picture>
The browser will look for the first <source> element where the media query matches the current viewport width, and then it will display the proper image (specified in the srcset attribute).
The <img> element is required as the last child of the <picture> element, as a fallback option if none of the source tags match
Let me know how you get on!
Marked as helpful0@McMuffin1022Posted about 2 years ago@tanereren
Ohh thanks for the info! I have search 1 or 2 hours just for find that but with no result... Thanks for the answer ! :) I will check for update my project with your modif. I will come back with an update!
1@McMuffin1022Posted almost 2 years ago@tanereren Hi, i have try it. Thanks for the advice ! :)
0
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