Kadir Yıldırım• 130
@kadiryildiri
Submitted
What specific areas of your project would you like help with?
I had difficulty adjusting the height and width of the boxes.
Raquel
@Saekit
All comments
- Raquel• 120
@Saekit
Posted
Great work with this project! The mobile view looks great. For the desktop view, the whole section can use grid instead of separating part of it in a grid and part in flex box. I found this grid generator to be very helpful https://cssgridgenerator.io/ . Using
max-widthcan also help to make the layout less stretched out.Marked as helpful
0 - Keiner Mendoza• 200
@keinermendoza
Submitted
What are you most proud of, and what would you do differently next time?
I'm proud of the grid layout. Making layouts with grids has always seemed like a challenge to me, so I am happy with the final result.
What challenges did you encounter, and how did you overcome them?
I noticed that the font sizes are different for the two designs, so I tried to make the font grow progressively until reaching the size for large screens (I am using a mobile-first approach), that was a bit difficult, and I would be happy to hear opinions about other ways to do it.
Raquel• 120@Saekit
Posted
Your code looks great. It seems like your vercel live website may be getting the incorrect repo since it is showing a different project.
1 - Keiner Mendoza• 200
@keinermendoza
Submitted
What are you most proud of, and what would you do differently next time?
I am most proud of creating a product gallery that demonstrates how the component works with different image sizes and varying lengths of text descriptions.
What challenges did you encounter, and how did you overcome them?
Without a doubt, the biggest challenge I faced was managing the images. It was difficult to give them the correct size and position, but in the end, I found the aspect-ratio property and the use of a container element for the image to be very useful.
Raquel• 120@Saekit
Posted
Your solution looks great! The demo mode is very cool. I noticed while in mobile view, demo mode looks good, but in desktop view it looks squished in a row.
I also found managing the images challenging, so I learned about the
<picture>tag which is great to use for responsiveness. Check it out: https://www.w3schools.com/tags/tag_picture.asp1 - Roman-oryol• 50
@Roman-oryol
Submitted
Raquel• 120@Saekit
Posted
Your code looks amazing! I don't have any feedback. I feel like I learned a lot from looking at your code haha good job!
0 - Min Thent Aung• 80
@MinThent
Submitted
What are you most proud of, and what would you do differently next time?
I think I'm getting better with flexbox and usage of react.
What challenges did you encounter, and how did you overcome them?
I had a little difficulty with passing props to make map method work for printing out the social media links.
What specific areas of your project would you like help with?
I would like some help with code reusability and maintenance. Also, suggestions on Tailwind usage would be helpful.
Raquel• 120@Saekit
Posted
This solution looks good and matches the design well. Well done! I have a couple suggestions for improvement:
- Since the social links are technically navigation buttons it would be better to use an
<a>tag or a<button>tag instead of a<p>within an<li>. Using a button tag will also allow the user to select the button using the tab key. - Some of the formatting, like in
SocialLinks.jsx, is a bit off. Installing prettier in your code editor can help with that. Your Tailwind and reusable components look good!
Marked as helpful
0 - Since the social links are technically navigation buttons it would be better to use an
- PTamiliniyan S• 340
@TheCodeCraze
Submitted
Raquel• 120@Saekit
Posted
Great solution! Just a couple of things I noticed. It looks like you forgot to include the black border color to match the design. The color for the copy also appears a bit too light. In the style guide,
Gray 500ishsl(0, 0%, 42%);, instead of 50%.0 - Roman-oryol• 50
@Roman-oryol
Submitted
Raquel• 120@Saekit
Posted
Great solution for this challenge! The code looks well-organized and easy to read. This solution is very professional and I did not see anywhere that needed improvement. Good job!
0
