Submitted over 2 years ago

Responsive NFT preview card component using a mix of grid and flexbox

Olayemi Ibrahim•30

@olayemiibrahim

Preview site View code

This is a solution for...NFT preview card component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

Is there a proper way to nest elements? What would be considered over-nesting? Why does the <hr> tag affect my classes and my ability to select them via css? For example, in my HTML code I originally specified 5 divs with the class name "item" with an hr tag in between the 4th item and the 5th. That hr tag did not have the class name item at the time. For some reason, I was unable to select my 5th item in css via nth-child(5). I had to select it via nth-child(6) and I was extremely frustrated because I didn't understand why. I eventually did add the item class to that hr tag for various reasons so it "looks" like it works as it should, however to replicate the issue, just remove the item class name from the hr tag. Thank you.

Community feedback

Chanda•800
@Chanda-AbdulPosted over 2 years ago
You can probably remove some of the div's

<div class="item"> ... </div>

and add classes or ids to the elements instead

<h2 class="item">Equilibrium #3429</h2>

take a look at this video https://www.youtube.com/watch?v=9bGbykdR4T8

but looks great overall, hope this helps!
2
Wahyu Fatur Rizki•270
@wahyufaturrizkyPosted over 2 years ago
Great work @olayemiibrahim,

Maybe some advice for increasing your accessibility web by reading this article https://medium.com/swlh/all-we-need-to-know-about-web-accessibility-8d0957208f

don't forget to hit the button "remark helpful" cheers :)
0
Travolgi 🍕•31,400
@denieldenPosted over 2 years ago
Hi Olayemi, I took some time to look at your solution and you did a great job!

Also I have some tips for improving your code:

add descriptive text in the alt attribute of the image

remove all margin from .main-box class because with flex they are superfluous

You can add the effect :hover creating a div that appears on hover. I used tailwind but you can still see and understand which css properties you can use to do the same. Look here -> my solution Overall you did well :)

Hope this help and happy coding!
0
Olayemi Ibrahim•30
@olayemiibrahimPosted over 2 years ago
@denielden Hey Deniel! Do you mind expanding more on that second point, I used grid layout for .main-box, and what do you mean by they're superfluous?
1
Travolgi 🍕•31,400
@denieldenPosted over 2 years ago
@olayemiibrahim using grid the margins are not necessary, they are useless because it manages all grid
0
Naveen Gumaste•10,480
@NaveenGumastePosted over 2 years ago
Hello Olayemi ! Congo 👏 on completing this challenge

Let's look at some of your issues, shall we:

First of all your css is too much complex for this small project so try to optimize it.

Use flex on the 'Eth' and '3 days left'.

There is background shadow to the card in original design so add that

Use font-weight and style to the text its is given in style-guide. Check my article on accessibility issues

happy Coding😀
0
Abdul•8,540
@SamadeenPosted over 2 years ago
Great Work Olayemi. Oil dey your head. Your code could use some padding. Some Elements are Stack on column instead of row. . cheers bro.. you did great
0
IRVINE MESA•1,855
@DrMESAZIMPosted over 2 years ago
@olayemiibrahim this is good work. The only missing part is CSS on hover effect .You can reference to this YouTube video https://www.youtube.com/watch?v=Zwhz9KxzR20&t=490s

If you need my assistance let me know.
0

Please log in to post a comment

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