Efficient ways to use CSS Grid and write CSS overall.
Responsive design is still challenging for me, and I still don't know how to efficiently structure and write scripts. I've tried to implement accessibility, but I still think it's unclear. Do you think I can improve with more practice? 🥹
I would like to know how to specify the sizes of elements effectively when implementing a layout like this. Additionally, I want to write the code in a clean and efficient manner.
I want to know how to create a responsive layout more efficiently. Currently, I am specifying elements in px units, but I want to understand whether I should use em, rem, etc., and how to utilize them effectively.
I'm not sure if the HTML and CSS I've written are efficient. I would like to know which areas I should study further.
How to write HTML elements semantically and handle CSS efficiently
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.
