Responsive landing page using Bootstrap classes

What are you most proud of, and what would you do differently next time?

I'm most proud of building a fully responsive and interactive FAQ accordion that closely matches the provided design. I implemented the accordion functionality using JavaScript, allowing users to expand and collapse answers while switching between the plus and minus icons. I also focused on improving accessibility by using semantic HTML elements such as <button> and adding ARIA attributes to support keyboard navigation and screen readers.

For future projects, I would make the code more reusable by generating the FAQ items dynamically from a JavaScript data array instead of writing each item manually. I would also reduce my dependency on Bootstrap utility classes by using custom CSS, improve the animation when expanding and collapsing answers, and continue enhancing accessibility and code organization.

What challenges did you encounter, and how did you overcome them?

One of the main challenges was implementing the accordion functionality. I needed to ensure that clicking a question would correctly toggle the corresponding answer while also switching between the plus and minus icons. I overcame this by using JavaScript event listeners and classList.toggle() to manage the visibility of both the answers and the icons.

Another challenge was making the layout responsive across different screen sizes. I solved this by following a mobile-first approach, using Flexbox for layout and media queries to adjust the background image, spacing, and card width for smaller devices.

I also focused on accessibility by using semantic HTML elements like <button> for the FAQ questions and adding ARIA attributes such as aria-expanded and aria-controls so that the accordion could be used with keyboard navigation and assistive technologies.

What specific areas of your project would you like help with?

I would appreciate feedback on the following areas:

• Writing cleaner and more maintainable JavaScript for the accordion functionality.
• Improving the accessibility of the component, especially regarding ARIA attributes and keyboard navigation.
• Optimizing my HTML and CSS structure to follow best practices.
• Making the design more pixel-perfect compared to the original Frontend Mentor design.
• Suggestions for improving code readability and overall project organization.