Design comparison
Solution retrospective
Thanks a lot for your first feedback😁
This is my 2nd submission after fixing some issues that has been reported and some points that your awesome feedback mentioned
Is there any improvements that can make this code better ?
Community feedback
- @VCaramesPosted about 2 years ago
Hey there! 👋 Here are some suggestions to help improve your code:
-
The purpose of the Main Element is to identify the main content of your page. It is not the container of you component. After the main element, you want add a container to wrap you separate components in.
-
The Alt Tag Description for the image needs to be improved upon. You want to describe what the image is; they need to be readable. Assume you’re describing the image to someone.
-
This challenges requires the use of two images 🎑 for different breakpoints. The Picture Element will facilitate this.
Here is an example of how it works: EXAMPLE
Syntax:
<picture> <source media="(min-width: )" srcset=""> <img src="" alt=""> </picture>
More Info:
https://www.w3schools.com/html/html_images_picture.asp
https://web.dev/learn/design/picture-element/
-
The only heading in this challenge is the name of the perfume, “Gabrielle Essence Eau De Parfum” . The rest of the text should be wrapped in a Paragraph Element.
-
The old price 🏷 is not being announced properly to screen readers. You want to wrap it in a Del Element and include span element with an sr-only text explaining that this is the old price.
If you have any questions or need further clarification, let me know.
Happy Coding! 👻🎃
Marked as helpful1 -
- @Toch007Posted about 2 years ago
Great job you did there but there are a few things you may need to work on. Especially the overflow. Its too much. Since your display is flex you can use the 'flex-basis' function. Also set flex to rows on main view and column on media query. Other than that you are good to go. I wish you all the best.
Marked as helpful1 - @AdrianoEscarabotePosted about 2 years ago
Hi Ammar yasser, how are you?
Welcome to the front-end mentor community!
I really liked the result of your project, but I have some tips that I think you will enjoy:
- every Html document must contain the main tag, so we can identify the main content, to fix this, wrap all the content with the main tag. HTML5 landmark elements are used to improve navigation experience on your site for users of assistive technology.
- images must have alt text unless it is a decorative image, for any decorative image each IMG tag must have empty
alt=""
and addaria-hidden="true"
attributes to make all the assistive technologies of the Web, as screen reader. Learn the differences between decorative/meaningless images vs important content.
The rest is great!
I hope it helps... 👍
Marked as helpful1 - @skipprrrPosted about 2 years ago
add a footer tag and add some margin in footer for attribution part
Marked as helpful1 - @ClaireLise-devPosted about 2 years ago
Very good solution, congratulations!! But you should check on your report, a few details can be improve in your html like putting an ALT attribut for img, an lang to the html ect...
Marked as helpful1
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