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

Mobile-first solution using basic HTML & CSS

Newton Lomar• 75

@newlomar

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


All feedbacks are welcome!

Community feedback

P
Grace• 27,950

@grace-snow

Posted

Good job on this!

Only a few minor suggestions

  • on suvs alt text you need to capitalise SUV so screenreaders can read it out properly
  • the buttons in this should almost certainly be anchor tags as it's most likely they would navigate somewhere
  • remember to add focus-visible styles to interactive elements as well as hover

Well done again

Marked as helpful

1

Newton Lomar• 75

@newlomar

Posted

@grace-snow Hi Grace!

Thanks a lot for the help again! Also for the motivation :)

I made the corrections and I think I got it for the first and second suggestions that you made, but for the third one I am in doubt, because I never worked with focus-visible styles before.

If you have some time, can you check if that propertys that I added for focus-visible are what you expected?

Thanks a lot again.

0
P
Grace• 27,950

@grace-snow

Posted

@NewLomar I can’t check tonight as I’m on my phone not keyboard atm.

But I can see one big issue now - it’s invalid to have button elements inside anchor tags or vise-versa. They are completely different elements semantically. You need to remove the buttons on this

Focus-visible styles are for keyboard tabbing. It should be really obvious where you are on a page when using keyboard. Usually this is done with a bold outline.

1
Newton Lomar• 75

@newlomar

Posted

@grace-snow Ok!

Thanks again, grace!

0
Newton Lomar• 75

@newlomar

Posted

@grace-snow I finally understood the focus better and I think that now its making sense.

I also made the buttons inside a tags corrections.

Thanks a lot, Grace!

0
P
Grace• 27,950

@grace-snow

Posted

Good job on this!

Only a few minor suggestions

  • on suvs alt text you need to capitalise SUV so screenreaders can read it out properly
  • the buttons in this should almost certainly be anchor tags as it's most likely they would navigate somewhere
  • remember to add focus-visible styles to interactive elements as well as hover

Well done again

Marked as helpful

1

@MichaelArayaMurcia

Posted

Very nice!

Marked as helpful

1

Newton Lomar• 75

@newlomar

Posted

@MichaelArayaMurcia Thanks a lot!

I'm very happy with your comment!

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