Responsive web page using column and media Queries,

Community feedback

• 

  Nikola D•1,510

  @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 helpful

  1

  ---

  

  Gbenga Bayode•140

  @bammytech1Posted almost 2 years ago

  @Nikola1232456 thanks mate

  1
• 

  👾 Ekaterine Mitagvaria 👾•7,600

  @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 helpful

  0

  ---

  

  Gbenga Bayode•140

  @bammytech1Posted almost 2 years ago

  @catherineisonline thank you

  0
• 

  バレンタイン 😈•64,170

  @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 a span element with an sr-only class that will state something like “The previous price was…” and use CSS to make it only visible to screen readers.

  More Info:📚

  Del Element

  If you have any questions or need further clarification, feel free to reach out to me.

  Happy Coding!🎄🎁

  Marked as helpful

  0

  ---

  

  Gbenga Bayode•140

  @bammytech1Posted almost 2 years ago

  @vcarames thank you I will do just the adjustment

  0
• 

  Favour•2,160

  @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 helpful

  0

  ---

  

  Gbenga Bayode•140

  @bammytech1Posted almost 2 years ago

  @Nadine-Green thanks so much I will look into that and resolve it.i really appreciate your feedback

  0

  

  Favour•2,160

  @Nadine-GreenPosted almost 2 years ago

  @bammytech1

  GLAD I COULD HELP

  0

  

  バレンタイン 😈•64,170

  @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