Skip to content
Submitted almost 3 years ago

NTF Preview card

Aaron Currie•100
@AaronCurrie
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 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
    @grizhlieCodesPosted almost 3 years ago

    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
    Aaron Currie•100
    @AaronCurriePosted almost 3 years ago

    @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
    @grizhlieCodesPosted almost 3 years ago

    @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

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