Frontend Mentor - NFT Preview Card Component Solution

This is a solution to the NFT preview card component challenge hosted on Frontend Mentor. Frontend Mentor requires the use of front end skills to create websites and solve real world coding challenges.

Table of contents

• Overview
• The challenge
• Screenshots
• Links
• Built with
• What I learned
• Useful resources
• Author

Overview

This project contains my NFT preview card component design replication. It is the fourth challenge that I completed on Frontend Mentor.

The challenge

To create a NFT preview card component and have it look as close to the original design as possible.

Users must be able to:

• View the optimal layout depending on their device's screen size
• See hover states for interactive elements

Screenshot

Links

• Solution URL: My Official Solutions on Frontend Mentor
• Live Site URL: My Live NFT Preview Card Component Website

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Grid
• StackBlitz
• Prettier · Opinionated Code Formatter

What I learned

I learned how to use the :hover selector to swap images, add image borders & how to use basic Grid properties to style my project. I also reinforced my knowledge of how to format text, images & background elements.

Useful resources

• Prettier · Opinionated Code Formatter - This helped me format my code.
• StackBlitz - This is where I created my project.
• YouTube Grid Tutorial - Kevin Powell - This excellent tutorial helped me to understand the basics of Grid.

Author

• Website - Angie Moore
• Frontend Mentor - @Cyber-Chic
• Github - @Cyber-Chic
• YouTube - Angela Moore Featured Video