Profile Card using SASS, flex

Community feedback

• 

  Alamin•2,000

  @CodeWithAlaminPosted almost 2 years ago

  Hi Szilvia Horvath 👋 Great job on completing this challenge! Your HTML and SASS code is well-structured and easy to read, which is very important for maintainability.

  One suggestion for improvement would be to use more semantic HTML elements where appropriate. For example, you could use a <header> element for the top section of the card instead of a <div> element. This would make the HTML more descriptive and easier for other developers to understand. Here is an example of how you could do this:

  <div class="content">
    <h1><strong>Victor Crest</strong> 26</h1>
    <p>London</p>
  </div>
  <header class="content">
    <h1><strong>Victor Crest</strong> 26</h1>
    <p>London</p>
  </header>
  

  I also noticed that the .stats element has a fixed height, which may cause issues if the data it contains exceeds the allotted space. Instead of setting a fixed height, you could use a technique like flexbox or grid to make the element more flexible and responsive. Here is an example of how you could use flexbox to achieve this:

  /* Before */
  .stats {
    height: 50px; /* fixed height */
  }
  
  /* After */
  .stats {
    display: flex;
    flex-wrap: wrap; /* allow content to wrap to multiple lines if necessary */
  }
  

  Overall, good work on this challenge. Keep up the good coding!

  I hope this feedback was helpful.😊 Keep up the good work!👍

  Marked as helpful

  1