Hi! I really liked your solution! However, I noticed a few areas where some adjustments could enhance the overall quality:
Image Centering: The assets/images/illustration-sign-up-mobile.svg
image is not centered on mobile devices. This affects the layout and user experience, so centering it would provide a more polished look.
Use of <picture>
Element: Instead of duplicating the <img>
tag for responsive images, consider using the <picture>
tag. This method is more efficient and can improve loading times. You can find more information about it here.
Email Input Type: I noticed that youβre using a text input for the email field. Switching it to <input type="email">
would not only enhance form validation and improve accessibility but also allow the browser to autocomplete the user's email address, making it easier for them to fill out the form.
Red Background: If the user enters an invalid email, consider using a setTimeout
to make the red background disappear after a short period. This way, the user is alerted to the error without being distracted for too long.
Iβve also created a similar solution, and I would love for you to take a look at my code and provide feedback. Overall, great work! With these adjustments, your project will be even more polished.