Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

NTF Preview card

@AaronCurrie

Desktop design screenshot for the NFT preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I was using this as a chance to practice css functions like clamp to make the site as responsive as possible. I was also using variables for the colors to get used to using these more. I am still learning layout and how to create the best layout, this design was quite simple and didnt need much. There were a few instances I used flex box to create an inline row but these were relatively simple. What other ways would you do the layout?

I did struggle with the main image overlay but managed to come up with a solution that worked eventually. What would be the best way to go about doing the image overlay and does the rest of my code make sense?

Community feedback

Rafal 1,395

@grizhlieCodes

Posted

Hi Aaron,

I started writing stuff and i realised it would have been quite long so I just ended up recording a video lol. Here's the link. I just try to share some concepts basically that are best practice and overall time-savers, win/win.

I actually created a video on this particular challenge a few days ago, but I did use SCSS(sass) so it may look slightly alien from normal css. (It's not tbh and worth learning asap if you ask me, SCSS is something you can learn whilst learning CSS without hindering your effort). Link in case you may find it useful.

Ah - yes, in terms of the overlay, completely forgot - sorry. That's actually covered in my 'tutorial' (second link). If you're uncertain of the exact code (because SCSS may look weird) then just go to my github repo for the project and it should make sense if you open the .css file. Shout if you have any questions.

Cheers :)

Marked as helpful

0

@AaronCurrie

Posted

@grizhlieCodes That video was so helpful and concise thanks so much. display: grid and place-items: center is so much better than other ways of messing around trying to center something! Also explaining that you usually want to control the placement of children with the parent is something I wasn't aware of as best practice but after you explained it it makes a lot of sense. Thanks a lot for the reply will adapt how I code to take these things into account! Cheers

1
Rafal 1,395

@grizhlieCodes

Posted

@AaronCurrie Glad it helped 😄, these concepts would have saved me a lot of time so I thought I'd share them.

0

Please log in to post a comment

Log in with GitHub
Discord logo

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