Design comparison
Solution retrospective
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!
首先,先謝謝您前來觀看我的成品!祝您有個美好的一天! 我覺得這題在語法上的使用沒有很正確,但是我也不知道應該要怎麼說,還有版面設計的部分!
Community feedback
- @huyphan2210Posted 23 days ago
Hi @DerRight,
I checked out your solution, and here are a few thoughts:
- Layout on Mobile Devices: The page layout doesn’t look as expected on mobile devices. I'd recommend using media queries to improve responsiveness. Additionally, exploring a mobile-first approach might help—designing for mobile devices first and scaling up for desktops.
- HTML Semantics: Your HTML structure is quite semantic—nice work! However, there are some areas for improvement. For example, since
.card
is the only child of themain
tag, usingmain
directly for.card
instead of anarticle
could simplify the structure. - Heading Tags: The
.title
class seems to represent a heading, so using anh1
tag instead of ap
might be more appropriate. - Form Structure: For
.input
, using aform
element with a submitbutton
could be beneficial. This allows users to press Enter to submit rather than having to click thebutton
. You might want to look into handling form submissions for more usability.
Hope this feedback helps!
0
Please log in to post a comment
Log in with GitHubJoin 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