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

CSS Grid & Flex

James 340

@jacram

Desktop design screenshot for the FAQ accordion card coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


This one was tough getting everything to line up

Community feedback

PhoenixDev22 16,950

@PhoenixDev22

Posted

Hi James,

Congratulation on finishing this challenge. Excellent work! I have few suggestions regarding your solution, if you don't mind:

HTML

  • You might already be aware of this, but you can use the native HTML details and summary elements to quite easily make interactive accordions that are fairly accessible. But for sure , you have learnt something new, as I used the same approach for this challenge.
  • Placing JavaScript code in external js files has some advantages over inline scripts and separating HTML and JavaScript code will help manage and maintain the code base better. It also helps in the reusability of code in more than one HTML file.
  • Last , It's a good practice to have the styles in separate file he reason for this is that the CSS stylesheet exists for the purpose of defining the presentation style of the document. The HTML file exists to define the structure and content of the document also it's useful If multiple pages on your site have the same look and feel.

Aside these, your solution looks great. Hopefully this feedback helps.

Marked as helpful

0

James 340

@jacram

Posted

@PhoenixDev22 thank you for the feed back

0
PhoenixDev22 16,950

@PhoenixDev22

Posted

@jacram Happy coding!

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