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

3-Column Preview Card with Css Grid ,Flexbox and Padding

Nayabi 20

@Nayabi26

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


This project give me some insights about centering , land marking the elements. I got confuse with how to arrange elements inside each card with space equally . Padding quite difficult .

Community feedback

T
Grace 29,310

@grace-snow

Posted

HTML isn't too bad on this, only a few pointers

  • you don't need role main on a main. It's already got that role
  • you shouldn't have multiple h1s on a page. This is a component that would sit on a page that has a h1 like "Cars" so make all the headings into h2s
  • what you have as buttons in here should be anchor links. This is because clicking them would navigate the user somewhere. Whenever an interactive elements purpose is navigation it must be a link
  • the way you've linked the fonts in the head is not quite right. Go back to Google fonts and select all the fonts you need (their specific weights) and generate one link for all of them. You only need the two links before once as well (the prereconnect ones) - one of each, exactly as provided by Google fonts, you don't need to duplicate them even if you did have separate font family links underneath them. This is all about improving performance

Marked as helpful

1
Elvis 220

@Elvislex

Posted

nice workn nayabi but it is not responsive on mobile

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