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

Submitted

Responsive Four Cards in React with Flexbox + Staggered Animations

#react#animation
P
visualdennisโ€ข 8,295

@visualdenniss

Desktop design screenshot for the Four card feature section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

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

@Finney06

Posted

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

P
visualdennisโ€ข 8,295

@visualdenniss

Posted

@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

@Finney06

Posted

@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
P
visualdennisโ€ข 8,295

@visualdenniss

Posted

@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
Discord logo

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