Frontend Mentor | NFT preview card USING FLEXBOX coding challenge solution

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

@pinhob

Posted 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

arjuyyy• 40

@arjuyyy

Posted 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!!

arjuyyy• 40

@arjuyyy

Posted 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

Bruno Pinho• 80

@pinhob

Posted 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!

NFT preview card USING FLEXBOX

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community