FAQ Accordion Solution

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

I would be able to achieve the final result with the power of css. It makes the html tags cleaner than my other approaches. It also use less load time in my javascript file.

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

Using svg as background-image is little tricky comparing other img format. It is important to understand the properties inside of svg tag, such as viewbox and preserveAspectRatio, these can be key factors effecting the final result. And it is also crucial to covert the entire svg tags for url-encoder in order to use it in the css file. It took some time and reseach to understand how to use svg as background image in css.

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

I am using media query for my RWD solution. For current situation, I only need to specify the mobile version with width is 375 px. But as I enlarge the screen size, the layout goes out of design. Is it better to use Bootstrap grid to meet this RWD solution than media query? The reason I choose media query is due to the fact that Boostrap is conflict with sematic tags.