Responsive design using grid and flexbox for mobile first

Hi Maikol, great work on this challenge! 😉

Here are a few tips for improve your code:

• add main tag and wrap the card for improve the Accessibility
• add descriptive text in the alt attribute of the images
• use details semantic tag for the faq container -> read here
• using <hr> for the line is not the best way because this tag have a semantic meaning... in this case use border-bottom because this line is decorative

Overall you did well 😁 Hope this help!

Greetings, Maikol! 👋

Congratulations on completing your first Frontend Mentor challenge! 🎉 In my opinion this is a brave choice for your first challenge.

I would highly suggest doing the QR code challenge first and then doing other component challenges to make you get comfortable with the workflow and hopefully, get some feedback first to build up your fundamental first before jumping to harder challenges. 👍

Some suggestions from me.

• I would recommend using the native HTML elements to create accordions, details and summary elements. By default, they are accessible and screen-readers friendly. Currently, the accordion panels are not accessible by keyboard and the screen reader doesn't know that it is an accordion.
• Use CSS border property to create the line. hr element has a role as a separator. In this case, the content below the line should not be separated.

I would highly recommend writing the styling using the mobile-first approach. It often leads to shorter and better performance code. Also, mobile users won't be required to process all of the desktop styles.

That's it! Hope you find this useful! 😁

P.S. I recommend removing the #vanilla-extract tag since the site is not built with vanilla extract.