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 Columns preview card using grid-Template

@zenab12

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


Any Feedback about code and How to make it so clean and semantic :-)

Community feedback

Ahmed Bayoumiβ€’ 6,740

@Bayoumi-dev

Posted

Hey Zienab, It looks good!...

  • I suggest you change this <div class="button">LearnMore</div> ...

Should be button to add more semantics to your project... Buttons are used for actions.

<button class="button">LearnMore</button>`

I hope this is useful to you... Keep codingπŸ‘

0

@zenab12

Posted

@Bayoumi-dev but we should use<form> to wrap <button> inside it to make it right and more semantic . So I used div.button instead . If I misunderstand . Can you explain the correct explanation for me 😊

0
Ahmed Bayoumiβ€’ 6,740

@Bayoumi-dev

Posted

@zenab12 I agree with you, the button outside of a <form> is useless but even if a <button> doesn't do anything outside of a form without the help of JavaScript, it still feels better for things you can click that do actions, So <button> feels better anyway, and in this case, you also can use an anchor link <a> instead of the button... like this <a href="#" class="button" role="button">LearnMore</a>, So When to use the button and when to use the anchor link???!... It depends on what you want to happen after clicking... will it redirect the user to another page or section? Use the anchor link <a> Otherwise, use the button

  • Buttons are used for actions like opening or closing something or sending a form.
  • Links are used for navigation and actions.

If I'm wrong about something, it would be great if you could explain it to me.

Marked as helpful

1

@zenab12

Posted

@Bayoumi-dev that's awesome πŸ‘πŸ‘. Thanks so much for these Great tips

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