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

Three columns card component using CSS Grid

@NeuralG

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


-Thats my first responsive website so any feedback would be appreciated

-What is the best way to decide between buttons and anchor links? I used anchor links here but I'm not sure about that decision.

Community feedback

P

@Islandstone89

Posted

Hey, congratulations on finishing this challenge!

"What is the best way to decide between buttons and anchor links?"

  • When deciding between a button and an <a>, you should consider the functionality of the element in question. If it navigates to another page, it should be a link. If it performs an action, like "add to cart", it should be a button.

I have taken a look at your code, and want to give you some feedback on that as well :)

HTML:

  • Your HTML is very good. You are including semantic landmarks like <main> and <footer>, using the correct headings, and have empty alt text on the decorative icons. The only thing I would suggest is to wrap the footer text in a <p>.

CSS:

  • It's good practice to include a CSS Reset at the top.

  • All styling should be done in the CSS, so move the styles for .attribution from the HTML document to the stylesheet, and remove the ``

Marked as helpful

3

@Theosaurus-Rex

Posted

Looks great! Very close to the original design!

Regarding your question about the difference between anchor tags and buttons, you've made the right choice here by using anchor tags. The key difference is that an anchor tag is used to navigate to a web link, whereas buttons are typically used when a user is making some kind of decision when interacting with a web interface, e.g. a "Submit Form" button, clicking a close button on a popup alert, etc.

Hope this helps!

Marked as helpful

3

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