Responsive web page using column and media Queries,
Design comparison
Solution retrospective
- Using the flexbox gave a lot of issues
- Am still not sure of the responsiveness of my CSS-layout
- No question
Community feedback
- @NikolaD93Posted almost 2 years ago
Nice work mate! One suggestion however. Try to organize your code better. For example put all of your images and icons into one folder called assets or images. Good luck!
Marked as helpful1 - @catherineisonlinePosted almost 2 years ago
Nice! 🙌🏻
I would also add some transitions for active states (when colors change on hover). It creates more interactivity and makes the project looks cooler. Active states can be done on buttons, links, titles which act like links or anything else, you choose.
You can read more about it here, in case you haven’t done much of it: https://www.w3schools.com/css/css3_transitions.asp
IF THIS WAS HELPFUL PLEASE MARK IT AS HELPFUL 🤩
Marked as helpful0 - @VCaramesPosted almost 2 years ago
Hey there! 👋 Here are some suggestions to help improve your code:
- The image’s
alt tag
description needs to be improved upon to better describe what it is. You will want to assume that you are describing the image to a someone.
More Info:📚
https://www.w3.org/WAI/tutorials/images/
- This component requires the use of two images 🎑 at 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
- name of the perfume , “Gabrielle Essence Eau De Parfum”, is the most important content in your card so it should be wrapped in a heading Element.
- Currently, the old price (169.99) 🏷 is not being properly announced to screen readers. To fix this, you are going to wrap the the price in a
del
element and inside it you will add aspan
element with ansr-only class
that will state something like “The previous price was…” and use CSS to make it only visible to screen readers.
More Info:📚
If you have any questions or need further clarification, feel free to reach out to me.
Happy Coding!🎄🎁
Marked as helpful0@bammytech1Posted almost 2 years ago@vcarames thank you I will do just the adjustment
0 - The image’s
- @Nadine-GreenPosted almost 2 years ago
HEY GBENGA!
Congratulations on completing your first challenge, it looks very nice, however, I noticed that the button does not have a hover effect as required, I have done this challenge myself and I noticed that a color for the hover effect was not included, I would suggest just using a darker green.
I also noticed that the font weight of the before price is incorrect, I believe that you are just supposed to leave the font weight as it was instead of increasing it.
IF THIS WAS HELPFUL IN ANY WAY, DON'T HESITATE TO MARK IT AS HELPFUL :)
HAPPY CODING!
Marked as helpful0@bammytech1Posted almost 2 years ago@Nadine-Green thanks so much I will look into that and resolve it.i really appreciate your feedback
0@VCaramesPosted almost 2 years ago@Nadine-Green
Thank you for contributing to the FEM community! I have notice that you are asking members to mark your comment as helpful. This unfortunately against FEM policies;
"Please don't…Ask people to mark your comment as helpful — A big part of Frontend Mentor is helping each other out and providing feedback. If you give some feedback, please avoid saying things like, "if you found this feedback useful, please mark this comment as helpful". It places unnecessary pressure on the solution author to mark your comment as helpful, which is best avoided. Feel free to say something like, "I hope you find this helpful", but please avoid asking for your comment to be marked as helpful outright."
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