I was very satisfied with implementing an accurate layout using grids.
What challenges did you encounter, and how did you overcome them?It took a considerable amount of time to structure the layout using grids, but I was able to resolve the issues by researching and referring to other people's work.
I really like your design and code! You’ve effectively organized the code to avoid repetition. Great work!
From this project I learned some CSS layout customizations such as card placement using a grid and maybe another time I will deepen my knowledge in the field of layout indirectly this is very important
What challenges did you encounter, and how did you overcome them?The challenge in this project is the layout of the cards because they are not aligned and I use pure CSS without using a framework or library.
What specific areas of your project would you like help with?maybe from the size of the card and the distance between each card
Great work! I noticed that instead of setting the card height to 100%, you might want to try adding padding to each card or its contents. It could help improve the layout.
I’m most proud of improving my understanding and application of media queries and flexbox. This project gave me hands-on experience with creating responsive layouts, and it was rewarding to see the design adapt smoothly between mobile and desktop views. Additionally, I’m happy with how I managed to implement hover states and accessibility improvements, making the card both functional and user-friendly.
Next time, I would focus more on refining the spacing and alignment of elements to match the design more precisely. I struggled a bit with getting margins and paddings just right, so improving those skills would be a key focus for me. I’d also explore more advanced CSS layout techniques, such as CSS Grid, to handle layout complexity more efficiently and gain a deeper understanding of how to handle responsive designs.
By applying these learnings, I aim to improve both the aesthetic precision and the structural flexibility of future projects.
What challenges did you encounter, and how did you overcome them?One of the main challenges I faced was understanding and applying media queries for the first time. Initially, I struggled to switch between the mobile and desktop images and to adjust the layout for different screen sizes. To overcome this, I researched media queries and experimented with a min-width of 600px to create a responsive layout. Through trial and error, I learned how to structure my HTML and CSS to ensure that the design looked good across various devices.
Another challenge was getting the spacing and alignment of elements correct, especially when using flexbox. I found that certain elements weren’t lining up as expected, so I spent time tweaking the margins and padding. By testing the layout in different browsers and devices using Firefox’s inspect tool, I was able to identify where adjustments were needed and eventually achieve the desired result.
These challenges provided valuable learning experiences in both responsive design and layout control.
What specific areas of your project would you like help with?Spacing and Alignment: I struggled with getting the spacing between elements to match the design, especially when transitioning between mobile and desktop layouts. Any advice on how to better manage spacing using flexbox, margins, or padding would be greatly appreciated.
Media Queries: While I was able to implement a basic media query to switch between images, I’m not sure if I’ve set it up in the most efficient way. I’d love feedback on how to optimize my media queries for better performance and flexibility across more screen sizes.
Accessibility Improvements: I’ve made an effort to improve accessibility by using semantic HTML and visually-hidden content for screen readers. However, I’m new to accessibility best practices, and I would like advice on any additional steps I could take to make my project even more accessible.
This looks great! It seems you accidentally omitted the "$" sign, so you can add it back. Also, consider applying font-weight: 700 for the price.
The most I am proud of here is that I complete the challenge. I would do nothing different next time.
What challenges did you encounter, and how did you overcome them?My challenges I encountered is lazyness, because of a problem when centering the container. I 'd overcome it with by determination of completing the challenge.
This looks great. You might want to consider adding bold formatting to the place/address.
Sizes are perfect. You can check the color either in the Figma file or using the browser's inspect tool.
This is great. You can center the card using either of these methods:
Using Flexbox in the body: body { display: flex; justify-content: center; align-items: center; /* other styles */ }
Or, apply positioning styles directly to .card: .card { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); /* other styles */ }
