Submitted over 1 year ago

NFT Preview Card Component with Flexbox

Sahorri• 120

@Sahorri

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

NFT preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

This is my 5th Front End Mentor project.

Overall I feel very comfortable writing HTML code. I'm starting to master CSS writing better, I've acquired some automatisms. And I try to simplify my code as much as possible and to make it as readable as possible for everyone. I also try to include some BEM methodology for the choice of class names.

What I learned :

Using "::after" and "::before" pseudo-elements to insert images before text.
Use of the overlay on an image to change the image depending on its state (hover).

What I begin to master :

Flexbox
Variables
Margin and Padding

Feel free to comment my code :)

Community feedback

Melvin Aguilar 🧑🏻‍💻• 61,220

@MelvinAguilar

Posted over 1 year ago

Hello again 👋. Good job on completing the challenge !

I have some suggestions about your code that might interest you.

Avoid repeating __ if you are using BEM naming convention because only one block name is allowed, For example, the class name .card__container__image contains the block name card and card__container.

You can see an example of this problem here: BEM Quick start - Nesting

You should wrap the image, title, and creator's name in an <a> tag, since an element has a :hover state and has a pointer cursor it is considered an interactive element (buttons, links, etc).

The eye icon is a bit hard to see.

I hope you find it useful! 😄 Above all, the solution you submitted is great!

Happy coding!

Marked as helpful

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord