Skip to content
Submitted over 3 years ago

Solution with HTML, SASS & some Flexbox

Wild_Tsunami•120
@WildTsunami
A solution to the Four card feature section challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Not sure about my Flexboxes for the Desktop cards part, but it works so...

I'd like to improve about the semantic, because I found myself rarely using the good elements (for exemple, I used <p> for the second line, but maybe a <h2> or something like that would be better).

Any ideas on that subject ? (and of course I'm still taking suggestions about the rest).

Code

Please log in to post a comment

Log in

Community feedback

  • Raymart Pamplona•16,040
    @pikapikamart

    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.

  • alsir hamory•640
    @alsir

    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.

  • Aakash Verma•9,500
    @skyv26

    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

Join 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