Skip to content
Submitted over 1 year ago

NFT Card Component

accessibility, semantic-ui, sass/scss
P
legaldrummer•30
@fullspeccoder
A solution to the NFT preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What did you find difficult while building the project?

Most of this card component was easy to understand and create from scratch. I did have a small issue with the functionality but ultimately I pulled through finding some stuff on MDN's website for extra help on what I needed to do to implement a hover functionality.

Which areas of your code are you unsure of?

I'm unsure if I have the right idea with using classes vs. ids vs. normal selectors.

Do you have any questions about best practices?

I would like some insight from anyone that could help me understand what I should do to make the code a bit cleaner or more developer friendly.

Code

Please log in to post a comment

Log in

Community feedback

  • Loris PUECH•180
    @Shiiron

    Hi !

    First of all, congratulations on completing this challenge ! i hope it was fun and will make you do even more challenges in the futur !

    Classes vs Ids vs Selectors I don't think there is a definitive answer to that but as far as i'm concerned, i tend to avoid ids as much as i can because we use Frontend framework to make reusable component. If you keep that idea in mind, we won't have a lot of elements with ids, since we don't want any duplicate

    I think the way you handled it is pretty clean with the use of classes and selector. This avoid having nightmare nesting (especially in scss) and allow you to target multiple elements easily. My general rule is to add a class when i need to specifically target an element, otherwise i use selector as much as possible. It's also important to keep in mind that in frontend framework, with the use of components, using selector can cause conflict because css loaded with 1 component can cause effect on another component if you only target selectors

    Good practice I would give just 2 advices from what i saw, since you used native HTML / CSS :

    • You have an assets folder but you still have svg markup in your html => I think it's better to keep assets separated from the code, therefore i would make .svg file with all the svg you have in the html (for example, the eye icon you have on hover => make an eye.svg file and paste code there). It makes a cleaner and easier code to read
    • Create multiple files => The reset part in your css is good but i would separate it from the style.css file and create a reset.css file. This will be useful if you want to try futur framework where you want as little code as possible so everything has 1 single purpose. But you use comments to separate your css files which is already very good ! (don't be afraid to use even bigger comment block)

    I hope my feedback will be useful to you ! i'm not the best devs around but if i can help, i try my best !

    Have a great day and keep up the good work !

    Marked as helpful

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