NFT preview card component

Community feedback

• 

  Sandro•1,150

  @sandro21-glitchPosted almost 2 years ago

  Hi Eddy

  Use semantic HTML elements where appropriate, such as header, main, and footer for their respective sections.

  Use descriptive and meaningful class and id names, such as img-card instead of just img.

  Use CSS variables for repeated values, such as the background color and font family, to make it easier to maintain and change styles in the future.

  Consider using CSS flexbox or grid for positioning elements instead of using floats.

  Use descriptive class names, such as ".card-header" or ".card-body", to make your CSS code easier to read and understand.

  Remove unused CSS styles to make the code cleaner and faster.

  Use media queries to adjust styles for different screen sizes to ensure the layout is optimized for different devices.

  Use shorthand properties, such as "margin: 10px" instead of "margin-top: 10px; margin-bottom: 10px; margin-left: 10px; margin-right: 10px;", to make the code more concise.

  Happy Coding

  Marked as helpful

  1
• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  Add the alt attribute alt=" " to the img tag to fix the error issue. The value of the alt attribute is the description of the image.

  To center .card on the page using flexbox, add add min-height:100vh; display: flex; align-items: center: justify-content: center; to the main

  To center .card on the page using flexbox:
  main{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  }
  

  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