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

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

@DerRight

Desktop design screenshot for the FAQ accordion coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

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.

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

Community feedback

@YacoubDweik

Posted

當一個選項卡處於活動或開啟狀態時,所有其他選項卡都應關閉或隱藏

Marked as helpful

1

@DerRight

Posted

Hello @YacoubDweik , is everything ok? Thank you very much for your advice! Sorry I haven't replied to your message because I've been a little busy lately.

I understand what you mean, I will correct it and learn how to do it! Have a nice day!😊

1

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