@grizhlieCodes
Posted
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).
@Duyen-codes
Posted
@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!
@grizhlieCodes
Posted
@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
@Duyen-codes
Posted
@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!
