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.
Users should be able to:
- View the optimal layout depending on their device's screen size
- See hover states for interactive elements
- Solution URL: https://github.com/dieudonneallognon/nft-preview-card-component
- Live Site URL: https://dieudonneallognon.github.io/nft-preview-card-component/
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Less CSS Precompiler
- Gulp task Manager
- Mobile-first workflow
- Less CSS Precompiler
Aiming to gain more productivity while coding, I used the less css precompiler to reduce the amount of time and lines of css code I write. I have then an index.less file which is transpiled in index.css.
/* index.less */
html {
min-width: 375px !important;
min-height: 664px !important;
max-width: 1440px;
width: 100%;
height: 100%;
margin: auto;
body {
background-color: var(--main-very-dark-blue);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
height: 100%;
max-width: 375px;
margin: auto;
...;
}
}
- Gulp task Manager
Since code transpiling is not automatic, I used The Gulp task manager to watch my less file and automate the transpilation process when a the less file when it detects modification
/* gulpfile.js */
exports.watch = () => watch("src/*.less", compileCss);
- Github - dieudonneallognon
- Frontend Mentor - @dieudonneallognon
- LinkedIn - Dieudonné ALLOGNON