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 w/ Flexbox

emilyw12ā€¢ 65

@emilyw12

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


Hi all! I'd like some feedback on CSS layout and responsiveness. I'm also not sure about the accessibility of hiding the <h1> element and how best to do this. I took a guess and thought that I should hide it in this case, since it didn't seem like it would make sense for each of the headings of the columns to be <h1>. Thanks!

Community feedback

P
Emmilie Estabilloā€¢ 5,540

@emestabillo

Posted

Hey Emily, looks great! Site is responsive and close to the design. I think adding and hiding the h1 is a good call for accessibility. I only have a few thoughts:

  • Missing CSS reset. The body has an 8px margin all around that's producing vertical scrollbar (apparent especially on desktop)

  • Not sure why main has an id. I don't see it being used in the project. Using the class for styling should be enough.

  • I think there may be a better html tag for the car types instead of section. The 3 cards are related, and they seem like they represent an entire region of a document together. Maybe a generic div? This is subjective, of course.

  • one other minor thing is adding a transition to the button to make the hover smoother

Hope this helps!

Marked as helpful

1

emilyw12ā€¢ 65

@emilyw12

Posted

@emestabillo Thanks so much for the feedback!

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