Frontend Mentor - NFT preview card component solution

This is a solution to the NFT preview card component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

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

Overview

The challenge

Users should be able to:

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

Screenshot

Links

• Solution URL: https://www.frontendmentor.io/solutions/css-flex-css-custom-properties-vs-code-KyN2E0wqb
• Live Site URL: https://mynft.netlify.app/

My process

Built with

• HTML5
• CSS custom properties
• Flexbox

What I learned

I liked the fact that I didn't have to be repeating my color schemes. I just used a variable. It's my second time using custom properties in css, thought it's easier in Sass. I plan to keep to this practice more.

:root{
  --softBlue: hsl(215, 51%, 70%);
  --cyan: hsl(178, 100%, 50%);
  --mainBG: hsl(217, 54%, 11%);
  --cardBG: hsl(216, 50%, 16%);
  
}

Continued development

Mobile responsiveness is one of the area I should focus on, I sometimes forget to account for mobile devices. I just see the large and how everything is laid out easily and it escapes me.

Author

• Website - Ronen Hammond
• Frontend Mentor - @RonenTGreat
• Twitter - @Ronen_T_G

Acknowledgments

Thu Nghiem. His article about creating cards was very helpful to me. Learn about that set the ball rolling for me and made the rest very easy.

Sankara and his YouTube Channel. Through his video I was able to get an understanding of the active state for the image which was giving headaches 😂.