Design comparison
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
- @MelvinAguilarPosted 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__imagecontains the block namecardandcard__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 helpful0 -
Please log in to post a comment
Log in with GitHub
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