@VCarames
Posted
Hey @StigAkl, some suggestions to improve you code:
- To give you HTML code structure, you want to set up your code in the following manner (only did parent containers):
<body>
<main>
<article class=“card-container”></article>
</main>
</body>
The Main Element identifies the main content of the document.
While the Article Element will serve as the card’s container, because the card represents a complete, or self-contained, section of content that is, in principle, independently reusable.
More info:
https://web.dev/learn/html/headings-and-sections/
-
The NFT Alt Tag description needs to be improved upon. You want to describe what the image is; they need to be readable. Assume you’re describing the image/icon to someone.
-
The Icons serve no other purpose than to be decorative; They add no value. Their Alt Tag should left blank and have an aria-hidden=“true” to hides it from assistive technology.
-
Do not use Inline CSS. It can make your code difficult to read to others and make it difficult to update your code in a future time.
-
Wrap the "NFT image", "Equilibrium #3429" and "Jules Wyvern" in an Anchor Tags <a>. The anchor tag will allow users to click on content and have them directed to another part of your site.
-
This will reduce your code and make it responsive (add
max-width: 100%;to your image):
body {
min-height: 100vh;
display: grid ;
place-content: center;
font-size: 18px;
font-family: "Outfit", sans-serif;
font-weight: 300;
background-color: var(--color-main-bg);
}
.container {
max-width: 350px;
}
Happy Coding! 👻🎃
Marked as helpful
