NFT Preview Card using HTML, CSS and Flexbox

Hi 👋, perhaps some of this may interest you:

HTML, ACCESSIBILITY:

• Regarding your comment, when there is a hover state over an element it means that it is interactive, so there must be an interactive element around it (like a link or a button). So, we should use a <a> or <button> to wrap the image (depending on what happened when clicking on it).

• Every page should have an <h1> to improve user experience and because it is an important element when it comes to SEO. And it is good not to skip heading levels (start with <h1>, then <h2>, and so on).

CSS:

• You might consider using some CSS reset as a good practice at the start of each project, to have a clean starting point and reduce differences between browsers. A popular CSS Reset from Josh Comeau 🔎

For example, these are some very common and useful ones:

*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}

This will remove the vertical scrollbar you have, for example.

Please let me know if you want more info on any of these topics or disagree with something. I hope it’s useful 🙂

Regards,