Stats preview card component

Community feedback

• 

  Pedro Celeste•130

  @Pedro-CelestePosted almost 2 years ago

  Hey @fatimamammadova! 😎👍🏻

  Congratulations on finishing this challenge, you did well!

  Here's some things you could improve in your code:

  HTML:

  • Every webpage should be contained in at least one semantic landmark, this helps a ton with accessibility. Instead of using <div class="container"> as the central element you can use <main> instead.

  • HTML headings work based on a structure, it's not a good idea to start with <h3> since there's no previous <h2> or <h1> in the document.
    You can improve the structure of you markdown by changing <div class="card-title"> to something like <h1>Discover the benefits of...</h1>.

  • Lastly, you can simplify your code for the three last items using a unorderd list, like this:

  <ul>
    <li><strong>10k+</strong>
       <br>COMPANIES</li>
     <li><strong>314</strong>
        <br>TEMPLATES</li>
      <li><strong>12M+</strong>
         <br>QUERIES</li>
  </ul>
  

  This is a matter of preference, but I would argue that this is a lot simpler than creating tons of divs haha. 😅

  CSS:

  • There are a lot of time in your CSS that you use flexbox to center your elements, You could save time and space creating the following rule:

  .flex {
      display: flex;
      justify-content: center;
      align-items: center;
  }
  

  And apply it on your html elements like this: <div class="container flex">.

  • When defining values for font-size it's usually a better idea to use relative units. They allow you to make more accesible and responsive webpages. There's an awesome article explaining why and how here.

  Hope to see more of your code on the platform soon. Have a nice one!

  Marked as helpful

  0
• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  Replace <div class="container"> with the main tag <main> and <h3> with <p> to fix the accessibility issues. click here for more on web-accessibility and semantic html

  To center .container on the page using flexbox, replace the height in the body with min-height:100vh.

  For the color of the image, add a background-color of soft violet to .card-image and add object-fit: cover, mix-blend-mode: multiply and opacity: 0.8 to the img.

  .card-image{
  background-color: hsl();
  }
  img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: multiply;
  opacity: 0.8;
  }
  

  Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  Marked as helpful

  0