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

Responsive 3 Column Card Component Using Flexbox

@UDsGitHub

Desktop design screenshot for the 3-column preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Unfortunately, I don't have any specific requests for feedback but to whichever professional is viewing this submission, your input is much appreciated.

Community feedback

P
Alexβ€’ 1,990

@AlexKMarshall

Posted

Visually this looks great, and it's nice and responsive.

Do fix the interactive elements. Something can either be a button - which means it triggers some kind of interaction like opening a modal, or submitting a form, or changing something on a page. Or it can be a link (anchor) - which means it navigates to a new url. It can't be both.

In this design it would depend what the Learn More actually did. Probably it would take you to a product detail page, so these should be <a>. Don't nest them inside a button.

One other thing I would probably do, is change the max-width on your main container. Currently it's set to 75%, which is fine for medium-size displays, but gets unreasonably large on very big screens. I'd change that to either a fixed width like 800px, or, better still, something like 70ch which will still flex the sizing based on your text-size, nut never get unreasonably big.

Make sure you only have one h1 element on a page too. In this kind of design, which is really a small component, that would be part of a larger full-page design, it can be hard to give it a proper h1. So I would suggest putting a visually hidden h1 inside your main element with a descriptive page title, and then making the section headings into h2s.

2

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