Submitted 2 months ago

product preview card

#accessibility#angular#angular-material#animation#anime-js

EDWINTOAPANTA02•120

@EDWINTOAPANTA02

Preview site View code

This is a solution for...Product preview card component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

Next time I would try to improve with the use of the flex-box grid

What challenges did you encounter, and how did you overcome them?

Next time I would try to improve with the use of the flex-box grid

What specific areas of your project would you like help with?

Next time I would try to improve with the use of the flex-box grid

Community feedback

Alaa Mekibes•1,540

@alaa-mekibesPosted 2 months ago

Well done 🎉 @EDWINTOAPANTA02, just there are few points to fix:

Update Your README File

Start by using the provided README template included in the starter file. Customize it to enhance clarity and professionalism.

Use semantic HTML elements for better structure and accessibility. For example:

<body>
    <main>
        <!-- Your code -->
    </main>
</body>

Never Leave the alt Attribute Blank

Always provide a meaningful alt description for images. This improves accessibility and contributes to better SEO.

Avoid Using px Unless Necessary

Use relative units like rem or em for sizing instead of px. This ensures better scalability and responsiveness.

Use <picture> tag to add an image for desktop and how to change it for mobile using the <picture> tag.

<picture>
<!-- Here Add all the images with small screen -->
         <source
                    media="(max-width: 375px)"
                    srcset="images/image-product-mobile.jpg"
                    >
<!-- Here Add the default image -->
         <img src="images/image-product-desktop.jpg" alt="Product image">
</picture>

Add some padding to box.
Change title font and add margin top and bottom

Keep up the incredible work, @EDWINTOAPANTA02, your dedication is inspiring!

Please log in to post a comment

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