What are you most proud of, and what would you do differently next time?
This challenge took longer than expected but It feels good I was able to complete it. I decided on some implementation which I think is not the best approach to my challenges, but It work😂. I'll probably do it better once I figure out a better design approach.
What challenges did you encounter, and how did you overcome them?
My biggest challenge during this project was placing the content card/box in the correct position. I didn't immediately think the CSS grid was the solution, so it took me longer trying to figure out how to position the boxes. I just started learning Grid actually and I guess I didn't understand I could use Grid in such a manner. I stumbled upon a similar design and inspected the code and saw what they did, so I just copied their code to Codepen and played with it, it seems easy but I still feel I don't understand it enough but hey, it worked😂. I also had a hard time getting the title description displayed correctly. I had to set a min-max for the description to get the result I wanted but I'm not sure if that was the correct solution but again it worked 😁.
What specific areas of your project would you like help with?
I would love to get more clarity on the CSS grid. While ChatGPT and Claude Ai have been helpful, I think getting a professional to help me understand the concept would help me improve my skills a lot.
@Yahia-kilany
Posted
Good work. Using clamp for sizes is a good practice from what I hear though I am not sure of the ::before tags when you could just do border-top:5px; border-color:...
It's way neater than my solution tho lmao.
@z-mn
Posted
Great solution! Heading is slightly small but it's not much of an issue. If you're still unable to fully understand grid, playing through this should be helpful. I used the methods I learned from it to build my solution - check my code if you want an alternative grid solution. Grid is quite intuitive when you mentally plan out the grid formation before writing any CSS - this makes it easier to understand what you're doing. In this example I could see the layout could be split into 4 rows and 3 columns - 12 equally sized rectangles filling the space. Then it's just about using the necessary CSS properties to make that layout, and put the cards in the right spot. Hope this helps.
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
