Skip to content
Submitted over 1 year ago

Product preview card component

Alex Efimenko•340
@aleksandr-efimenko
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

Please share any advice and recommendations. Thanks in advance!

Community feedback

  • visualdennis•8,375
    @visualdennissPosted over 1 year ago

    Hey Alex,

    nice work again! Looks pixel perfect and almost identical to the solution screenshot. However i do have few suggestions for you regarding accessibility:

    • Try to avoid giving fixed height for elements/containers that contain text elements. It will cause accessibility issue, when user changes their default font-size, text will overflow and break the layout. (e.g. you used height: 450px)
    • Relatedly, avoid using px as much as you can, instead try to use em or rem to improve accessibility. Here is a great resource on YT for that: https://www.youtube.com/watch?v=dHbYcAncAgQ

    Hope you find this feedback helpful!

    Marked as helpful
    1
    Alex Efimenko•340
    @aleksandr-efimenkoPosted over 1 year ago

    @visualdenniss Hey Dennis,

    Thank you for the suggestions! I removed the fixed height and changed px to rem and now the page looks much better with different browser font size settings. The resource about "px vs rem" is really helpful as well, thanks!

    0
    visualdennis•8,375
    @visualdennissPosted over 1 year ago

    @androidblog Happy to hear it was helpful! Yea, i agree, i was also confused about em/rem most of the time, but that video really helped me to grasp all the nuances and differences, so i try to share it. Keep up the good work!

    1
  • Hassia Issah•50,650
    @HassiaiPosted over 1 year ago

    Replace <div class="attribution"> with the footer tag and <h4> with <p> to fix the error issue.

    To center .card on the page using flexbox, add min-height:100vh; display: flex; align-items: center: justify-content: center; to the body.

    USING FLEXBOX:
body{
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}

    in the media query give .card a fixed max-width value for a responsive content.

    Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here

    Hope am helpful.

    Well done for completing this challenge. HAPPY CODING

    Marked as helpful
    1
    Alex Efimenko•340
    @aleksandr-efimenkoPosted over 1 year ago

    @Hassiai Thank you for your assistance! I made the changes you mentioned. I have a question - what is better to use for parent container height: 100% or min-height: 100vh? Is there any difference?

    0
    Hassia Issah•50,650
    @HassiaiPosted over 1 year ago

    @androidblog when centering an element in the parent container it is best practice to use min-height:100vh instead of height, for the element to centered in the parent-container if its height is above 100vh.

    if you use height of 100% when the height of element id above 100%, there will be an issue.

    Marked as helpful
    1
    Alex Efimenko•340
    @aleksandr-efimenkoPosted over 1 year ago

    @Hassiai Got it, thanks!

    0
  • C H A R A N 🎯•2,670
    @0xabdulPosted over 1 year ago

    Hello dude first congratulations on completing the product preview card component..😃

    • A Few line feedback for you because improve your code
    • Topic 📌
    • The Accessibility reports
    • what are the Accessibility reports. ?
    • the html page should be contained only one main landmark ❗
    • heading level should be increased one by one..
    • and not use the header tag like h1 h2 h3
    • in fact using the img tag and not use the alt attribute
    • form must be included the label tag..
    • these are problem affected the Accessibility reports
    • easy way to clear the all Accessibility reports
    • Ex :
    • In Html 🏷️ :
    <body> 
<div class="card" role="main">
//All html code here 🏷️
</div>
</body>
    • whenever using the header tag by sequence
    • Ex :
    <h1>PERFUME</h1>
<h2>Gabrielle Essence Eau De Parfum</h2>
<h3>$149.99
$169.99</h3>
    • Happy Coding
    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