Stats preview card using html and css. Used flexbox, no grid.

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello Canice, Congratulations on completing this challenge!

  Here's two tips for you:

  1.The image is almost perfect, all you miss to match the blending color is to decrese the opacity to have the image less dark use a value around opacity: 80%:

  #image-box {
      background-image: url(./images/image-header-desktop.jpg);
      background-color: hsl(290deg 77% 57%);
      background-blend-mode: multiply;
      border-radius: 0 0.5em 0.5em 0;
      width: 50%;
      opacity: 80%;
      background-repeat: no-repeat;
      background-size: cover;
  }
  

  2.It is not advisable to use IDs as CSS selectors because if another element in the page uses the same/similar style, you would have to write the same CSS again. Even if you don't have more than one element with that style right now, it might come later.

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  1

  ---

  

  Canice•80

  @Canice10Posted about 2 years ago

  @correlucas I applied this but it didn't work too😥. Really lost on this one. Thanks for the tips, I'd sure make use of them.

  0
• 

  Vanza Setia•27,775

  @vanzasetiaPosted about 2 years ago

  Hello, Canice! 👋

  Congratulations on finishing this challenge! 🎉

  I agree with what @correlucas said about id. It is not reusable. Use single class selectors instead.

  For the image, I recommend making the image available on the HTML. This way, you don't need to specify width and height. After that, use picture element to control which image should be used based on the media condition.

  Then, use mix-blend-mode to create the overlay. After that, you can adjust the opacity of the image.

  One more suggestion is to prefer unitless numbers for line-height values to avoid unexpected results. The MDN documentation explains it well.

  I hope you find this useful!

  Marked as helpful

  0

  ---

  

  Canice•80

  @Canice10Posted about 2 years ago

  @vanzasetia I've tried using the picture element in previous challenges but I didn't get the best out of it. I'll use more of this in my next/future projects. Thanks for the help, I really appreciate it.

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted about 2 years ago

  @Canice10

  Have you tried using picture element for this challenge? When it is not appropriate to use picture element on other challenges, that doesn't mean you should avoid it. Of course, It's not always the case to use the picture element.

  Use picture element when there are two or more versions of the images. We should be using whatever element in the right situation.

  Marked as helpful

  0

  

  Canice•80

  @Canice10Posted about 2 years ago

  @vanzasetia Okay, I'll try again. Please when do you think is best for me to try out JS challenges?

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted about 2 years ago

  @Canice10

  My roadmap in Frontend Mentor was to complete all the free HTML and CSS challenges first. After that, I decided to practice some JavaScript by doing the newbie JavaScript challenges first.

  The most important thing is to get feedback and make sure to focus on web accessibility.

  The A11Y Project website is a good resource to learn about web accessibility. I recommend reading "Solid Start - Accessibility For Beginners" to give you an overview of what needs to be considered to create an accessible website.

  Marked as helpful

  1

  

  Canice•80

  @Canice10Posted about 2 years ago

  @vanzasetia

  I should be able to follow your roadmap as well. Thanks for the tip. I just submitted another assignment now.

  1