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

Mobile First, Base Apparel Coming Soon (HTML, SCSS, JS)

Jordan 180

@JSCHLTE

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


Feedback is always helpful!

Community feedback

hao pham 745

@jerry-the-kid

Posted

Wow. well done ✨✨

But your in .left__text input[type="email"] you can set font-family : inherit; so when you input text you won't have default font-family.

Some issues in smaller height i think. You can try to fix that :)). Sr i don't known how to fix that :((.

Marked as helpful

0
Amon 2,560

@A-amon

Posted

Hello! Great work~ The responsiveness looks good.

I have a few suggestions that might be helpful:

  1. Instead of editing the innerHTML to add the error message in .warning, you can just set the textContent of .warning. Then maybe add an .error class to it. In CSS, use a before/after selector to display the error icon image.

  2. You can center flexbox items vertically by using align-items:center.

  3. Use form tag for .inputs to allow submission via both pressing Enter key and clicking the submit button.

  4. Use button tag for #inputImage. This will let users who use screen reader to know it's a button.

Marked as helpful

0

Jordan 180

@JSCHLTE

Posted

@A-amon Thanks for the feedback! I also keep forgetting how useful pseudo elements are in CSS, also how important support for screen readers are. Thanks for pointing out these issues.

0
Amon 2,560

@A-amon

Posted

@JordanDevelops Glad to help! Those things ll become natural as you code more~ Good luck

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