NFT preview card component with html & css responsive design
Design comparison
Solution retrospective
📝🎉 Hey there, Frontend Mentor community! I'm thrilled to submit my first solution and would love to receive your feedback on it. 😊
👋 Introduction: I'm excited to be a part of this amazing community and have recently completed my very first frontend challenge. It was a fantastic learning opportunity, and I'm eager to hear your thoughts on my solution.
🌟 Challenge: The challenge I tackled was NFT Preview Card Component. It presented a unique set of requirements and allowed me to dive into HTML and CSS to bring the design to life.
📚 Tech Stack: For this project, I used the following technologies:
HTML CSS
🧐 Approach: I approached this challenge by carefully studying the provided design and breaking it down into smaller components. I then focused on implementing each part using HTML and CSS. I made sure to pay attention to details like proper indentation, semantic HTML tags, and reusable CSS classes to ensure a clean and maintainable codebase.
💡 Learnings: While working on this project, I gained valuable insights into HTML and CSS. Here are a few key learnings:
Structuring content using HTML tags effectively Applying CSS styles to achieve the desired visual design Ensuring responsiveness and compatibility across different screen sizes
🌈 Feedback Request: I would greatly appreciate any feedback or suggestions you might have regarding my solution. It could be related to code organization, naming conventions, or even ways to improve the overall design. Your feedback would be immensely valuable in helping me grow as a frontend developer.
🙏 Thank you in advance for taking the time to review my work! I'm open to any feedback and excited to continue my frontend development journey. I'm grateful to be part of such an incredible community. 😄✨
Best regards, Oscar
Community feedback
- @fernandolapazPosted over 1 year ago
Hi 👋, some of this may interest you:
- When there is a hover state over an element it means that it is interactive, so there must be an Interactive Element around it (like a link or a button). So, the image should be wrapped with a
<a>or<button>(depending on what happened when clicking on it), and also 'Equilibrium #3429' and 'Jules Wyvern' should be wrapped with the<a>tag.
- Every page should have an
<h1>.
- The icons are decorative and therefore need an empty
altattribute to be ignored by screen readers.
- Although in this case there is not much difference, it might be good to get used to designing with the Mobile First approach (which means designing for mobile first and then for desktop or any other device) as it is widely considered best practice.
I hope it’s useful : )
Regards,
Marked as helpful1 - When there is a hover state over an element it means that it is interactive, so there must be an Interactive Element around it (like a link or a button). So, the image should be wrapped with a
Please log in to post a comment
Log in with GitHub
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord