Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted 5 months ago

HTML, CSS, Git, GitHub, Netlify, PerfectPixel, Lighthouse

accessibility, bem, lighthouse
Elmar Chavez•2,090
@CodingWithJiro
A solution to the NFT preview card component challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


What are you most proud of, and what would you do differently next time?

I'm proud that I can create, document, and deploy simple projects faster now.

What challenges did you encounter, and how did you overcome them?

Of course, coding from only a JPG design image is always a challenge but I'm getting the hang of it now and learned some tricks with PerfectPixel.

One challenge I did not expect was with the shadow of the card. I was not sure if I was to use multiple box-shadow or use outline with outline-offset but I think I managed to pull it off with just shadows (I think).

What specific areas of your project would you like help with?

Up until this point I've been using BEM as my style of coding for CSS. What I'm not sure is if my code is really classified as pure BEM.

I read a week ago that some developers use BEM but is not fully loyal to it. They adapted the style but not applied in some elements.

I want to know if mine is good enough or close to being called BEM-ish. If it is not, I want to know how I can upgrade my coding style even more.

Best practices is always welcome!

Code
Loading...

Please log in to post a comment

Log in with GitHub

Community feedback

No feedback yet. Be the first to give feedback on Elmar Chavez's solution.

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

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner
  • Use cases

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License