All solutions

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

I am not particularly proud of this question. The main thing is to solve the CSS layout problem and Javascript problem, as well as the hover and active buttons. ※Record: About two hours.

這題我沒有特別自豪的地方，主要的就是解決的CSS排版的問題和Javascript的問題，還有按鈕的hover和active。 ※紀錄：兩小時左右。

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

The challenge for me in this question lies in the use of Javascript and CSS. For example, using getElementById in Javascript is relatively new to me, but it is not difficult to understand, so I can understand it quickly. Then there are the buttons, input boxes and error-text parts on the CSS. Gradient and changing colors are still relatively unfamiliar to me, but in the end I solved these problems!

這題對我來說的挑戰是在於Javascript的使用和CSS上的運用，像是Javascript用getElementById對我來說是比較新穎的東西，但是不難懂，所以很快就可以理解了。接著就是CSS上的按鈕還有輸入框和error-text的部分，漸層和改變顏色對我來說還是比較生疏，但最後還是解決的這些問題！

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

First of all, thank you for coming to see my finished product! Have a great day! I think the grammar of this question is not very correct, but I don’t know how to say it, and there is also the layout design part!

首先，先謝謝您前來觀看我的成品！祝您有個美好的一天！ 我覺得這題在語法上的使用沒有很正確，但是我也不知道應該要怎麼說，還有版面設計的部分！

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

I am most proud of how quickly I mastered this question and found that I am slowly making progress. ※Record: about one hour

我最自豪於這題對自己來說滿快就上手的了，發現自己慢慢在進步。 ※紀錄：一小時左右

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

This question has almost no challenge. It is basically a concept question, familiarity and use of grammar.

這題幾乎沒有挑戰，基本上就是觀念題，對於語法的熟悉程度和使用。

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

First of all, thank you for coming to see my finished product! I feel that although I am slowly making progress and finishing it relatively quickly, I still need to make more progress and strengthen my grammar.

首先，先謝謝您前來觀看我的成品！ 我覺得對我來說雖然有慢慢在進步，也比較快速就做完了，但是還是需要再更進步，對於語法上面還是需要更加強。

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

There is nothing I am most proud of in this question, because I was stuck in Javascript for almost a day, and I still need to strengthen my strength, so I am not particularly proud of it. ※Record: one day

在這題當中我沒有最自豪的地方，因為我卡在Javascript卡了快要一天的時間，對於自己的實力還尚需加強，所以沒有特別自豪的地方。 ※紀錄：一天

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

Almost all of them contain a lot of Javascript, and there are also layout issues.

1. The Javascript part is because I am not familiar with it, so I don’t want to click to appear or change the color, etc. It was all a big obstacle. After reading many articles and asking about ChatGPT, I slowly absorbed it myself, and finally I was able to solve it!
2. The problem with typesetting is because I am a perfectionist and need to be very perfect, so I put a lot of effort into typesetting!

幾乎都是Javascript的部分比較多，還有排版的問題。

1. Javascript的部分是因為本身比較不熟悉，所以對於點擊出現或是更改顏色等等。都是一大障礙，查了很多文章和詢問ChatGPT之後再自己慢慢吸收，最後才得以解決！
2. 排版的問題是因為我是一個完美主義者，需要做到非常完美才可以，所以在排版上面下了很多功夫！

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

First of all, thank you for coming to see my finished product. I am not very familiar with Javascript yet, so I may need to improve on the grammar, as well as the css part. Please give me your advice!

首先，先謝謝您前來觀看我的成品。 我對於自己在Javascript上還沒有到很熟悉，可能在語法上還需再加強，css的部分也是，再請大家多多指教！

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

I don’t think I’m particularly proud of this part. I have very high requirements for the accuracy of the picture, so I spent a lot of time dealing with issues between components and grammatical issues. ※Record: two hours and thirty minutes.

我覺得在這題裡面我沒有特別自豪的部分，我對於畫面的精準度要求非常高，於是花費了非常多的時間在處理元件之間的問題，還有語法的問題。 ※紀錄：兩小時三十分鐘。

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

The problem I encountered was between components and the interface. There was no problem with the code layout, but there was a problem with the output interface layout. That is, my code was divided into board-top and board-bottom. The result picture shows that the board-bottom is wider than the board-top, but no matter what I do, I can't make it wider than the board-top. I also repeatedly made a lot of inquiries and found out where the problem was. But the problem still hasn't been solved.

我遇到的問題是元件之間和介面的問題，程式碼排版的部分是沒有問題的，但是在輸出介面排版有點問題，就是在我的程式碼有分為board-top和board-bottom，在結果圖看來board-bottom和比board-top還要寬的，但是我怎麼做就是沒辦法做出比board-top還要寬，我也反覆做了非常多的查詢和找出哪裡有問題。但是還是沒有解決這個問題。

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

First of all, thank you for coming to view my finished product. I feel that the interface layout and CSS are not perfect, and there are also differences between the output interface and the result image. I hope you can give me some advice. I will be very grateful.🥺

首先，先謝謝您前來觀看我的成品，在介面排版和CSS的部分我自己覺得沒有到非常完美，而在輸出介面跟結果圖也有差別，希望大家可以給我一些指教，我會非常感謝的🥺

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

I'm proud that I solved the problem I encountered and was able to do it in about an hour. ※Record: one hour and ten minutes

我自豪於我竟然解決了所遇到的問題，並且還可以在一小時左右做完。 ※紀錄：一小時十分鐘

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

The problem I encountered was the background image problem, which troubled me for a long time. I also tried many ways to solve it, and finally used position:absolate; and margin:-70% to solve it. There is also a problem with photo stickers, which has troubled me for a long time. Finally, I finally solved this problem using position:relative; and margin-top:-17%;.

我遇到的問題是背景圖片的問題，那困擾了我好久，我也嘗試使用了多種方式去解決它，最後使用了position:absolate;和margin:-70%來解決。 還有一個是大頭貼的問題，也是困擾我好久，最後終於用position:relative;和margin-top:-17%;來解決這個問題。

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

First of all, thank you for coming to see my finished product. I feel that because of the previous development experience, it is getting easier and easier to get started. Although there are some grammar uses that still need to be checked for answers, most of them are almost no problem. The main thing is typesetting. For the part, please give me your advice!

首先，先謝謝您前來觀看我的成品，我覺得因為前面開發的經驗，越來越好上手，雖然有一些語法的使用還是需要去查詢答案，但是大部分幾乎都沒有問題了，主要還是排版的部分，再請各位多多指教！

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

I am very proud that I have gradually become familiar with the use of HTML syntax and CSS syntax, and I can complete the program faster and faster. ※Record: fifty minutes

我很自豪於慢慢熟悉了HTML語法和CSS語法的使用，越來越快的把程式做完。 ※紀錄：五十分鐘

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

For me, the challenge of this question is CSS layout. Because the three layouts are the same, there is a big challenge in CSS layout. If you are not careful, you will write a lot of lines.

對我來說這一題的挑戰是在於CSS排版，因為三個版面都雷同，所以在CSS排版上面有著很大的挑戰，一不小心就會寫很多行出來。

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

First of all, thank you for coming to view my finished product. I feel that after I gradually become familiar with operating HTML and CSS, I will be able to make finished products directly after seeing the design screen. There is still a lot to need in HTML and CSS. If you know anything about it, please give me some advice!

首先，先謝謝您前來觀看我成品，我覺得開始慢慢熟悉操作HTML和CSS之後，對於看到設計畫面就可以直接做出成品是一個相當大的進步，在HTML和CSS上還是有很多需要了解的地方，再請各位多多指教！

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

I am most proud that I finally solved a problem that has been stuck for a long time. Hahaha, I searched for many methods and finally found a suitable method! ※Record: one hour and forty-three minutes

我最自豪於我終於解決卡住已久的問題了哈哈哈，我找了好多種方法，最後終於找到一種適用的方法！ ※紀錄：一小時四十三分鐘

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

The most challenging thing is the problem of image masking. I have found two methods in total.

One is to use .pic:before {}, and then use the relationship between position and z-index layers to solve this problem.

The second method is to add a ，在css中使用mix-blend-mode:multiply;來呈現圖層混合的狀態。

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

First of all, thank you very much for viewing my finished product. I am not very familiar with the syntax of CSS yet and need to improve it a lot, especially regarding the problems with pictures and shadows. Please give me your advice!

首先非常謝謝您觀看我的成品，對於css的語法尚未非常熟悉，還需要多多加強，尤其是關於圖片上的問題還有陰影的問題，再請大家多多指教！

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

What I am most proud of is that I was able to complete this question quickly and solve the problems I encountered very quickly! ※Record: one hour

我最自豪的是我很快就可以完成這一題了，並且也很快就解決遇到的問題！ ※紀錄：一小時

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

Basically, I didn't encounter any difficulties with this question. The main reason is that I am not familiar with the shadow part of the component and still need to strengthen it. I also consulted a lot of documents to solve it.

基本上這題沒有遇到甚麼困難，主要是對於元件陰影的部分尚不熟悉，還需要多多加強，也是查詢了很多文件才得以解決。

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

First of all, thank you very much for coming to view my finished product. In this question, the of the component may be a bit complicated and the layout is a bit messy, especially the css part. It still needs a lot of improvement. Please give me your advice!

首先很謝謝您前來觀看我的成品，在這題中，可能對於元件的有點複雜，排版有點亂，尤其是在css的部分，尚需要多多加強，再請各位多多指教！

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

I think I'm proud that I solved the image hover problem. It bothered me for a long time, but I finally solved it! ※Record: One hour and thirty minutes

我覺得我自豪於我解決了圖片hover的問題，那困擾了我好久，但最終還是把它解決了！ ※紀錄：一小時三十分鐘

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

The most challenging thing is that when the image hover displays the background-color, the view-icon must also appear. It took me about twenty minutes to solve this final problem.

最有挑戰的是圖片hover顯示background-color的同時也要有view-icon的出現，我花費大概二十分鐘的時間在解決這個最終問題。

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

First of all, thank you for watching. This time I wrote the code very smoothly. I feel like I am gradually getting used to writing web pages. I am gradually getting familiar with the use of components or layout. Mainly because I am not familiar with CSS yet. Please give me your advice!

首先，先謝謝您的觀看。 這次的程式碼寫起來特別順，感覺自己有慢慢熟悉習慣寫網頁的感覺，對於元件上的使用或是排版都慢慢熟悉了，主要是在CSS上尚未熟悉，再請各位多多指教！

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

What I am most proud of is that with the experience of the previous questions, I solved this question very quickly! ※Record: ten minutes

我最自豪的是有了前面幾題的經驗，這題很快就做出來了！ ※紀錄：十分鐘

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

This question is basically to deepen the use of semantic components, so the challenge for me is how to make full use of semantic components without making the code look confusing.

這題基本上是加深對於語意化元件的使用方式，所以對我的挑戰是要怎麼活用語意化元件，並讓程式碼看起來不會混亂。

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

First of all, thank you for watching. I feel that I may not be very familiar with the use of layout and components, and I need to do more questions to improve myself! Please give me your advice again!

首先，先謝謝觀看你的觀看。 我覺得在排版還有元件上的使用可能還沒有很熟悉，還需要多多做題目來提升自己！再請各位多多指教！

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

I think it should be the Javascript part. It means a lot to me to query, understand, research and write it step by step in one day!

我想應該是Javascript的部分，一步一步查詢、了解、研究並且在一天內寫出來，對我來說意義非凡！

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

Mainly the JavaScript part. Because I am not familiar with JavaScript, I spend more time querying and understanding it. ※Record:Takes one hour and fifty minutes

主要是JavaScript的部分，因為對於Javascript比較不熟悉，所以花費較多時間去查詢跟理解。 ※紀錄:用時一小時五十分鐘

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

Regarding the layout and grammar of web pages, there are still some unfamiliar parts, such as grammar, but with the experience of the previous questions, I can solve it quickly. The other part is about Javascript, because compared to HTML and CSS, Javascript is relatively rarely exposed. It will be improved in the future, and I would like to ask for your advice from seniors!

對於網頁的排版還有語法，相對還是有一些些不熟悉的部分，像是語法之類的，但是有了前幾題的經驗，也是很快就做出來了。 另外是對於Javascript的部分，因為相對HTML和CSS來說，Javascript是比較少接觸到的，未來會再補強，再請各位前輩多多指教！

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

I think this question is more about consolidating the concept and application of web design and strengthening the writing method of web design.

我覺得這題比較像是穩固對於網頁設計的觀念跟使用，加強對網頁設計寫法。

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

Basically, there are no difficulties encountered in this problem, and it can be solved.

這題基本上沒有遇到甚麼困難，都可以解決。

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

With the experience of practicing the previous questions, I completed this question very quickly. Although the formatting and the grammar of some CSS or HTML cannot be said to be complete, please give me your advice!

有了前幾題練習的經驗，做這個題目算是很快就完成了，雖然在排版和某些CSS或是HTML的語法上不能說很完整，還請大家多多指教！

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

Step by step, based on the experience I learned before, I feel that it is easier to make this problem, and I can understand it.

一步一步來，從之前學習到的經驗，感覺製作這個問題更加簡單，並且自己也看得懂。

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

Mainly the CSS parts, such as color, layout, and shadow, took a long time to complete after searching and researching.

主要都是css的部分，像是顏色、排版、影子的部分，也是查詢跟研究了很久才完成。

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

The code still feels a lot long and may need to be recompiled. It should be much shorter! Although there is still a lot to learn, I will become more confident step by step!

程式碼還是有很多攏長的感覺，可能需要再重新編譯一次，應該會簡短很多！雖然還有很多需要去學習的地方，但是一步一步來變成更有信心！

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.

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

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

依照Figma上面的格式製作，由於有了Figma的幫助，很快就完成了這題！

Follow the format on Figma. Thanks to the help of Figma, this question was completed quickly!

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

這一題基本上沒有遇到甚麼挑戰，更像是讓你熟悉HTML的元件排版、使用和CSS的熟悉程度！

This question basically does not pose any challenges, it is more about making you familiar with the layout and use of HTML components and the familiarity with CSS!

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

因為我的排版很粗糙，幾乎都是一個div一個元件，然後css也擠在一團，但是這是我最盡力之後的成品！希望可以跟各位多多指教！

Because my layout is very rough, almost one div and one element, and the css is also crowded together, but this is the finished product after my best efforts! I hope I can give you some advice!

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

首先使用Figma來設計頁面格式還有顏色、排版，完成之後就依照Figma上面的格式製作，由於有了Figma的幫助，很快就完成了這題！

First, use Figma to design the page format, color, and layout. After completion, follow the format on Figma. Thanks to the help of Figma, this question was completed quickly!

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

這一題基本上沒有遇到甚麼挑戰，更像是讓你熟悉HTML的元件排版、使用和CSS的熟悉程度！

This question basically does not pose any challenges, it is more about making you familiar with the layout and use of HTML components and the familiarity with CSS!

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

因為我的排版很粗糙，幾乎都是一個div一個元件，然後css也擠在一團，但是這是我最盡力之後的成品！希望可以跟各位多多指教！

Because my layout is very rough, almost one div and one element, and the css is also crowded together, but this is the finished product after my best efforts! I hope I can give you some advice!

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

這次我沒有使用Figma來幫助我排版跟設計頁面，一步一步按照圖片將作品完成。

This time I did not use Figma to help me layout and design the page. I completed the work step by step according to the pictures.

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

這一題基本上沒有遇到甚麼挑戰，更像是讓你熟悉HTML的元件排版、使用和CSS的熟悉程度！

This question basically does not pose any challenges, it is more about making you familiar with the layout and use of HTML components and the familiarity with CSS!

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

因為我的排版很粗糙，幾乎都是一個div一個元件，然後css也擠在一團，但是這是我最盡力之後的成品！希望可以跟各位多多指教！

Because my layout is very rough, almost one div and one element, and the css is also crowded together, but this is the finished product after my best efforts! I hope I can give you some advice!