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 with SCSS, BEM, and CSS Grid

@rafo38kh

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


Any feedback is welcome 🙂

Community feedback

P
Ken 4,915

@kens-visuals

Posted

Hey @rafo38kh 👋🏻

I have some quick tips to help you fix the HTML issues.

  • Since you already have aria-hidden="true", just add empty alt tags, so that HTML doesn't throw any errors. Don't forget to generate a new report once you fix them.

I hope this was helpful 👨🏻‍💻 Other than that, you did a superb job, keep in that pace. Cheers 👾

Marked as helpful

0

@rafo38kh

Posted

@kens-visuals I was just fixing that, but thanks for the feedback))

0

@DamnItAzriel

Posted

Hey, this is really good work. Can you tell me how did you exactly given a error "Please provide a valid email" if someone enters wrong email. I struggled to do that.

0

Musa 170

@its-me-musa

Posted

@DamnItAzriel Hi, if I am not mistaken, in this case its done using Javascript. Basically when you press the submit button: .. get the input value and check to see if it matches an email pattern .. if it doesn't, show the error message ( can keep it hidden by default and show it only if the email format is valid, via JS by adding a class to the error message ) .. if it does match you can show another message like 'Thank you' or 'success' ( you can change the innerHTML of the error message)

Also HTML has built in validation for email if I am not mistaken. ... you can set the input type to 'email', but the error message and the styling would be different

You might want have a look at MDN or Stackoverflow. Its a few lines of very simple JS. Hope this is helpful without giving the exact solution..

Kind regards

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