Frontend Mentor - NFT preview card component solution

Frontend Mentor challenges help you improve your coding skills by building realistic projects.

This challenges help you improve your coding skills by building realistic projects. To do this challenge, you need a basic understanding of HTML and CSS.

This is a solution to the NFT preview card component challenge on Frontend Mentor.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Overview

The challenge

The challenge is to build out this preview card component and get it looking as close to the design as possible.

Users should be able to:

• See hover states for interactive elements
  • In the thumbnail picture.
  • In the NFT name.
  • In the author name

Screenshot

Links

• Solution URL: Github Repository
• Live Site URL: Github Pages

My process

Built with

• Semantic HTML5 markup
• CSS3 with custom properties
• Sass - stylesheet language that’s compiled to CSS
  • ITCSS + BEM Methologies.

Continued development

The next step is to convert this NFT card into a web component with the help of LIT, a simple library for building fast, lightweight web components.

On the other hand I will continue looking for new challenges in Frontend Mentor.

Useful resources

• Sass - A stylesheet language that’s compiled to CSS

• minireset.css - A tiny modern CSS reset

• ITCSS - Managing CSS Projects with ITCSS

• BEM - Block Element Modifier is a methodology that helps you to create reusable components and code sharing in front-end development.

• LIT element - Simple & Fast Web Components.

Author

• Frontend Mentor - @terremotoBCN
• Twitter - @terremotoBCN
• WordPress - @terremotobcn
• Tumblr - @terremotobcn

Acknowledgments

Many thanks to Frontend Mentor and its fantastic community that allows us to grow and improve as Frontend developers.