Skip to content
Submitted almost 2 years ago

CSS perfume challenge

WiredSenpai•40
@WiredSenpai
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Product preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Aligning the content and setting properties on the media query was very difficult for me to do. I am really not sure about my media query code, I still need to learn more about it. I would appreciate any comment on the code, please help a fellow out

Community feedback

  • バレンタイン 😈•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 ⚠️. Assume that you are describing the image to a someone over the phone.

    More Info:📚

    https://www.w3.org/WAI/tutorials/images/

    • Do not uppercase ❌ "perfume" in HTML as it is not accessible friendly. Instead you will want to style it in CSS.
    • Implement a "Mobile First" approach 📱 > 🖥

    Mobile devices are now the dominant 👑 way in which people browse the web, it is critical that your website/content looks perfect 💯 on all mobile devices.

    More Info: 📚

    Mobile First

    • For improved accessibility 📈 for your content, it is best practice ✅ to use em for media-queries. Using this unit gives users the ability to scale elements up and down, relative to a set value.

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

    Happy Coding! 🎆🎊🪅

    Marked as helpful
    1
    WiredSenpai•40
    @WiredSenpaiPosted almost 2 years ago

    @vcarames Thank you so much, I wish I read this comment before I uploaded my NFT preview project. could you if you can please check it out for me, I just uploaded it

    0
  • Melvin Aguilar 🧑🏻‍💻•61,140
    @MelvinAguilarPosted almost 2 years ago

    Hello there 👋. Good job on completing the challenge !

    I have some feedback for you if you want to improve your code.

    HTML 📄:

    • The <br> tag is not a semantic element. If a screen reader user is reading the page, they will hear "line break", which breaks the flow of the content. Instead, use CSS properties like margin and padding to add vertical space between elements.

    • You could use the <del> tag to indicate the price that was before the discount. Additionally, you can use a sr-only class to describe the discount. This will help screen reader users to understand that the price was discounted.

      Example: <del><span class="sr-only">Old price: </span>$169.99</del>

    • For specificity reasons you should work with classes instead of ids because they are more reusable. You can use ids to work with JavaScript, but you should use classes to style your elements. You can read more about this here 📘.
    • Remove the width of the body element, let it occupy 100% of the screen width. When you set a fixed width to the <body> element, it will only work well when the viewport has the same width, this means that the website will not adapt to the different screen sizes, and will look bad when it is accessed on a smaller device.

    I hope you find it useful! 😄 Above all, the solution you submitted is great!

    Happy coding!

    Marked as helpful
    0
    WiredSenpai•40
    @WiredSenpaiPosted almost 2 years ago

    @MelvinAguilar Thank you very much

    1

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