This is my solution to the NFT preview card component challenge on Frontend Mentor. Frontend Mentor challenges help improve our coding skills by building realistic projects.
Users should be able to:
- View the optimal layout depending on their device's screen size
- See hover states for interactive elements
- Solution URL: Add solution URL here
- Live Site URL: Add live site URL here
- Semantic HTML5 markup
- CSS custom properties
- BEM
- Flexbox
- Mobile-first workflow
I learned a lot about BEM in this project! 🚀 I tried to name all the CSS classes following the BEM precepts, like:
<main class="b-card">
<div class="b-card--img-overlay">
<img src="images/image-equilibrium.jpg" alt="Equilibrium art" class="b-card__img">
</div>I’m also happy to see myself using CSS Flexbox and Grid in the same interface. I’m improving in my knowledge about how CSS works and having a more logical approach, feeling less than is something like magic.
I also learned about the need of don’t spend so much time trying to figure out something alone and searching for help. So, after struggling with the best way to show a light blue over the image card when the user hovers, I find and adapt the codewithshadee solution.
Now I am eager to do more Frontend Mentor projects.
I discover BEM is an excellent option to organize and name our CSS classes in a clear way. So, I will definitely use it more in the future.
Something I want to improve in future projects is how I can use the ::before and ::after pseudo-elements to have more smart implementations for the layouts I am working on.
You can follow me on Frontend Mentor to see another futures solutions I developed:
- Frontend Mentor - @brunopinho
Or add me on LinkedIn and send me a message. I will love to talk:
- Linkedin - Bruno Pinho
Thank you for codewithshadee for recording his solution development process and sharing his solution with the community.