Skip to content
OverviewSolutions
17
Comments
8

Ana Machado Amaral

@MachadoAPortugal310 points

Hello guys, I'm Ana Amaral, a front-end-focused developer. I invite you to explore some of my projects here, where you can get to know my work and coding style better. Feel free to contact me to discuss collaborations, opportunities, or just to exchange ideas. See you soon!

Latest solutions

View more solutions

Latest comments

  • P
    Xay•240
    @xayrax88
    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

    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
  • Ana Machado Amaral•310
    @MachadoA

    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

  • Fallou Jeng•540
    @falloumacbook
    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

    #tailwind-css#react
    1
    Ana Machado Amaral•310
    @MachadoA

    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

  • Ana Machado Amaral•310
    @MachadoA

    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.

  • Ana Machado Amaral•310
    @MachadoA

    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
  • Ana Machado Amaral•310
    @MachadoA

    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!

View more comments