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

Flexbox to align items for responsive design

rjzhao1 50

@rjzhao1

Desktop design screenshot for the Blog preview card coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

Using Flexbox to better align item. Adhere better to style guide.

What challenges did you encounter, and how did you overcome them?

Keeping all the items in the card and trying to match the design. Trial and error with the styling.

What specific areas of your project would you like help with?

How to better match the font of the card.

Community feedback

@Nexus-coder

Posted

He has not used semantic html at all since most of his elements have been applied using divs. No it is also not accessible as there are no roles assigned to any of the elements in their code. The layout is ok on the various screen sizes only problem is that it is not centered to the page and thus it looks a little bit off. Well the code is ok and it is at least readable. No the solution and the design do not defer greatly.

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