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
picturebefore 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 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