Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted 11 months ago

Use HTML, CSS, JAVASCRIPT to complete 使用HTML、CSS、JAVASCRIPT來完成

雷楲𨛵(Wei-Hu, Ley)•210
@DerRight
A solution to the FAQ accordion challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


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

In this problem, I solved the problem of displaying the picture at the beginning, the problem of placing the FAQ, and the problem of displaying the answer after clicking, which makes me proud.

在這個問題當中,我解決了一開始圖片顯示的問題,faq位置擺放的問題,點擊之後顯示answer的問題,讓我感到自豪。

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

For the image problem at the beginning, I searched a lot of information and found that it could be solved by using header, main, and footer. The next step is how to center the FAQ. I used position to solve this problem. It seems like a simple problem, but it is a big step forward for me! There is also Javascript to control the html class. Because display:flex; is used on the parent component to handle horizontal issues, it will be displayed horizontally after clicking. Later, when I searched for problems and methods one by one, I found that just put the question and icon outside a div or section, and then add display:flex; justify-content:space-detween;

一開始的圖片問題,查詢了很多資料才找到可以用header、main、footer來解決。 再來是要怎麼將faq置中,用了position來解決這個問題,看似簡單的問題,但是對我來說卻是一大步的進步! 還有Javascript來控制html的class,因為在母元件上是用display:flex;來處理橫向問題,所以點擊了之後是水平顯示。後來逐一尋找問題跟方法的時候才發現只要將question和icon外放一個div或section,然後再加上display:flex; justify-content:space-detween;就可以了。

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

I feel that my writing is very messy. There are some places that I feel I can write without repeating, and there are still many places that need to be revised and learned! Such as grammar, usage, typesetting, etc.

我覺得我寫的很亂七八糟,有一些地方感覺是可以不用重複寫的,還有很多地方需要修改並且學習的!像是語法、使用方式還有排版等等。

Code
Loading...

Please log in to post a comment

Log in with GitHub

Community feedback

No feedback yet. Be the first to give feedback on 雷楲𨛵(Wei-Hu, Ley)'s solution.

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

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License