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
  • Useful resources
• Author

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
• Live Site URL

My process

Built with

• Semantic HTML5 markup
• BEM className
• Sass use

What I learned

Review the definitions of all Semantic HTML5 elements. Knowing a lots about the default CSS style about those

Using Sass Nesting with BEM helps me have more vivid structure where I'm styling.

Continued development

1. I would compare different Reset CSSs from Andy Bell, Joshwcomeau and Elad Shechter to understand their opinions for modern reset css.

2. I would learn Sass guideline from this article. The most important learning would be the structure of file management.

3. I would learn more about BEM from GetBEM and compare with SMACSS, OOCSS.

Useful resources

1. Semantic elements: This helped me for knowing how to choose quite correct tag for my HTML structure
2. Sass Basic Guide: This helped me for using the basic Sass
3. GetBEM: This helped me knowing the definition of B, E, M and making me set more accurate class name

Author

• My github - Wei Kai
• Frontend Mentor - @Beginneraboutlife116
• Twitter - @WeiKaiLin2