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
https://gyazo.com/183c0020686316c1731399e21f84e454
- Live Site URL: https://thejackshelton.github.io/NFT-preview-challenge/
I began with making div's and adding all the HTML elements necessary. I then started adding CSS and customizing the necessary elements similar to the solution. This is my first ever coding project, so I spent a lot of time looking at commands and how to best implement them. I was unable to figure out how to add the view icon over the image when hovering over it, and I'd love to figure out how to implement it.
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
I learned how to use the position function, and refreshed my memory on the commands I learned from the course I was taking. I started learning CSS and HTML5 about a week and a half ago. I look forward to continue learning more!
I'm not comfortable enough with using CSS and HTML5, and I would like to increase the speed at which I write code and figure out solutions as well. I need to get better at flex box, grid, and overall positioning items at different areas faster.
- Mozilla Developer Network - I used it for certain commands and syntax.
- Frontend Mentor - @thejackshelton
This is where you can give a hat tip to anyone who helped you out on this project. Perhaps you worked in a team or got some inspiration from someone else's solution. This is the perfect place to give them some credit.