Design comparison
Solution retrospective
I'm still new to CSS and HTML, but I felt like I got a little closer on this one. I'm still struggling with the responsive code, but I'm continuing my practice.
I appreciate any feedback on my overall code formatting and media query. I know this is straight forward, but I wondered if I could have done something better in terms of organization or code consolidation.
Thanks for taking a look!
Community feedback
- @correlucasPosted about 2 years ago
๐พHello Sarah, Congratulations on completing this challenge!
1.You made your html structure entirely with
div blocks
but these div doesn't any semantic meaning, for this reason is better you use a better html markup improving your code, for example for each vehicle card you use<article>
instead of the<div>
.2.To make your CSS code easier to work you can create a
single class
to manage the content that is mostly the same for the 3 cards (paddings, colors, margins and etc) and another class to manage the characteristics that are different (colors and icon), this way you'll have more control over then and if you need to change something you modify only one class.3.Add the correct color for the background, that in this case is
background-color: #F2F2F2
4.This article from Freecodecamp explains the main HTML semantic TAGS: https://www.freecodecamp.org/news/semantic-html5-elements/
โ๏ธ I hope this helps you and happy coding!
Marked as helpful0@SwankypantsSarahPosted about 2 years ago@correlucas Thank you! I appreciate the feedback and use it in my next project. Happy coding to you too!
0
Please log in to post a comment
Log in with GitHubJoin 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