Stats preview card component | Responsive | HTML & CSS

Community feedback

• 

  Julian Krüger•100

  @juliankrugerPosted almost 3 years ago

  Hi Tushar,

  this might look as much but trust me, it's not! The second paragraph is more important and easy to fix.

  Your design looks really good and it's close to the challenge. The image is a bit stretched and with varying screen size it gets squished. (Looks fine on the two targeted screen sizes, though) A possible solution is to use the image as a background-image in CSS. With background-blend-mode you can also take control of the coloring a bit more and with background-position you can control the position.

  Anyway, the more important issues at hand (that are also way easier to fix) are the Accessibility and HTML issues in your report.

  Accessibility: That div at the bottom should be a footer, it helps the semantic structure of the page and boosts accessibility.You also used the <main>-tag, that is nice!

  HTML: The article tags are misused as stated in the report. This is some data that is for itself just a single statement, it doesn't contain a heading. An article should be something that could be viewed on its own completely, like the whole card for example - with a heading and more content. But on the upside: You didn't fall into the trap turning the big texts of the data into headings. These are maybe paragraphs or items of a list of features. Wrapping the "1k+" and the "companies" in one tag was the right move, but the tag should be a <p>- or <li>-tag in my opinion.

  I hope that helps, have a great day!

  Greetings!

  1

  ---

  

  Tushar Biswas•4,080

  @itushPosted almost 3 years ago

  @juliankruger Thank you very much for the detailed feedback.

  1. Yes, I could have totally used <p>- or <li> tags in this solution, but for some reasons I didn't. However, I did use them in my next solution, thanks to you.

  2. I'll remember to use "background-blend-mode" to control the coloring in my future projects.

  3. I'll certainly take care of the accessibility & semantic structure issues from now.

  Thanks for your input. Happy to connect. Until next time, happy coding :)

  1

  

  Julian Krüger•100

  @juliankrugerPosted almost 3 years ago

  @itush Thanks for your reply, glad you could take something away from this exchange!

  Happy coding to you, too! :)

  1
• 

  Ya.•50

  @Ya911Posted almost 3 years ago

  nice

  1

  ---

  

  Tushar Biswas•4,080

  @itushPosted almost 3 years ago

  @Ya911 Thank you very much for liking my solution. Happy to connect :)

  0
• 

  Aakash Verma•6,710

  @skyv26Posted almost 3 years ago

  Hi! Tushar, I hope you are well and good. I gave few feedback on your work already and now I again I am going to tell you about your design. You made it really well. As you can see you are pretty close to the preview design. But still I would say focus on detailing. Like 12M+ there you used small letter 'm'. Why it is so important to focus on this little thing ? Answer is to test your skill on CSS. Now I am going to tell you some other issue .

  In mobile view your left container text is going little bit towards right handside, in short, not aligned to center hoizontally. And I found problem below:

  .left {
      background: var(--Dark-desaturated-blue-cardbg);
      flex: 1;
      margin: 10% 0% 10% 10%;
      border-top-left-radius: 10px;
      border-bottom-left-radius: 10px;
      padding: 5% 0% 5% 5%;
  }
  

  you can see you missed adding 5% and used 0%.

  padding property structure.

  padding: TOP, RIGHT, BOTTOM, LEFT;

  just use

  padding: 5%; and your text will be in center position

  I hope you understand and solve your issue. Again I would say if you really wanna get client then focus on your skills.

  Good Luck

  1

  ---

  

  Tushar Biswas•4,080

  @itushPosted almost 3 years ago

  @skyv26 Thanks for the honest feedback :) -Rectified the typo. -Fixed the padding.

  No place for unskilled developer, couldn't agree more!

  1