3 column preview card flexbox media queries mobile first
Design comparison
Solution retrospective
mobile first for 375px screen, looks good in browser's programming mode in phone device toolbar
Community feedback
- Account deleted
Hi
Nice work on completing the challenge though while we are allowed some liberties, I believe the purpose of the challenge is to try get as close as possible to the design while not being pixel perfect. It is also recommended that CSS be saved in an external file and not internal or inline as that makes it more difficult to maintain and also makes it easier to switch between the markup and the CSS. You should move away from using <div> so much and use more semantic HTML. Landmarks are important for adding structure to your page and landmarks such as <header>, <main>, <nav> and <footer> aid navigation in assistive technologies such as screen readers and for keyboard accessibility. You should use <main> for your cars container and then <section> to wrap the individual car classes as this divides them into separate but related content. Instead of <button> you should have used anchor tag <a> and styled it to look like a button. <button> is intended for actions carried out on the page whereas in this case the learn more button would take you to another page and is therefore a link.
Attribution should be wrapped in <footer>.
If you had made <body> a flexbox container it would have been easier to center wrap/<main> using justify-content and align-items and then by using max-width and max-height for wrap/<main> had a responsive container that adjusts with screen size. I hope this is of help to you.
Marked as helpful0
Please log in to post a comment
Log in with GitHub
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