I used CSS and HTML for this challenge

Community feedback

• 

  Zienab Mohammed Abdelmonaem•400

  @zenab12Posted over 2 years ago

  Hey Gabriel Francisco You did amazing work congratulations for completing this challenge

  to fix accessibility issues :

  • You should use <main class="container"> and wrap inside it <div class="grid"> and <header></header> so all page content should be contained by landmarks.

  • give class name cards instead div.grid as you can use more than different grid

  • Element h2,p not allowed as child of element menu in this context. and menu not allowed here you can replaced it with div.card as <menu> used for toolbars and for listing form controls and commands as right click menu.

  To make your code more Responsive and to remove scroll

  instead of using large padding or margin for header or div.grid-center use this to center your elements in the page.

  body {margin :0;display:flex;flex-direction:column; min-height:100vh}
  
  **/*it is a child of the body and we make flex-grow:1 to distribute space-equally in top and bottom*/**
  main{display:flex;place-items:center;place-content:center;flex-grow:1;flex-direction:column}
  

  • don't give section or div specific height that will damage the responsivity in mobile and will make scroll if width of screen small or height of the div large than screen height view so remove height and use min-height instead .

  • avoid to give cards height and give it only padding but not large

  • don't use article, menu and aside all this tags in this challenge as all these are cards so you can use divs and give all div semantic name card as this ;

     <section class="cards">
  
           <div class="Supervisor card">
             <h2>  Supervisor </h2>
             <p> Monitors activity to identify project roadblocks </p>
             <img src="images/icon-supervisor.svg" alt="Supervisor">
           </div>
  
             <div class="Team-Builder card">
             <h2> Team Builder </h2>
             <p>Scans our talent network to create the optimal team for your project </p>
            <img src="images/icon-team-builder.svg" alt="Team-Builder">
            </div>
  
             <div class="Karma card">
             <h2>  Karma </h2>
             <p> Regularly evaluates our talent to ensure quality </p>
             <img src="images/icon-karma.svg" alt="Karma">
             </div>
  
             <div class="Calculator card">
             <h2>  Calculator </h2>
             <p>Uses data from past projects to provide better delivery estimates </p>
             <img src="images/icon-calculator.svg" alt="Calculator">
           </div>
      </section>
  

  • You you can comment the footer tag to hide it and avoid scroll

  • you can use variables in css and save colors or fixed sizes in variables like this :

  :root 
  {
  --main-color:#3829e0;
  --font-family:'Red Hat Display',sans-serif;
  }
  
  h1 
  {
  font-family:var(--font-family)/*to call  value of the variable*/
  }
  

  Regardless You did amazing I hope this is useful to you... Keep coding👍

  Marked as helpful

  1

  ---

  

  Gabriel Francisco•130

  @gab9244Posted over 2 years ago

  @zenab12 Thank you very much, your instructions helped me to solve the problems.

  0

  

  Zienab Mohammed Abdelmonaem•400

  @zenab12Posted over 2 years ago

  @gab9244 you are welcome , and don't forget to update your solution in github

  0