Skip to content
Submitted 6 months ago

Advice Slip

accessibility
Busari Akeem Tunde•370
@Aalphakeem-Adroit
A solution to the Advice generator app challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

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

I am most proud of successfully integrating the AdviceSlip API and ensuring that the application works smoothly across different devices. The polished and responsive design, coupled with the seamless functionality, is something that exceeded my initial expectations. Additionally, the dynamic interaction of fetching and displaying advice added a professional touch to the project.

Next time, I would:

  • Implement animations or transitions to enhance the user experience.
  • Add a "favorites" feature, allowing users to save advice they like.
  • Explore alternative API options for similar projects, potentially using more complex APIs to challenge my skills further.
  • Write unit tests to ensure the reliability and maintainability of the code.
What challenges did you encounter, and how did you overcome them?

Challenges

  • API Fetch Errors: Occasionally, the AdviceSlip API would fail to respond due to network issues or server downtime.

  • Responsive Design Adjustments: Ensuring the layout looked good on a variety of devices required extra testing and tweaking.

Solutions

  • Error Handling: I implemented error-handling logic in JavaScript to display a user-friendly message when the API request failed, ensuring the site remained functional.

  • Responsive Testing Tools: I used browser developer tools to emulate different devices and adjusted the CSS media queries iteratively.

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

Advanced CSS Techniques: Suggestions on how to further polish the design with modern CSS features or animations.

Optimizing API Requests: Advice on making the API integration more efficient or reducing latency.

Accessibility Improvements: Feedback on how to make the site more inclusive for all users.

Code Review: Any recommendations to improve the structure, readability, or performance of my code.

Code

Please log in to post a comment

Log in

Community feedback

  • Bhuvnesh Upadhayay•2,120
    @bhuvi819381

    Hey brother,

    First off, everything looks awesome! You’ve done a great job, but I wanted to share a few thoughts and suggestions with you:

    1. Avoid Using px

    • Instead of using px, consider using relative units like em, rem, %, or vw/vh for better scalability and responsiveness.
    • Why?
      • px can cause issues on devices with varying screen sizes or pixel densities.
      • Relative units make designs adapt to user preferences and ensure consistency across devices.

    Your CSS skills are already on point, but if you want to explore even more advanced techniques, check out CSS-Tricks. or kevin powell's yt channel

    I noticed some responsiveness issues, and I think it's because of the use of px.

    I’m also learning JavaScript, so I can’t help much there right now. But let’s learn together and improve! If you face issues, let me know—maybe we can debug together.

    Marked as helpful

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord