Design comparison
Solution retrospective
Getting this done. It started easy but then I ran into a bunch of challenges with the desktop design and some of the JS -- but I got through it all. I also learned some new JS things and about the HTML `` tag which I found handy for this project
What challenges did you encounter, and how did you overcome them?I overcomplicated how to create the background and images above the card. A little internet research fixed the problem for me.
What specific areas of your project would you like help with?I think I understand why frameworks make things easier. Doing this vanilla took a bit of work but I got there. Really the only thing I need help with is simplifying things in the future especially with the JS
Community feedback
- @dolapobjPosted 5 months ago
I really like how you used the <template> tag to dynamically render the different cards. I used a different approach and had to write out all the HTML for each card in my js script.
The only thing that really stood out to me to be improved is in how you define your grid.
@media screen and (min-width: 56em) { .grid-container { grid-template-columns: repeat(4, minmax(0,1fr)); grid-template-rows: repeat(2, 1fr); grid-template-areas: "profile work play study" "profile work play study" "profile exercise social self-care"; } }
Here you define two rows but in the template you have three? I think it was just a small typo.
Othwerwise, incredible job! Well done!
Marked as helpful0@ijohnstPosted 5 months ago@dolapobj You're right it is a typo. When I initially wrote it the left profile card wasn't tall enough so i added the third row to balance it out to look more like the picture. Good catch
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