Design comparison
Community feedback
- @petritnurediniPosted 9 months ago
Congratulations on completing the NFT Preview Card Component project! 🎉 Your work showcases good understanding and implementation of HTML and CSS. Here's some feedback to further enhance your project:
HTML Best Practices:
- Semantic HTML: Nicely done using
<div>
for layout! Consider using<figure>
and<figcaption>
for the image and its caption to enhance semantic meaning. - Alt Attributes: Make sure to provide descriptive
alt
attributes for your images. For instance,alt="Equilibrium #3429"
for the main image.
CSS Best Practices:
- Responsive Design: Your design looks great! Test it on various screen sizes to ensure consistency across devices.
- CSS Selectors: Your class names are clear and descriptive, which is excellent. Maintain this practice as your projects grow in complexity.
- Hover Effects: The hover effects on the image are a nice touch! Ensure they are also accessible to users who navigate using keyboards.
General Suggestions:
- Accessibility: Consider adding
:focus
styles alongside your:hover
styles for keyboard navigation. - Performance: Compress images to reduce load times. Tools like TinyPNG can help with this.
- Code Formatting: Consistent formatting in your code enhances readability. Tools like Prettier can automate this.
Keep exploring and challenging yourself. Each project is a step forward in your web development journey!
Further Learning Resources:
- MDN Web Docs for in-depth HTML and CSS guides.
- CSS-Tricks for advanced CSS tips.
- Web Accessibility Initiative (WAI) for guidelines on accessibility.
Marked as helpful1@xStephxPosted 9 months ago@petritnuredini thanks for advice! I followed all advices and will apply them in future projects. If you have any other suggestions feel free to text me!
1 - Semantic HTML: Nicely done using
- @miteshp98Posted 10 months ago
Looks Perfect ! ;)
2 - @Ojonimi182Posted 8 months ago
hi good day your work is impressive , i have a question though where did you deploy your site with the custom domain?
1@xStephxPosted 8 months ago@Ojonimi182 thanks for feedback! About deploying this solution I use Github pages. If you have some other questions or suggestions feel free to text me!
1@Ojonimi182Posted 8 months agothank you very much, please is there a way I can contact you privately cause I tried it and it didn't work for me@xStephx
1@xStephxPosted 8 months ago@Ojonimi182 contact me on discord, username - stefan.exe
0
Please log in to post a comment
Log in with GitHubJoin 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