Skip to content
OverviewSolutions
7
Comments
7
Raquel
@Saekit

All comments

  • Raquel•120
    @SaekitPosted 2 months ago

    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-width can also help to make the layout less stretched out.

    Marked as helpful
    0
  • Keiner Mendoza•240
    @keinermendozaSubmitted 3 months ago
    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.

    Four Cards in React + CSS Grids

    1
    Raquel•120
    @SaekitPosted 3 months ago

    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•240
    @keinermendozaSubmitted 3 months ago
    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.

    Product Card Component in React + Demo Product Gallery

    1
    Raquel•120
    @SaekitPosted 3 months ago

    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.asp

    1
  • Raquel•120
    @SaekitPosted 3 months ago

    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
    @MinThentSubmitted 3 months ago
    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.

    Social Link Profile with React, Tailwind and Flexbox

    1
    Raquel•120
    @SaekitPosted 3 months ago

    This solution looks good and matches the design well. Well done! I have a couple suggestions for improvement:

    1. 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.
    2. 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
  • Raquel•120
    @SaekitPosted 3 months ago

    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 500 is hsl(0, 0%, 42%);, instead of 50%.

    0
  • Raquel•120
    @SaekitPosted 3 months ago

    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