Start-preview card component using SASS

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 1 year ago

  Hi, Shaxboz! 👋

  For the statistic, I recommend using a list element (<ul>) instead of <div> and <p> elements.

  For the image overlay, if you are making the image as the background image, you should use background-blend-mode instead of mix-blend-mode. Also remove the following styling: filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25)); and opacity: 0.75;. Those are not needed to make the overlay.

  I hope my feedback helps. Have a great coding day! 😄

  Marked as helpful

  0
• 

  P

  Nikitossik•370

  @NikitossikPosted over 1 year ago

  Hey, nice job, but there is enough room for improvements:

  • pick the right classnames for the elements
  • avoid using fixed widths or heights, because it can cause problems like horizontal scroll, overflows on diffenrent screen sizes etc. Use max/min-width, relative units, it's more reliable
  • actually it's not bad, that you used SCSS, but preprocessors are made to reduce the amount of work. If speaking of SCSS, it has nesting, mixins, math, templates and other cool things. I'm trying to say, that you didn't benefit from it, so it wasn't important to use SCSS, because your code is plain CSS

  good luck, keep learning!

  Marked as helpful

  0
• 

  Francisco Carrillo•5,540

  @frank-itachiPosted over 1 year ago

  Hello there 👋. You did a good job!

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

  HTML 📄:

  • Wrap the page's whole main content in the <main> tag.

  • The heading order is important in the html structure so try to always start your headings with an <h1> tag and then you can decrease by one if you need to use more heading in your html code.

  • Since the mobile design has a different image, you can use the <picture> tag that allows you to interchange the images depending of the viewport size. Red more about this awesome tag here

  I hope you find it useful! 😁😁 Above all, the solution you submitted is great👌!

  Happy <coding /> 😎!

  Marked as helpful

  0