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
Request path contains unescaped characters
Not Found

Submitted

FAQaccordion using classes. Dinamic HTML. Mobile First. Position absol

@J-HernandezM

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


What did you find difficult while building the project? What i found most difficult during the project was the JavaScript funcionality, i decided myself to try making the Q&A dynamic by simulating a database using js classes creating the objects with their own properties. That made the JS a bit more difficult, but i remember the way i've done that before, handling the events separate identifying each click and opening the answer i needed. Also i needed to change the styles of the title and the Q&A container so it fits the content and changing the color of the title After that the next problem was that if the user open all the questions it overlaps outside the container, so i created a logic that closes the other questions when you try to open a new one and it helped me to create the same logic to remove the styles added when you clicked a question. In the CSS i had some problems with the images, i handled it by using position absolute, z index and a new propertie y googled called clip-path so that way i can create like a clip mask (like in illustrator).

Which areas of your code are you unsure of? The areas im most unsure is the JS and some of the CSS. In the JavaScript im unsure of the way i readed many elements from the html i think there must be a way to do it better. In the CSS, im not a big fan of using position absolute, i dont know why but i think it seems like cheating, like if i couldn't use that in the real life projects because of the complexity of it. Also i had some troubles to create like a clip mask in two of the images. At some point i used overflow:hidden, but it hid the @ box too, i was too lazy to remove it from the container because i think i would have to change the css grid by doing that, so i searched another solution and find the css propertie clip-path.

Do you have any questions about best practices? it is a good practice to use position absolute when necessary? if not, why? what other solutions should i search for?

Community feedback

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