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

Frontend Mentor | Product preview card component

@ByProxy66

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


Just testing. Not smart enough to have any good questions yet.

Community feedback

Saulius K. 560

@TH3RIV

Posted

Hi, @ByProxy66! To me it looks pretty good.

The main issue I have with your project is that it does not contain landmarks (header, main, footer). Pretty sure a page content has to be wrapped in <main></main> landmark for it to recognise what is the main content of the page.

Therefore I would suggest doing the following:

  • Wrap your card within main landmarks.
  • Wrap your attribution within footer landmarks.

Hope this helps!

Marked as helpful

2

@ByProxy66

Posted

@TH3RIV Thank you. I absolutely 'forgot' that and I have to confess, that I need to do some reading up on landmarks. I wrapped the content, rather than the divs. I don't know if that's correct.

0
Saulius K. 560

@TH3RIV

Posted

@ByProxy66 Your whole card should be wrapped within main tags.

<body>
<main>
Main Content (Card)
</main>
<footer>
Footer Content (Attribution)
</footer>
</body>
1

@VincenzoMuolo

Posted

Hi there!

The layout works great! The only thing i would suggest you is to shrink a bit the card on mobile layout, maybe by adding some padding / margin on left and right side.

Hope this give you some help!

Cheers

Marked as helpful

1

@ByProxy66

Posted

@Shirohige-96 Thanks. I added some padding.

0

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