Skip to content
Submitted 2 months ago

Product preview card component

Yokene•50
@Yokene
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

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

Okay, I'm proud that I finished it, because I started doing it about 2 months ago, then I got burnt out, plus this project was unique to me, because I never used the Grid function.

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

The difficulties were with the picture, which needed to be moved to the left, and replacing the picture when changing the screen resolution (for mobile screens). With the picture that should be on mobile screens, I decided with the help of ChatGPT, I asked him how to do this, he told me the source function and the problem was solved quickly. The second problem is the price tag and the button for purchasing the product. I solved the problem simply by thinking and using additional div elements.

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

I don't need help right now, but I want to learn more about Grid functions and others.

Community feedback

  • Teodor Jenkler•3,740
    @TedJenklerPosted 2 months ago

    Hi @Yokene,

    Nice project! Here are a couple of suggestions for improvement:

    Flexbox & Div Reduction: Instead of relying on multiple <div> elements to structure your component, consider using Flexbox. This allows you to stack content with flex-direction: column, reducing unnecessary <div>s, which will make your code cleaner and improve both SEO and accessibility. Also, try using semantic HTML tags like <main>, <section>, or <article> where appropriate.

    Headings Usage: I noticed that you are using <h1>, <h2>, and <h3> for styling purposes rather than their intended meaning. Headings should reflect the importance of the text, not just the style. This will improve your SEO score and accessibility, as search engines and screen readers rely on the proper use of headings to understand the structure of your content.

    Keep up the great work!

    Best, Teodor

    Marked as helpful
    0
  • MikDra1•6,920
    @MikDra1Posted 2 months ago

    If you want to learn about green I highly encourage you to check this VIDEO, but also try this platform on which you can do tasks related to grid -> PAGE

    Hope you found this comment helpful 💗💗💗

    Good job and keep going 😁😊😉

    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