
Responsive Product Card With Semantic Tags, Flexbox and Media Queries
Design comparison
Solution retrospective
I tried to write semantic and well-structured code, focusing on organization, legibility, and accessibility. I'm using these challenges to research better ways to do things, one point at a time.
What challenges did you encounter, and how did you overcome them?Perhaps the main focus here is to ensure the correct image appears at the appropriate size. I addressed this by using media queries, alternating between display: none
and display: block
.
I would appreciate feedback on code structure, the use of semantic tags, accessibility, the application of BEM methodology, or any obvious areas where I might have complicated things.
Community feedback
- P@Stv-devlPosted 3 days ago
Hi, good work,
. For accesibility you can write different alt for every image. For exemple alt="chanel parfum mobile" and alt="chanel parfum desktop" alt="shopping cart"
. For semantic maybe its will be better to write something like this :
<body> <header> </header> <main> <section> </section> </main> <footer> </footer> </body>
Marked as helpful1@wellsprPosted 3 days agoHi @Stv-devl, good tip on image alt, I was not attempting for that!
As regards the structure, I think of this card as an independent component inside a page, not the whole page itself. We could have this component somehow embedded in a complex website (maybe along with other cards, or as a modal), and the structure of the card should be the same. This is why I've wrapped it into a div. How do you think about it?
Thank you, happy coding!
0P@Stv-devlPosted 3 days ago@wellspr yes normaly we can imagine it will be a componant in this case you can just write
<article><article/> who will wrap your card (or a div, its good also).You can imagine a complete website :
<body> <header> </header> <main> <section class="section1"> <!-- our card --> <article> </article> <!-- other card --> <article> </article> </section> <section class="section2"> </section> </main> <footer> </footer> </body>
Personally, I don't pay much attention to alt when I just practice, but when you will building a professional website, it's important for SEO and user accessibility (for blind people).
1 - P@barriedirkPosted 3 days ago
It looks great!, and I didn't know that in CSS you can add
html { font-size: 62.5%; }
to set the rem, nice idea!
I think the manipulation of the images for response design is missing. When I searched for this, I found that you can use picture element:
<picture> <source srcset="image-large.jpg" media="(min-width: 1024px)"> <source srcset="image-medium.jpg" media="(min-width: 768px)"> <img src="image-small.jpg" alt="Responsive Image"> </picture>or srcset and size attributes:
<img src="image.jpg" srcset="image-320w.jpg 320w, image-480w.jpg 480w, image-800w.jpg 800w" sizes="(max-width: 600px) 100vw, 50vw" alt="Responsive Image">
The idea is to avoid downloading all the images, only those that fit the screen width.
I hope this comment will be helpful to you
Marked as helpful1@wellsprPosted 3 days agoHi @barriedirk, I've learnt about this definition of font size elsewhere. Since the majority of browsers set font size to 16px, my root font size turns to
16px * 62.5 / 100 = 10px
. Consequently, I have 1rem = 10px (instead of 16px), and calculations get easier.I tried using
picture
before submitting, but it didn't work as expected. I'll try to implement this again later.Thank you for feedback! Happy coding!
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