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 Card Component — HTML, CSS (Flexbox, Mobile-first)

Adrian A. 20

@adrianang

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


Hey everyone! For this challenge, I mainly wanted to practice taking a mobile-first approach to CSS styling after reading about some current best practices in web development.

I'd love to hear any feedback that you might have, especially with regards to any possible oversights in my project on accessibility, "best practices" to follow, or details!

Updates (since initial submit):

  • added background color
  • edited hover and active states of the 'Learn More' links
  • removed alt text from (decorative) icons

Community feedback

@encoreOax

Posted

Hello Adrian. I like your solution, I think you achieved the overall design very well. I consider that some elements of the design were missing, such as the background color and the hover effect of the buttons does not correspond to the one indicated. I consider that for this project it is important that the mobile design looks as required so that the semantics of the text message can be appreciated. Keep up your excellent work!

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