Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Product preview card component Using Flexbox, Grid and Media Queries

@Prototype-113322

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


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

Is there anyone who can share a detailed video of the GRID layout with me? Thank you.

Community feedback

MikDra1 6,050

@MikDra1

Posted

Yes 😁,

Here is a VIDEO that I recommend you to watch if you want to understand the CSS grid better

Hope you found this comment helpful 💗💗💗

Good job and keep going 😁😊😉

Marked as helpful

2

@TedJenkler

Posted

Hi @Prototype-113322,

Nice project! Here are a few additional recommendations:

CSS Grid vs. Flexbox: Use CSS Grid when the parent element controls the children, such as when you have a group of cards with similar width and height. CSS Grid is ideal for layouts where items are organized in rows and columns. Flexbox, on the other hand, is best for flexible layouts where the children control their own size and positioning.

OG Meta Tags: I strongly recommend using OG (Open Graph) meta tags to improve SEO and the shareability of your site. Proper OG tags can significantly impact how your site appears when shared on social media and can influence search engine rankings, potentially affecting whether your site appears in search results.

ARIA Labels: When semantic HTML elements aren't applicable, make sure to add aria-label attributes to your <div> elements. This practice enhances accessibility and contributes positively to SEO by helping screen readers understand the content and purpose of these elements.

Keep up the great work!

Best, Teodor

Marked as helpful

1

Please log in to post a comment

Log in with GitHub
Discord logo

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