Skip to content
Submitted over 1 year ago

Product preview card component

Nadun Dhananjayaโ€ข210
@nadun-dhananjaya
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

Hello, everyone! I just completed the Product preview card component solution challenge.๐Ÿ˜Š ๐Ÿคฉ

Any feedback and suggestions will be appreciated. Thanks : ).

Community feedback

  • Abdul Khaliq ๐Ÿš€โ€ข72,560
    @0xabdulkhaliqPosted over 1 year ago

    Hello there ๐Ÿ‘‹. Congratulations on successfully completing the challenge! ๐ŸŽ‰

    • I have other recommendations regarding your code that I believe will be of great interest to you.

    HTML ๐Ÿท๏ธ:

    • This solution generates accessibility error reports, "All page content should be contained by landmarks" is due to non-semantic markup, which lack landmark for a webpage
    • So fix it by replacing the <div class="card"> element with the semantic element <main> in your index.html file to improve accessibility and organization of your page.
    • What is meant by landmark ?, They used to define major sections of your page instead of relying on generic elements like <div> or <span>
    • They convey the structure of your page. For example, the <main> element should include all content directly related to the page's main idea, so there should only be one per page

    .

    I hope you find this helpful ๐Ÿ˜„ Above all, the solution you submitted is great !

    Happy coding!

    Marked as helpful
    1
  • Daniel ๐Ÿ‘จโ€๐Ÿ’ปโ€ข980
    @Daniel-BilodidPosted over 1 year ago

    Hi, my congratulations you did a great job ๐ŸŽ‰

    ๐’๐จ๐ฆ๐ž ๐ญ๐ข๐ฉ๐ฌ ๐Ÿ๐จ๐ซ ๐ฒ๐จ๐ฎ๐ซ ๐œ๐จ๐๐ž ๐Ÿ› 

    ๐Ÿ”น About border-radius

    you can add a border-radius like this

    .card { border-radius: 5%; }

    and for the img

    .product-image { border-radius: 5%; }

    ๐Ÿ”น You need to put a landmark in your code

    simply wrap your code with <main class='card'> landmark instead of <div class='card'>

    ๐Ÿ“š The <main> HTML element is intended for the main content (content) of the <body> of the document (page).

    I hope it was helpful, you are great, keep up the good work ๐Ÿ‘

    Marked as helpful
    1
  • C H A R A N ๐ŸŽฏโ€ข2,670
    @0xabdulPosted over 1 year ago

    Hello Developer well congratulations on successfully completed the Product preview card component

    • A Recommendation for improve your code
    • In Html ๐Ÿ“ƒ :
    • LANDMARK ๐Ÿš€
    • The main landmark should be a top-level landmark. When a page contains nested document and/or application roles (e.g. typically through the use of iframe and frame elements), each document or application role may have one main landmark. If a page includes more than one main landmark, each should have a unique label.
    • To Clear the Accessibility reports use the Semantic elements Or non - Semantic elements
    • Note This Elements are don't sikp
    • semantic elements : <aside> , <artical> , <main>, <header> ,<section><footer>, <form> ect..
    • non- semantic elements : <div> , <span> ect ...
    • for easy way to clear the Accessibility reports using non semantic elements Ex :
    <body>
<div class="container" role="main">
/html code goes here : ๐Ÿ“ƒ
</div>
</body>
    • Or
    • using semantic elements
    • Ex :
    <header>
should be put heading or logo๐Ÿ“ธ
</header>
<nav>
//Links here
</nav>
<main>
Main of the contents ๐Ÿ“ƒ
</main>
<footer>
ยฉcopy right  here๐Ÿ“
</footer>
    • *I Hope you find the solution and it's useful for you and your project is great Happy Coding Developer
    Marked as helpful
    0

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