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

flex-box, grid-layout css, html

@edwin08torres

Desktop design screenshot for the Four card feature section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

@VCarames

Posted

Hey there! 👋 Here are some suggestions to help improve your code:

  • The main element should only ⚠️ be wrapping the card section since that is the main content of your page.
  • The article element is being used incorrectly ❌ and not needed for this challenge.
  • The “Reliable, efficient delivery Powered by Technology” is one single heading ⚠️ so the entire thing should be wrapped in a single h1 heading and either the top/bottom text will be wrapped with a span element.
  • Along with the blank alt tag, you also want to include the aria-hidden=“true” ⚠️ to your “icons” to fully remove them from assistive technology.

More Info:📚

MDN Aria-Hidden

  • There is no need for multiple stylesheets ❌ as it will affect performance, instead keep everything in one single stylesheet.

If you have any questions or need further clarification, feel free to reach out to me.

Happy Coding! 🎆🎊🪅

1

@edwin08torres

Posted

@vcarames Thanks for the advice!!, yes, the multiple style sheet is because it has made it easier for me to use responsive, but you are right, performance could be affected, I still cannot understand media-querys exactly, but I will continue studying and reading , thank you, have a nice day, bro!.

0

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