Skip to content
Submitted about 1 year ago

Product Preview using flex display

Daniel Joseph•10
@Joshdesign
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

The most difficult for me was translate all on mobile version.

The beginning of the code.

How to make the @media part more agile?

Community feedback

  • Héctor Martin Dama•240
    @HectorMartinDamaPosted about 1 year ago

    Hello @Joshdesign the desing is very similiar to the original and the mobile version is very good. The media querys are correct. To be your first proyect in frontendmentor is great.

    Marked as helpful
    1
    Daniel Joseph•10
    @JoshdesignPosted about 1 year ago

    @HectorMartinDama Thnx, in the media querys area I have seen some videos because every time I do it on my own something fails, but I'll practice with these challenges.

    1
  • Account deleted

    Hi there! ✌️

    Congrats on completing this challenge!! 🎉🥳

    I can see that you have some problems in your code. Here are some tips to improve your solution...

    HTML 🧱

    You should not use more than twice h1 tag. You must remember that it is only used once, and continue successively with h1, h2, ..., h6, and NOT SKIP HEADER LEVELS.

    Some images add value to your website and some don't. For example, the icon of the cart in the button does not carry any value, it must be empty.

    You can use the <picture> tag for this challenge. The picture tag helps us provide versions of the same image but in different resolutions, saving bandwidth and speeding up load times. More info here

    Your content should be contained by benchmarks. To avoid these accessibility issues, make sure your content is within a reference region with HTML5 elements 🙃. Example:

    <html lang="en">
    <head>
        ...
    </head>
    <body>
        <header>
            ...
        </header>
        <nav>
            ...
        </nav>
        <main>
            ...
        </main>
        <footer>
            ...
        </footer>
    </body>
</html>

    CSS 🎨

    Your reset is good, but you can improve it by using some popular resets like the following 🚀:

    Your solution is very good! 💯🚀

    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