Four card feature section

Community feedback

• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted over 1 year ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have other recommendations regarding your code that I believe will be of great interest to you.

  ---

  HTML 🏷️:

  • This solution generates accessibility error reports, "All page content should be contained by landmarks" is due to incorrect usage of semantic markup, which causes lacking of landmark for a webpage

  ---

  • So fix it by replacing the wrapper <div class="content"> element with the semantic element <main> in your index.html file to improve accessibility and organization of your page.

  ---

  • What is meant by landmark ?, They used to define major sections of your page instead of relying on generic elements like <div> or <span>. They are use to provide a more precise detail of the structure of our webpage to the browser or screen readers

  ---

  • For example:
    • The <main> element should include all content directly related to the page's main idea, so there should only be one per page
    • The <footer> typically contains information about the author of the section, copyright data or links to related documents.

  ---

  .

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  Marked as helpful

  1
• 

  Henry•340

  @devhnryPosted over 1 year ago

  Hello there 👋. Good job on completing the challenge !

  I have SOME suggestions about your code that might interest you.

  • Regards naming your CSS Custom properties . It's okay to use the names provided in the style-guide.md .Peronsally, for best practices try using Variable names instead, as this will also be the type of naming conventions you might use in bigger projects or challenges Example --red --cyan , Try --clr-primary-1 --clr-primary-1 .

  • As regards your <div class="content" > </div> .Wrap all your body content inside a <main>...</main> as this solves the accessibility issue in your code.

  .body {
      display:grid;
      place-items:center;
      min-height:100%;
  }
  

  The code above will help with centering the content and providing a much cleaner code

  • As regards the Card-Icon. If you decide to use a Flex or Grid Layout for the Card Design. Adding margin-left: auto to the card-icon should push it to the extreme right. Example

  .card{
      display:grid;
      gap:2rem;
  }
  .card__icon{
      margin-left:auto;
  }
  

  • To solve the issue of the responsive design. Change the media-queries to adjust when the 4 Cards can no longer be visible on a large screen @media (min-width: 1100px){ }.

  • Extra Tip: Check out BEM for better naming of classes and practice using order measurement units such as rem em % as it boosts responsive design

  I hope you these comments useful! 😄 And I was able to answer your questions

  Happy coding!

  Marked as helpful

  1

  ---

  

  Bárbara Damasceno•320

  @barbaradamasdevPosted over 1 year ago

  @devhnry Hi Henry :).

  First of all, thanks for the suggestions.

  Got it about the variables, perfect to know that.

  I really appreciate the body centered code and the card-icon, I'll give it a try now.

  And I have trouble naming the classes and using units other than pixels. I will read that link. Thanks again.

  1