This is a solution to the FAQ accordion challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Users should be able to:

• Hide/Show the answer to a question when the question is clicked
• Navigate the questions and hide/show answers using keyboard navigation alone
• View the optimal layout for the interface depending on their device's screen size
• See hover and focus states for all interactive elements on the page

• Solution URL: Add solution URL here
• Live Site URL: faq-accordion

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid

I learnt how to use <picture> to change image src value depending on screen size

To see how you can add code snippets, see below:

<picture>
  <source media="(width: 375px)" srcset="mobile-img.png" />
  <source media="(min-width: 376px)" srcset="desktop-img.png" />
  <img src="optimal-img.png" />
</picture>

Going forward, I would like to learn to make my webpages more accessible.

While working on this project, I didn't quite consult a ton of resources, I just relied on previous knowledge and put my thoughts on paper before writing the code. and each time i got stuck, I would step back and come back at a later time with a fresh and new way of tackling the challenge.

By writing down my thoughts and thinking through what I wanted to do, I was figure thngs out, maybe not in the best way possible, but i did write the code and it ran 😲.

• Github - Caleb Abuul
• Website - Caleb
• Frontend Mentor - @Caleb-Abuul
• Twitter - @CalebAbuul
• LinkedIn - @Caleb Abuul

Though I didn't consult much external resources for this project, the wisdom of Kevin Powell was a constant guide through out the project. He has been a great inspiration through his YouTube Channel. He has tons of videos spanning several topics in CSS on YouTube. Please do well to check him out Kevin Powell