I'm proud that I was able to use CSS grid efficiently to complete this challenge.
What challenges did you encounter, and how did you overcome them?The challenge I encountered were mostly assigning grid layout but after using grid columns and grid rows, I was able able to overcome the challenges.
What specific areas of your project would you like help with?None.
The responsive layout using CSS Grid is really smooth and well done. It's a bit unfortunate that the background image in the purple card area doesn't match the example design perfectly when the window size is reduced. Overall, great job!
I am proud of my improvement.
What challenges did you encounter, and how did you overcome them?In this project, in desktop view, the middle column has two cards one below another while the other two columns have one card. I encountered a challenge immediately when started solving the desktop view. But it took no time to make me decide that I should divide the cards into three columns and then apply the flexbox method.
What specific areas of your project would you like help with?In the design, the top border style is a little different at the edge from my solution. Maybe anybody can help me with that. Besides, I want to see other solutions.
I experienced the same issue. Initially, I styled the card using border-top, but it didn't match the example design. So, instead of using border, I placed a div element at the top, set its height, filled its background color, and then applied overflow: hidden to the card element. This approach made the design look more like the example. I'm not sure if this is the correct method, but I hope it helps!
none
What challenges did you encounter, and how did you overcome them?none
What specific areas of your project would you like help with?none
It would be better to position the internal elements more in line with the design.
the time i spent investigating how and why to use resources. and of course im proud to finish the work.
What challenges did you encounter, and how did you overcome them?in general i overcome doing some searches on mdn or chat GPT as usual.
What specific areas of your project would you like help with?i dont know if the live site is gonna be like i imagine.. so will see!
It would be better if the vertical spacing could be handled a bit more effectively.
I think it'd be better to make the html tag more semantic
I want to write HTML tags in a semantic way.
What challenges did you encounter, and how did you overcome them?I used Google to search for solutions when implementing shadows.
What specific areas of your project would you like help with?I want to know how to write clean.
Thank you for pointing out the issue. I'll make sure to keep it in mind for future reference.
I learnt better about how to use classes to apply styles to different elements of the same type but in the same container i.e( multiple paragraph elements having different styles). probably next time rather than using divs I would experiment using a non-semantic in-line element (span) just to see the difference and which is more suitable.
What challenges did you encounter, and how did you overcome them?A challenge I faced but necessarily did not overcome is properly centering the main content, I ended up using a margin but I believe there would be better and more suitable methods to do this.
What specific areas of your project would you like help with?A more suitable way to centering elements, not just centering but positioning elements in the correct places I would need to for various projects, like I mentioned earlier most times I use margins, paddings, text-align and align items but I believe these are mostly makeshift solutions
You can solve it by using flex or position when you want to center-align a component
Although I've done these challenges before I thought it'd be fun to go through the learning paths!
What challenges did you encounter, and how did you overcome them?There seems to be a box shadow effect on Figma but I can't work out what the values are.
What specific areas of your project would you like help with?The dimensions of my component aren't quite right. Is there an easier way to compare my live site preview to the Figma file?
Using Chrome extensions makes it easy to assess sizes at a glance.
