Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

All comments

  • Xay• 10

    @xayrax88

    Submitted

    What are you most proud of, and what would you do differently next time?

    This was a good review and practice. I had a fun time making this component, it seems self explanatory and was a great exercise. I would go back and implement the accessibility part, but didn't this time.

    What challenges did you encounter, and how did you overcome them?

    I had trouble with creating the social links container part that had the triangle portion when toggling the social links on and off. I had to look up how to make a triangle or shape online which I reference from this source https://css-tricks.com/snippets/css/css-triangle/ This was a great resource to implement that for the social links part. Toggling the event listener for the JS button, took a little bit of trial and error but eventually got it.

    What specific areas of your project would you like help with?

    This was a great and fun mini exercise, although I did not make it accessibility user friendly or didn't implement any aria in the HTML part for screen readers and etc.,. No specific questions for here, I am always open to feedback.

    Article Preview Component

    2

    Ana Machado Amaral• 310

    @MachadoA

    Posted

    Your project is very good! Congratulations! Keep it up!

    I suggest that in the part with the link, you put the images inside the <a> and give them a CSS cursor pointer. The change could be like this, for example:

    html

    <div class="links"> <li><a href="#"><img src="./images/icon-facebook.svg" alt=""></a></li> <li><a href="#"><img src="./images/icon-pinterest.svg" alt=""></a></li> <li><a href="#"><img src="./images/icon-twitter.svg" alt=""></a></li> </div>

    It is also advisable to fill in the alt attribute of the img to support screen reader users.

    Best regards, Ana

    Marked as helpful

    1
  • Ana Machado Amaral• 310

    @MachadoA

    Posted

    You can use "Best regards,

    Hello Fernando,

    How are you?

    I appreciate your project; it's very nice. I suggest that you change the width of your card, and in the Cart, set the background color to white.

    I am also working on the same project and need some support. If you can help me, I would appreciate it.

    Best regards, Ana

    0
  • Fallou Jeng• 540

    @falloumacbook

    Submitted

    What are you most proud of, and what would you do differently next time?

    Hello, Frontend Mentor Community! 👋

    I'm thrilled to announce that I've successfully completed another challenge! 🎉💻

    Please check out my solution and provide your valuable feedback.

    Thank you for your continued support and encouragement.

    Happy coding fellas!!!

    What challenges did you encounter, and how did you overcome them?

    This is my first react application, deployment was the problem but i finally figure it out.

    product list cart

    1

    Ana Machado Amaral• 310

    @MachadoA

    Posted

    Hello Fallou,

    I saw your project and loved the optimized way you rendered the components.

    I would like to ask for your help. I did the same project, but I am facing an issue: when I remove an item from the Cart, I am unable to update the card. Could you help me with this?

    I put all the logic in the CartContext and wrapped my main.jsx with the CardProvider.

    Your code is cleaner than mine. If you could give me some tips on how to organize it better, I would appreciate it.

    https://www.frontendmentor.io/solutions/responsive-app-with-react-J4B1uua7Lp

    See you soon!

    Best regards, Ana

    0
  • Ana Machado Amaral• 310

    @MachadoA

    Posted

    Hello, Pablo! Thank you for helping me! I changed the article to form as you suggested, and also replaced the div with main. However, the white background was intentional for the mobile view; that's how I envisioned the design. Please continue to provide comments! I've learned a lot from your insights! Best regards.

    0
  • Colin Meehan• 40

    @ucolinmee

    Submitted

    I found myself having to redo the style.css file, as I was simply reacting to how my card component looked at the time. For example, if I found my "card-footer" div was not aligned with the rest of the card, I would manually add margin until it aligned.

    Then I realized once I changed my screen size, that the alignment would be all off yet again. I decided to upload my solution anyway so I could unlock the ability to view other solutions and seek inspiration on how they are able to align their content easily.

    I am curious to find out what the best practice is for aligning content. For this project, I used flexbox and set my flex-direction to column, which helped quite a lot but I struggled slightly with some components, such as aligning the image to the center of the card.

    Overall, this was a good challenge and I'm hoping that by learning from my peers, I will be able to style future challenges with less issues. On to the next challenge!

    Colin's NFT Card Preview Project

    1

    Ana Machado Amaral• 310

    @MachadoA

    Posted

    Hello, congratulations on the project! However, I suggest that:

    • Start with the mobile version; you'll find it much easier.
    • Add 'cursor: pointer' to all links and buttons consistently.
    • Include hover effects in the required places.

    Remember that after submission, you have the opportunity to see how others approached the same project. Take the chance to review and clarify any doubts you may have.

    See you soon!

    Marked as helpful

    1
  • Ana Machado Amaral• 310

    @MachadoA

    Posted

    Hello!

    Congratulations on the project! However, I suggest that:

    • Start with the mobile version; you'll find it much easier.
    • Reduce the height of the image for desktop.
    • Allow the vertical scrollbar to appear on desktop.
    • Add a popup or a paragraph (p) with a message to inform the user that the email has been sent successfully. This is not a requirement, but it will be a plus for your project.

    Remember that after submission, you have the opportunity to see how others approached the same project. Take the chance to review and clarify any doubts you may have.

    See you soon!

    0
  • Ana Machado Amaral• 310

    @MachadoA

    Posted

    Hello, Nata! Congratulations on the project! However, I suggest adding a popup or a paragraph (p) with a notice to inform the user that the email was sent successfully. This is not a requirement, but it will be a plus for your project. See you soon!

    1
  • Pablo da Silva Bezerra• 150

    @PabloBezerra

    Submitted

    The bonus part of the drag and drop was a real challenge; I had a lot of trouble applying this functionality. Most likely the script I made for the drag and drop is not very well optimized for this, but you can give your opinion if you see something to improve, not only in this aspect but in any other.

    In addition to what I've proposed, I've added another feature to edit the task that has already been created. I thought this was missing to complete the challenge.

    Todo app with Sass and flexbox responsive

    1

    Ana Machado Amaral• 310

    @MachadoA

    Posted

    Hello Pablo!!

    Congratulations for the project! I suggest that you try in React. You'll see is more easy.

    See you soon

    1