NFT-preview-card-with-Grid

Community feedback

• 

  Rafal•1,395

  @grizhlieCodesPosted almost 3 years ago

  Nice solution Duyen :), I like the use of grid!

  A few shortcuts/tips:

  When you want to declare a grid that will only have 1 row and 1 column AND will center its' child/ren all you need to do is add this code to the parent:

  .grid-container {
       display: grid;
       place-items: center;
  }
  

  That will do it. So I'm referring to your .banner-overlay for that. Oh yeah, if you inspect your code you will see that your grid-template-columns and grid-template-rows are actually not working. You can't declare just 1 but you can declare 1fr 😁, then they would work fine. I think I also saw this mistake on .banner.

  I'd also look into using flex with flex-flow: column nowrap; and gap to streamline stuff a little bit. I see that some of your elements have paddings/margins etc. I usually run a css-reset file that removes all default styling (especially margins/paddings) from ALL elements. Then I write them fresh.

  Overall awesome job, I assume you wanted to improve in grid a bit with this project? Love using it personally, it gives you such a controlled 'environment' to position elements with.

  Oh ya - I recorded me doing this solution, in case you want to check out what I might have done differently: link, only sharing because I think it might be beneficial, idc about 'views' as much (yet).

  0

  ---

  

  Duyen Nguyen•950

  @Duyen-codesPosted almost 3 years ago

  @grizhlieCodes Thanks very much for your attentive feedback! I'll fix my codes accordingly. Yeah I wanted to improve grid with this project. I'll watch your video for reference. And hey I have been working on the Time tracking dashboard project today with pure HTML, CSS and JS. I got the styles quite close but been stuck with injecting JSON data to html using JS. I just hardcoded the data into the html file for now. Looked at some solutions on FEM but those use other things that I just couldnt really understand. Would be great if you could do a video or do the project with core techs only. Thanks a lot!

  1

  

  Rafal•1,395

  @grizhlieCodesPosted almost 3 years ago

  @Duyen-codes MY FIRST VIDEO REQUEST!!! Great timing too, I get my new laptop on Thursday.

  I'll get on it early next week. Is it this one?

  And if I understand - you want to use the provided JSON file to inject these cards with JS - only using vanilla techs? Happy to do that.

  I'll do it the pure HTML/CSS way and in the end I will 'refactor' to use JS instead. Two birds, one stone sort of thing.

  Marked as helpful

  0

  

  Duyen Nguyen•950

  @Duyen-codesPosted almost 3 years ago

  @grizhlieCodes Yes! Exactly that challenge. Can't wait to watch your video. I have subscribed to your channel on Youtube too! Thanks a lot for accepting my request! Greatly appreciate that!

  1