Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Request path contains unescaped characters
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Intro with sign up form using flexbox and vanilla JS

Chloe 240

@cguttweb

Desktop design screenshot for the Intro component with sign-up form coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I'm reasonably happy with the final result but there is definitely room for improvement particularly in the JS I feel and form styling is always awkward to get it consistent. Any suggestions welcome.

I had some issues with the error icons managed to add the icon to the input fields, but it doesn't seem to appear on the password field for some reason? Anyone have any idea why?

Community feedback

Chloe 240

@cguttweb

Posted

Hey, thanks for the feedback. The ::after pseudo element is a good idea (I always forget about these) but that seems a lot of markup to add simply to show an svg. It also appears my images aren't working...

0

isimeri 250

@isimeri

Posted

@cguttweb can't do anything about it. The <input> element doesn't support the ::after and ::before pseudo-elements. That's why the wrapper div.

0
Chloe 240

@cguttweb

Posted

@isimeri Ah ok yeah that makes sense :)

0
isimeri 250

@isimeri

Posted

Hey there. The error icon thing doesn't appear anywhere at all on my side. I would wrap each input element in a <div class="wrapper"> and use the .wrapper::after pseudo-element to handle this. Cheers!

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