gmagnenat / nft-preview-card-component

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

Users should be able to:

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

Screenshot

Links

My process

Built with

  • Semantic HTML5 markup
  • Mobile-first workflow
  • Vue js - JavaScript Framework
  • Tailwind css - For styles

What I learned

I used this challenge to get back to tailwindcss and keep practicing basic layout composition in vue js.

Continued development

I need to find a way on how to optimize automatically the images and lower my CLS.

Useful resources

  • tailwindcss documentation - I had to regularly search in the documentation for the correct tailwin syntax. command + k for the quick search helped a lot.

Author

About


Languages

Language:Vue 66.0%Language:JavaScript 17.7%Language:HTML 13.6%Language:CSS 2.7%