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

Accordion with NO JAVASCRIPT (CSS only)

@jonathon-eng

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 is part 3 of my 1 challenge a day personal challenge. I also want to preface by saying that I started this challenge basically right after I finished my second challenge (12 hours ago at the time of writing) I could’ve spent more time and perfect this but honestly I was getting too tired to think properly so I just wanted to finish and submit what I had.

This was a difficult challenge I feel. Compared to some of the other newbie challenges, this one seemed to have more of a focus on being used on either mobile or desktop. At least that's how I felt.

I also wanted to challenge myself by trying to go for the extra credit by not using a single piece of Javascript, and just went only markup and CSS.

While it was challenging to figure out how to get to this outcome, it was rather fun to learn about the process.

That being said, my image formatting got somewhat messed up and I'm positive someone will notice that I relied a lot on position:absolute, if someone can help me resolve that, I'd be happy.

My question is just what is the best way to stick an image to a div or other container while also being responsive.

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