Solution with HTML, SASS & some Flexbox

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted almost 3 years ago

  Hey, really nice work on this one. The desktop layout looks really great, site is responsive and the mobile state looks great as well.

  Others already gave their feedback on this one which is really nice. Just going to add some little suggestions on this one:

  • This text Reliable, efficient delivery Powered by Technology, this is only a single phrase, the text is just wrapped on another row. Meaning, you could just use a single h1 on this one.
  • For this one, you are using ul and visually there are 4 items but if you look at the markup, ( supposing div are replaced by li ), there are only 3 items as direct child of it. Make it use 4 items and just use grid on it so that you could place each item properly.
  • Lastly, for each of the card's img, you could add an extra aria-hidden="true" on it so that it will b totally hidden for screen-reader or just in general, add that on decorative image in par with alt="".

  Aside from those, great job again on this one.

  0
• 

  alsir hamory•640

  @alsirPosted almost 3 years ago

  hi , I tell what i know from while ago when i first start learning about html in course from coursera . h1 is used once as the main header of the page for the main subject of the page. h2 is used for the main branch of the h1 and h3 for the branch of h2 and so on but really a have not ever used the h5 or h6 . The p is used for paragraph or more details about the header of it. hopefully you found the answer.

  0
• 

  Aakash Verma•6,710

  @skyv26Posted almost 3 years ago

  Hi! I just checked your work and you did it great and responsive too. But when I saw your error report then after I opened your code you have added

  <ul>
          <div class="column1">
            <li class="card1">
              <h2> Supervisor </h2>
              <p> Monitors activity to identify project roadblocks </p>
              <img src="images/icon-supervisor.svg" alt="">
            </li>
          </div>
          
          <div class="column2">
            <li class="card2">
              <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="">
            </li>
  
            <li class="card3">
              <h2> Karma </h2>
              <p> Regularly evaluates our talent to ensure quality </p>
              <img src="images/icon-karma.svg" alt="">
            </li>
          </div>
  
          <div class="column3">
            <li class="card4">
              <h2> Calculator </h2>
              <p> Uses data from past projects to provide better delivery estimates </p>
              <img src="images/icon-calculator.svg" alt="">
            </li>
          </div>
        
        </ul>
  

  So in above you have added div directly inside the ul tag, so report is telling you that it is a bad practice and I am suggesting you always make li as your direct child of either ul (unordered list) or ol (ordered list). Please fix this and your error will then gone.

  I hope you understand, Best of luck

  0