Card Preview

Hi Mahmud

Here are some suggestions to improve your code

Use semantic HTML elements:

Instead of using a <section> element for the card, you could use an HTML5 semantic element such as <article> or <figure> which would better describe the purpose of the element.

Use CSS classes effectively:

You have used the same <br> tag multiple times to create spaces, instead you can use CSS classes to control the spacing.

Use CSS reset:

Instead of writing the CSS reset code manually, consider using a popular CSS reset stylesheet such as Normalize.css or Eric Meyer's Reset CSS.

Minimize the use of hardcoded values:

Instead of using hardcoded values like 5% for margins and paddings, consider using a relative value such as 1rem or a CSS grid/flexbox to create the layout.

Avoid over-qualified selectors:

Over-qualified selectors (e.g., .text-area h3) can make the code longer and harder to maintain. Consider using more specific class selectors where possible.

Happy Coding

Replace <section class="nft-card"> with the main tag and <h3> with <h1> to fix the accessibility issues.

To center .nft-card on the page using grid, add min-height:100vh to the body and remove the padding values in the body.

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

Hello @mahmudofficial1

I think it would look good by centering the component to the middle of the page. Add this to you body element in CSS. This should help

body {
height: 100vh;}

add some alt text for the img tag in div with the class nft-card. It would be great for accessibility

I hope this was useful 😊. also Congratulations on completing the challange.

HAPPY CODING!