Huddle-landing-page-with-a-single-introductory-section with flexbox

Community feedback

• 

  Lucas 👾•104,340

  @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 and responsiveness, 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 helpful

  0