I think the hardest part is centering the text within the container and with an appropriate font size for some small screen sizes.
What specific areas of your project would you like help with?It would be nice to have some help with smaller screens like tablets.
It's a great job, but there's a simple note for cards that should be in the middle of the page on all sides, so you can use margin: auto;
This was my first time using CSS Grid areas, and I started learning how to manipulate them. It was a great opportunity to explore and improve my layout skills. Next time, I would like to experiment more with complex grid structures and responsive design.
What challenges did you encounter, and how did you overcome them?I had difficulty structuring the layout using CSS Grid areas, especially when positioning elements correctly. At first, my grid areas were not aligning as expected. To overcome this, I carefully reviewed the grid syntax, experimented with different area assignments, and used the browser’s developer tools to debug the layout. This process helped me understand how grid areas interact and improved my ability to create structured layouts
What specific areas of your project would you like help with?Any feedback on optimizing my approach would be appreciated.
Great job on exploring CSS Grid areas! It's impressive that you took the initiative to learn and experiment with a new layout technique.
Regarding your future improvements, experimenting with complex grid structures and responsive design is an excellent goal. You might want to explore CSS Grid auto-placement and subgrid to further enhance your layouts.
For the challenges you faced, it's great that you used browser developer tools to debug your layout—this is a crucial skill for working with CSS. One additional tip: using grid-template-areas visualization tools or online grid generators can help you plan and structure your layout more efficiently.
go on 👍
Great job 👍
Congratulations on reaching this stage❤️
For this challenge, I once again focused on a pixel-perfect approach to match the original design as closely as possible. The challenge didn't require a dynamic transition for the hover effect, but I decided to add a basic one anyway, as I found the default HTML hover effect too abrupt. I aim to improve my CSS transitions in future projects.
What challenges did you encounter, and how did you overcome them?I wanted to use rem instead of px for the text and make the process easier. So, I set the font size of the HTML element to 10px, allowing me to work with rem more intuitively (e.g., 10px = 1rem, 14px = 1.4rem, etc.), which also improved responsiveness. This approach saved me a lot of time when working with pure HTML and CSS.
I would be grateful for any kind of feedback!
go on 👍
