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

Used HTML、CSS and Javascript to Completed.

@DerRight

Desktop design screenshot for the Base Apparel coming soon page 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?

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

Huy Phan 1,960

@huyphan2210

Posted

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 the main tag, using main directly for .card instead of an article could simplify the structure.
  • Heading Tags: The .title class seems to represent a heading, so using an h1 tag instead of a p might be more appropriate.
  • Form Structure: For .input, using a form element with a submit button could be beneficial. This allows users to press Enter to submit rather than having to click the button. 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 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