Skip to content
OverviewSolutions
3
Comments
5
Mark Lawson
@walkonmars36

All comments

  • Mark Lawson•90
    @walkonmars36Posted over 1 year ago

    Hi

    These don't need to be links

      <ul>
          <li>10k+ <a href="#">companies</a></li>
          <li>314 <a href="#">templates</a></li>
          <li>12m+ <a href="#"> queries</a></li>
  </ul>

    Using a list is the right way to go, but for each list item you could specify two <spans>, for example,

      <ul>
          <li>
               <span>10k+ </span>
               <span>companies</span>
          </li>
  </ul>

    Make your span's display:block, as they are inline by default, meaning they'd sit next to each other and give each one a class name to control the styling.

    Also on your main, setting a width, say of 90% and a max-width of around 1110px (use the rem equivalent) will give you some space either side of the card on mobile and ensure it doesn't grow beyond a maximum size on desktop.

    There's a few other things, but this should help you 🙂

    Best wishes

    Marked as helpful
    2
  • Brijeshkumar Patel•200
    @brijeshkumar001Submitted over 1 year ago

    Hi I’m Brijeshkumar and this is my solution for this challenge.

    Any suggestions on how I can improve and reduce unnecessary code are welcome!

    Thank you. 😊

    3 column preview card component

    2
    Mark Lawson•90
    @walkonmars36Posted over 1 year ago

    Hi.

    Well done for completing the challenge. You might want to read up on the use of heading tags. You're using multiple <h1>'s here which should really be <h2>'s. MDN docs points out that though it is allowed in HTML standards to use multiple <h1>'s on a page, these mustn't be nested. Overall it's considered good practice to only use one, for the main page heading.

    Have a look at the MDN page for section headings

    This page also gives a good account from an SEO perspective - SEO Sherpa

    All the best

    0
  • Mark Lawson•90
    @walkonmars36Posted over 1 year ago

    Also I use a resource from W3 schools for easily converting px to em, but be careful where you use em instead of rem. I think Kevin explains the difference in the above video, but if not the main thing to be aware of is that em only looks up one level, to an element's parent font size (which could be a h1 for example), whereas rem always looks to the root (r) font size. I tend to use rem for everything, except for padding, as this can work better if adding padding to button text for example.

    Here's the px to em calculator

    Marked as helpful
    0
  • Mark Lawson•90
    @walkonmars36Posted over 1 year ago

    Hi.

    Well done for completing the challenge. There's a few things you might want to consider looking at.

    First of all the HTML. You're getting those warnings above because your h2 needs to be an h1. Have a read of the document under the read more link. Also the second warning is because your attribution div needs to be wrapped in a footer section.

    Your stats div needs to be a <ul> with three <li> in it, then you can place two <span>s inside each <li> . I did exactly what you did here. It's semantically wrong and also bad for accessibility.

    <ul class="praga">
   <li> 
        <span>10k+<span>
        <span>companies</span>
    </li>

 ..... etc.
      </ul>

    You need to make the span display: block, as it is inline-block by default.

    Don't forget to put your name in the coded by too, or remove it completely.

    In the CSS, you might want to think about starting to use ems and rems instead of px. This is essential for responsiveness. Take a look at this video by the brilliant CSS guru Kevin Powell.

    His advice, on this video and others, will also help you in understanding about setting a max-width (responsive) as opposed to width (which is fixed), as you're doing in the container width.

    All the best.

    Marked as helpful
    0
  • Riley•260
    @rileydevdznSubmitted over 1 year ago

    Hey guys!

    This is my first submit to the site. I used Flexbox for the card and the <img> element with srcset and sizes attributes to make the images responsive. I also used mix-blend-mode to blend the backgrounds.

    I had a couple of questions and would appreciate any general feedback/suggestions as well.

    • I used the <img> element specifically because I wanted to play with responsive images, but I also feel this image could be considered decorative and could be used as a background image instead. Any thoughts on whether you would consider this image worth an <img> element, or better off as a background image?

    • I was also experimenting with CSS clamp() in this build. I've used clamp() for font sizes previously, but also tried it out on width of the card and even a row-gap out of curiosity. Has anyone experimented with functions this way, and have you found a method you prefer for specific situations? Like preferring to use max() for widths, as an example. Would love to hear anyone else's ideas, or suggestions to improve what I’ve done here.

    Thanks!

    Flexbox and responsive imgs with srcset, mix-blend-mode backgrounds

    3
    Mark Lawson•90
    @walkonmars36Posted over 1 year ago

    Hi Riley, good work with the challenge, I've also just posted this as my first solution.

    I did use the background property to place the image in an empty div. I decided that it was decorative not informative and according to w3.org a decorative image should ideally be placed in the background property.

    I also used clamp for the first time, both with the h1 and for margin spacing. Pretty happy with what I got, I used an online generator. It helps with the tricky middle parameter. check it out

    Happy coding 💪

    Marked as helpful
    0