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 using CSS grid

@noonecaresman023

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 is my first-time using grid property. Let me know what I should have done differently. Thank you!

Community feedback

Adriano 34,090

@AdrianoEscarabote

Posted

Hi Jerome Dela Cruz, how are you? I really liked the result of your project, but I have some tips that I think you will enjoy:

I noticed that you used a button in which case the best option would be an a, because in my head when a person clicks on a button written Learn More, he is not confirming a form, or something like, it will be redirected to another page, to Learn More about!

To resolve do this:

<a href="/" aria-label="Learn More on Sedan Cars" class="sedan-button">Learn More </a>

I noticed that the content is stretching a lot in higher resolutions, to solve this we can do this:

main {
    max-width: 1110px;
    margin: 0 auto;
}

The rest is great!

I hope it helps... 👍

1

@noonecaresman023

Posted

@AdrianoEscarabote Hi, I'm good thanks for asking! I actually did like those tips especially the stretching of in higher resolution which makes improves it more in terms of looks, I see what you mean about using a tag instead of button, it does makes sense. I'll remember this for my future project, and I'll update my project with your tips! Thank you!

1
Adriano 34,090

@AdrianoEscarabote

Posted

@noonecaresman023 happy coding!!

1

@noonecaresman023

Posted

@AdrianoEscarabote Although, I have a question can't I just use a button which would include an a tag? Also, I greatly appreciate if you checked my solution again as I have updated it. Thank you so much for your help!

1
Adriano 34,090

@AdrianoEscarabote

Posted

@noonecaresman023 Sorry, I really don't understand, can you be a little more specific? hahahahaha

1

@noonecaresman023

Posted

@AdrianoEscarabote Oh I'm sorry, I meant like

<button> <a>Learn More</a> </button

wouldn't using this would be acceptable too? Thank you!

1
Adriano 34,090

@AdrianoEscarabote

Posted

@noonecaresman023 not really, because the two tags have different purposes

1

@noonecaresman023

Posted

@AdrianoEscarabote Oh I see, okay thank you for all your help and patience! Have a good day!

1
Adriano 34,090

@AdrianoEscarabote

Posted

@noonecaresman023 you too!

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