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

BreinerJT 530

@BreinerJT

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


Well, I had to google the regular expression to validate a email formulary since I didn't want to use an email type input but any feedback is welcome!

Community feedback

Vanza Setia 27,795

@vanzasetia

Posted

Hi, BreinerJT! 👋

Congratulations on finishing this challenge! 👏 It's great to see you completing another challenge! 😄

For the input element, I would recommend using the correct type for the input. Mobile users rely on the virtual keyboard. The virtual keyboard can show the correct keyboard layout based on the type of the input element. This will make the user experience for mobile users much better. 😉

To prevent the native form validation, I suggest adding the novalidate attribute to the form element instead.

Some more suggestions.

  • I recommend using all classes begin with js- to select DOM elements within the JavaScript. Keep in mind, that only use the js- classes only for JavaScript purposes. This will make sure that when you refactor or worik with the CSS or the JavaScript you won't have to worry about both of them at the same time.
// Example
const form = document.querySelector(".js-form");
  • Always use classes to reference all the elements that you want to style. Using id is going to make your stylesheet have high specificity (hard to maintain). As a side note, ideally, id should be used for anchoring.

That's it! Hope this helps. 😊

Marked as helpful

0

BreinerJT 530

@BreinerJT

Posted

Thank you @vanzasetia, your feedbacks are always amazing.

0
Vanza Setia 27,795

@vanzasetia

Posted

@BreinerJT No problem! 👍

0

@dannyswagg

Posted

Hello, nice job. There's no feedback message if the email is in the right format only when its wrong you might want to add that as it is a user experience function.

Marked as helpful

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