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 Cards With Mobile-First Workflow

Logan 50

@afewfirstnames

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


Nothing much to say. I was hoping to get more practice with flexbox on this project. But it didn't need much of that! Feel free to scrub through my code and give me input on how I could be more efficient with my CSS.

Cheers!

Community feedback

P
Ken 4,915

@kens-visuals

Posted

Hey @afewfirstnames 👋🏻

I have a quick tip to help you fix the accessibility issues and some other things.

  • In your markup, <div class="container row">...</div> should be <main class="container row">...</main> and this will fix the accessibility issue. Don't forget to generate a new repot once you fix it.
  • Next, the car icons, should have aria-hidden="true”, because they are for decoration only. You can read more about aria-hidden here.
  • Also, perhaps you forgot to include, but the headings have different font-family. You can find the link in style-guide.md
  • I won't go into many details about resting CSS, but I'll leave this cool article here, which will make more sense than my brief explanation 🙃
  • Lastly, I'd reduce transition from 0.35s to 0.2s, but it's just my personal opinion.

I hope this was helpful 👨🏻‍💻 Well done, you did a great job for the second project, keep it up. Cheers 👾

Marked as helpful

1

Logan 50

@afewfirstnames

Posted

Hey @kens-visuals!

Thank you so much for the detailed feedback. I've never heard of aria-hidden="true". I'll definitely be checking out that article as well!

0
P
Ken 4,915

@kens-visuals

Posted

@afewfirstnames you're welcome 😇

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