Skip to content
Submitted over 1 year ago

NFT preview card USING FLEXBOX

arjuyyy•40
@arjuyyy
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...NFT preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

I found it challenging to use the CSS "Position" Property and struggled with the best possible approach to this. Since I'm a newbie, I have to watch videos and tutorials about CSS Position and Display again and again to have a clear understanding. Display FLEX property helped me a lot not only in this challenge but as a Web Developer.

I feel like there's a better, more convenient, and more efficient way to code this (with less code of lines) but as of now, prior to my current knowledge, this is my best approach.

Display flex property saved the day!!!!!!

Community feedback

  • Bruno Pinho•80
    @pinhobPosted over 1 year ago

    Hey, arjuyyy! Congrats. Great work! 🎉

    And flexbox is awesome! Time after time saves my day too! 🤓

    If you want a really good article to learn more about this, I really recommend this one.

    If you want to save a (very) few lines you can put the attributes at the end in just one declaration, like:

    .name:hover, h2:hover {
    color:hsl(178, 100%, 50%);
}

    The same for all the cursor: pointer declarations. But, well, this is just a question of preference.

    Anyway, great job. Good coding! 🚀

    Marked as helpful
    0
    arjuyyy•40
    @arjuyyyPosted over 1 year ago

    @pinhob oww! ok! great advice! I'll make sure to implement that in future projects!!! thanks for the great feedback and god bless!!

    1
    arjuyyy•40
    @arjuyyyPosted over 1 year ago

    @pinhob btw your article is so helpful!!!! the interactive feature helped me visualize easier!!! damn, your website is top-tier for real hahahaha

    1
    Bruno Pinho•80
    @pinhobPosted over 1 year ago

    @arjuyyy yeah, josh's blog is great! there are A LOT of awesome posts there. btw, I'm doing his course and it's also excellent - I really recommend it!

    0

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