Skip to content
Submitted over 3 years ago

HTML/CSS Beginner's First Attempt at a Challenge

Andy Ouyang•30
@ahouyang
A solution to the NFT preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Thanks for anyone looking this over! I'm currently a software developer who works primarily in Java, but I have been learning front end web development in order to expand my skills/employability. I'm still learning the fundamentals so I recognize that my implementation of this challenge may be shaky.

What's the best practice way to apply CSS selectors? I found myself here using IDs sometimes, classes sometimes, and tag hierarchy sometimes, not totally sure when to use what. Are classes generally the preferred way? Or are classes only preferred when they're reusable? Some clarity on best practices here would be helpful!

I have many other questions about flexbox/why things were behaving a particular way but I think those are best answered by myself going through some solutions and trying them out.

Code

Please log in to post a comment

Log in

Community feedback

  • Web Wizard•5,690
    @rsrclab

    Hi, @ahouyang ~

    Congratulate on your solution to the challenge on FM platform. I have studied your work carefully and learned a lot from it.

    Here are some of the tips I like to provide.

    1. I hope you to add transition on heading and creator name.
    2. Spacing, font-sizes don't match design. As a front-end developer, pixel-perfect and responsiveness is really important.
    3. For classing elements, I recommend using BEM structure. You can find about it on google easily.
    4. On smaller devices, things don't match design well.

    https://www.frontendmentor.io/solutions/my-first-solution-on-chanllenge-V-4IzAivH

    Here is my solution to this challenge, and if it can help you even a bit, it would be happy to me.

    Cheers ~

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