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

Base Apparel coming soon page

Natsukiโ€ข 50

@NatsukiCode

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


I was not able to get the email submit button to display the hover states. Also, I'm not sure how to do the mobile version. I would very appreciate any comments to help me out. Thank you :)

Community feedback

Abdul Khalid ๐Ÿš€โ€ข 72,160

@0xabdulkhalid

Posted

Hello there ๐Ÿ‘‹. Congratulations on successfully completing the challenge! ๐ŸŽ‰

  • I have other recommendations regarding your code that I believe will be of great interest to you.

LABELS ๐Ÿ”–:

  • input elements wants a label associated with it
  • A <label> is used to create a caption for a form control. The <label> can be associated with a form control either implicitly by placing the control element inside the label element, or explicitly by using the for attribute
  • Effective form labels are required to make forms accessible. The purpose of form elements such as checkboxes, radio buttons, input fields, etc, is often apparent to sighted users
  • Even if the form element is not programmatically labeled. Screen readers users require useful form labels to identify form fields, So here using aria-label="{values}" attributes for input is enough to be accessible
  • Example:
<input class="email error" id="emailAddress" aria-label="Enter your Email Address"  placeholder="" required="">

.

I hope you find this helpful ๐Ÿ˜„ Above all, the solution you submitted is great !

Happy coding!

Marked as helpful

1

Natsukiโ€ข 50

@NatsukiCode

Posted

@0xAbdulKhalid Thank you so much for your amazing comment! I'm sure I can do better next thanks to you:)

0
Cฦฐแปngโ€ข 845

@docuong0912

Posted

@media screen and (max-width:375px){ // your mobile responsive style }

and btw your submit button works fine

1

Natsukiโ€ข 50

@NatsukiCode

Posted

@docuong0912 Thank you for your advice! I'm working on it right now as my mobile responsive style is completely messed up ;(

1
Cฦฐแปngโ€ข 845

@docuong0912

Posted

@NatsukiCode don't worry, you'll get used to it in no time, just an adjustment element size to fit mobile viewport, ask if there's any problem

Marked as helpful

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