Design comparison
Solution retrospective
Can someone look at my responsive design code, It's working fine but I think I'm not writing good responsive code
Community feedback
- @bccpadgePosted about 1 year ago
Hello @Ahmadhassan0. Congratulations on completing this challenge!!!🎉
I have few suggestions you might be interested in to improve your solution.
- HTML structure needs to be updated:
- You can wrap the attribution using the
footer
tag.
- You can wrap the attribution using the
<body> <main></main> <footer></footer> </body>
HEADING TAGS are improperly used in this project
- I see you using a
h2
for the title and needs to be ah1
More info📚:
When building this project,
picture
tag easily changes the image from mobile to desktop and vice versa.IMAGE ALT TAGS ARE VERY IMPORTANT FOR ACCESSIBILITY.
- If a image is decorative, you can I add
aria-hidden: true
and image will be ignored by screen readers.
Here is an example of the picture tag in my solution: Product preview card component
<picture> <source media="(min-width: 37.5em)" srcset="./assets/images/image-product-desktop.jpg" /> <img src="./assets/images/image-product-mobile.jpg" alt="Gabrielle Essence Perfume bottle laying down with a green leaf above and below it" /> </picture>
More info📚:
I suggest you change your media query to
max-width: 48em
which is 768px. 768px is tablet view and your component would changegrid-template-column: 1fr
at that breakpoint. Use em units for media queries because works all cross browsers.More info📚:
For the two prices I would add
visually-hidden
CSS class to indicated the current price and original price for screen readers. You can check out my solution the link is above.I use this visually-hidden class from this article: visually-hidden
Hope this helps you and have any questions I am glad to answer them just let me know✌🏼
Marked as helpful1@Ahmadhassan0Posted about 1 year agoThanks @bccpadge, I highly appreciate your feedback
I'll apply all your suggestions, and I looked at your code there are many things that I don't know but seem very helpful I'll also learn all those new things🙌
0 - HTML structure needs to be updated:
- @ymanziPosted about 1 year ago
Looks good for me.
I saw in your html for your "card-title", the space between the letters you can also use the css property letter-spacing
Marked as helpful1@Ahmadhassan0Posted about 1 year agoThanks @ymanzi
From now I'll try to give space using CSS 😊
0 - @Ahmadhassan0Posted about 1 year ago
Thanks eescan
0 - @iskandar13abdurakhmonovPosted about 1 year ago
That looks pretty good
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