NFT Preview Card

Made with HTML, TailwindCSS

Built with Webpack

ℹ️ About

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

The challenge is to build out an NFT Preview Card and get it looking as close to the design as possible.

See task.md for more details about the task.

Users should be able to:

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

⚙️ Tools

• HTML5
  • Semantic HTML
• TailwindCSS
  • Webpack + PostCSS + Tailwind
• NodeJS
• Webpack
• Github Pages
  • Hosting

🔨 Build project

Command	Description
npm install	Installs required npm packages. Run it before building the project
npm start	Builds application in development mode, launches a server that opens in a new browser tab
npm run dev	Builds application in development mode, results may be found in ./build folder
npm run build	Builds application in production mode, results may be found in ./build folder. Files are minimized, hash added to filenames to help when dealing with caching

📁 File Structure

Path	Description
build	Folder with files generated by Webpack
static	Folder with static assets (images, favicon)
src	Source files needed for application development
src / index.scss	Main styles, Tailwind declarations
docs	Folder with additional information, documentation
docs / design	Folder with images of how the interface must look like
docs / results	Folder with screenshots of how the application works after being fully developed
docs / README-template.md	Template for README.md, don't use it (from FrontendMentor)
docs / style-guide.md	Style information: color palette, fonts, etc. (from FrontendMentor)
docs / task.md	Detailed task description (from FrontendMentor)
docs / nft-preview-card.zip	Initial archive provided by Frontend Mentor
LICENSE	MIT License
package-lock.json	JSON file that keeps track of the exact version of every package that is installed so that a product is 100% reproducible in the same way even if packages are updated by their maintainers
package.json	JSON file that holds various metadata relevant to the project. This file is used to give information to npm that allows it to identify the project as well as handle the project's dependencies
.prettierrc	Config for Prettier VS Code plugin
webpack.common.js	Contains configuration common for build and dev configs
webpack.dev.js	Contains configuration for development mode
webpack.prod.js	Contains configuration for production mode
postcss.config.js	PostCSS configuration file
tailwind.config.js	TailwindCSS configuration file

📦 NPM Packages

Package	Comment
css-loader	Is used by Webpack, resolves assets imported in css files, unites them in one file
css‑minimizer‑webpack‑plugin	Is used by Webpack, minifies css
html-loader	Is used by Webpack, resolves assets in html files. (Mode production works perfectly without it, but development mode for some reason sometimes loses some assets referred in html...)
html‑webpack‑plugin	Is used by Webpack, generates a html file from a template. Minifies html, adds links to js, css
mini-css-extract-plugin	Extracts transpiled css in a separate css file
postcss	Is used by Webpack, converts css written with PostCSS plugins to plain css
postcss-loader	Is used by Webpack, converts to css using postcss package
postcss-preset-env	Comes with PostCSS
style-loader	Injects CSS in index.html (used for dev mode only)
tailwindcss	CSS framework, works as a plugin to PostCSS
terser-webpack-plugin	Is used by Webpack, minifies js (comes with webpack, no need to install it separately)
webpack	Module bundler
webpack-cli	Required for work of webpack with v4 or later
webpack-dev-server	Launches developer server that automatically applies all changes in code
webpack-merge	Helps to merge configs (webpack.common.js + webpack.dev.js for example)

💡 Details

Working with TailwindCSS

Decided to experiment and use Tailwind for styles. Not just use, but combine it with Webpack. Took some time to configure everything together, but it worked.

---

Other notes

• Hover on link
• Hover on h1
• Hover on image

🔗 Useful resources

• Snippets for Tailwind - Highly recommend! Greatly saves time
• Tailwind Docs
• Setup Webpack with Tailwind CSS
• Prettier: VS Code plugin
• Tailwind CSS IntelliSense: VS Code plugin

👤 Author

• Frontend Mentor - @GrbnvAlex
• Telegram - @Arlagonix
• Github - @arlagonix