Huddle-landing-page-with-a-single-introductory-section with flexbox
Design comparison
Solution retrospective
how can I improve my code pls? responsive design is my biggest issue how can improve it? thank you!
Community feedback
- @correlucasPosted about 2 years ago
👾Hello @anasssanba1, 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 component card you use<article>
instead of the<div>
.This article from Freecodecamp explains the main HTML semantic TAGS: https://www.freecodecamp.org/news/semantic-html5-elements/
2.Something that can be a time saver for you is to use a CSS RESET to remove all default settings for margins, making the images easier to work, see the article below where you can copy and paste this css code cheatsheet: https://piccalil.li/blog/a-modern-css-reset/
3.A best practice to have all the image inside the container scaling and respecting the size of the container, you need to add
max-width: 100%
and add alsoobject-fit: cover
to make the image auto-crop when resizing inside the column:img { display: block; object-fit: cover; max-width: 100%; }
4.If you’re not familiar to
media queries
andresponsiveness
, here’s a good resource to learn it: https://www.w3schools.com/css/css_rwd_mediaqueries.asp✌️ I hope this helps you and happy coding!
Marked as helpful0
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