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.
Note: Delete this note and update the table of contents based on what sections you keep.
Not a very difficult challenge, it's a newbie level challenge. There's not much changing from the mobile design, so creating a responsive design was quite easy
Users should be able to:
- View the optimal layout depending on their device's screen size
- See hover states for interactive elements
- Solution URL: Github
- Live Site URL: Live Preview
As always, I begin with analysis of both designs, identifying the breakpoints,i.e., how transitioning will happen from one device to another. Then, I lay the foundation with html. Then later on, I add the styling
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Mobile-first workflow
As always, I am continuing to grow my knowledge with basic designs. I have learned how to use the nth child selector and also how to add, simple overlays
I want to continue putting my css skills to the test, and to also work on harder designs, with js, in order to improve my web development skills
- Online Repo - Github
- Frontend Mentor - @munyite001
- Twitter - @Emunyite