Submitted over 3 years ago

Intro component with sign-up form

Erik Tangvik• 255

@Etang131

Preview site View code

This is a solution for...

HTML
CSS
JS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Let me know if anything needs to be fixed

Community feedback

ApplePieGiraffe• 30,545

@ApplePieGiraffe

Posted over 3 years ago

Hey, Erik Tangvik! 👋

Good work on this challenge! Your solution is responsive! 👍

Other than allowing the background image to fill up the entire area of the screen (as ezraguy so helpfully suggested) I think taking away the error messages on the input elements once the user has entered valid input (rather than after the user hits the submit button again) would make for a better UX and be a nice touch! 😉

Keep coding (and happy coding, too)! 😁

Erik Tangvik• 255

@Etang131

Posted over 3 years ago

@ApplePieGiraffe I'm a bit conflicted on this. I can change the code to work in that manner with one word. However I think that it is a bit too much to notify users they made a mistake before they submit a form at least once. I do think it should be something added for a password field though.

ApplePieGiraffe• 30,545

@ApplePieGiraffe

Posted over 3 years ago

@Etang131

Yeah, I got you. If you really wanted, perhaps you could specify different behaviors for the error messages for before and after the form has been attempted to be submitted at least once so that users aren't bothered by those error messages before they submit the form but the error messages are immediately taken away once they submit valid input when trying to submit the form a second time, as you said. IDK—just an idea! 😉

Guy Ezra• 615

@ezraguy

Posted over 3 years ago

Hey @Etang131, I have 1 suggestion to offer, I think the image component should not be in the container. because the container has a max-width:1440px and when you look at the website with a desktop monitor there are white spaces on the sides because the screen is wider than 1440px. what I would do is would take the image out of the container CSS as a background image and add it as an img tag and give it the following CSS:

.background-img{
position:'absolute';
width:100%;
height:100%;
z-index:-1;
}

other than that it looks great! Happy coding! 😄

Erik Tangvik• 255

@Etang131

Posted over 3 years ago

@ezraguy I had it white originally to show that the project was built to fit a certain display size. However I do get your point of it being a little out of place. So now I am having a slightly different color be the background for the "over flow", but keeping the image in the container.

Web Frog• 1,840

@MasterDev333

Posted over 3 years ago

Great work @Erik. However, you should remove overflow hidden for body tag when it goes on mobile. Now, I can't scroll down. ;) Happy coding~ :)

Erik Tangvik• 255

@Etang131

Posted over 3 years ago

@MasterDev333 Thank you the issue show be fixed.

Please log in to post a comment

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