Skip to content
Submitted over 1 year ago

Responsive Four Cards in React with Flexbox + Staggered Animations

visualdennis•8,375
@visualdenniss
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Four card feature section
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

I've used AOS animation library for this one, it is pretty easy to use as you just add data to html elements. Feeding data dynamically to the elements to be rendered on the screen. Was a fun project.

Community feedback

  • Finney•3,030
    @Finney06Posted over 1 year ago

    Hello there 👋. Good job on completing the challenge !

    Here are some suggestions regarding your code that may be of interest to you.

    HTML 🏷️:

    To clear the Accessibility report:

    • Wrap the page's whole main content in the <main> tag.

    • Use HTML5 semantic elements such as <header>, <nav>, <main>, <aside>, and <footer> to define these sections.

    • Use ARIA landmarks such as <header role="banner"> and <footer role="contentinfo"> to provide additional information about the purpose of each section to assistive technologies.

    Here is a web accessibility evaluation tool📕 to check your webpage for any remaining errors or warnings related to landmarks.

    I hope you find it helpful!😏 Above all, the solution you submitted is 👌. 🎉Happy coding!

    0
    visualdennis•8,375
    @visualdennissPosted over 1 year ago

    @Finney06 Hi,

    Thanks, but please avoid copy-pasting same text over and over on every new submission.

    Try to make your suggestion related to the posted submission and to the issues that are actually there.

    I suggest you to please read and follow the community guidelines: See section called Copy/paste the same minimal feedback on multiple solutions in https://medium.com/frontend-mentor/frontend-mentor-community-guidelines-44303cc38aa6

    Thanks.

    0
    Finney•3,030
    @Finney06Posted over 1 year ago

    @visualdenniss I appreciate you for bringing this to my notice and will make changes to my approach to ensure that I'm respecting the community guidelines on Frontend Mentor. I was trying to help out by providing feedback on accessibility issues. However, I understand now that spamming people's solutions with the same feedback is not the best way to do that. Thank you for holding me accountable and helping me be a better member of this community

    1
    visualdennis•8,375
    @visualdennissPosted over 1 year ago

    @Finney06 No worries, thanks for your understanding and good luck on your frontend journey.

    1

Please log in to post a comment

Log in with GitHub

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