After a long time doing a FEM challenge!
Was incredibly fun and learned plenty of new things.
It'll be a great help if you can drop a feedback so I can improve my JavaScript and SASS skills 🙏
Thankyou in advance! ❤️
Hi there Snehamoy Bag
Absolutely excellent job with this project. The only thing I found that needs to be fixed would be the background image. By default the background image has repeat on and at a certain size it begins to repeat. A quick fix is to add no-repeat to the background-repeat property and to add the value 'cover' to the background-size property.
But other than that, perfect job. I think you're ready for more challenging projects.
Happy Coding!
This project went pretty smoothly. Had a bit of a problem with the responsive part, but the JS was pretty simple.
Is there any way to improve my html, css and JS code?
Hi there BlunderBarry,
Good work on this project but there's just a few things I'd like to point out.
At smaller screen sizes the image no longer takes up the entire width of the viewport. This can be fixed by adding a width of 100% to your image element.
The button on smaller screen sizes should be centered. This can be fixed by getting rid of the 80% width value that's is on your form.
To help you with responsive design I would recommend reading the book "Responsive Web Design" by Ethan Marcotte. Great intro book into responsive web design.
I'd also challenge you to fix the body element on your project. It currently doesn't cover the entire viewport height and it is ruining your background colour. Good luck!
Happy Coding!
Any and all suggestions for improvement are welcome.
Specifically, if anyone can tell me how to get rid of the background images in the First Name and Password inputs that seem to be automatically added by the Form element. I have searched but I haven't come across a solution yet.
Hi there Shane,
Good work on this project. I would just like to point out some things about your project.
You should apply the background image and color on the <body> element. If you give a min-height of 100vh to your <body> element you'll have your background image take up the entire viewport. Hence, you won't have any whitespace ruining your design.
At the screen width of 607px the design start's to break.
I would challenge you to fix these 2 things. It will definitely help you for when you start designing more complex UIs.
Happy Coding!
This was a great project. It helped me learn a lot of things especially form validations using JS. I appreciate any feedbacks.
Hi Deepak,
Good effort on this project. There a just a few suggestions I'd like to point out.
In between the screen sizes 511px and 950px the design starts to become all mangled.
At really big screen sizes(greater than 1200px), the design becomes stretched and is no longer centered vertically.
The background image doesn't stretch the entire vertical viewport because the <body> element doesn't.
Responsive design is basically a must for most web applications these days, so I would suggest practicing as much as you can now so that when you build more complex sites/apps you will have built up the necessary knowledge to do so properly. I would challenge you to fix the 3 points I've noted above. It will help be invaluable practice. If you need help, feel free to ask me any questions.
Happy Coding 😊
Thank you for stopping by my submission. As usual, any and all feedback is welcome.
Hi there Roxanne,
Excellent work on this project. I would just like to point out a few things.
When the screen size is less than 375px, your image disappears because of the min-width you set for it. This is the piece of code responsible for it: <source media="(min-width: 375px)" srcset="images/hero-mobile.jpg 375w">.
Between the screen sizes 862px and 1049px the design breaks.
At larger screen sizes (greater than 1500px), the text content is no longer vertically centered.
Responsive design is almost a must in the industry these days, so our designs need to look good on most screen sizes. I challenge you to fix these edge cases. What you'll learn, will become invaluable. Especially, once your start building multi-page websites, with multiple components. If you need help, you can always send me a message😊
Happy Coding!
The biggest challenge was, of course, JS, but I was able to create universal code so that, no matter how many inputs we create, it works the same for everyone. I could have used condition statements like many of you, but I tried to create clean and universal code. If you have comments, please let me know, good luck !
Hi there Kelebglin,
I just wanted to say great job on this project! There are just 2 things I want to highlight.
When the screen size is between 511px and 918px, the design gets messed up.
When accessing your design from my phone in landscape mode, the design is broken.
Hence, my challenge to you is to fix both of these problems.
Happy Coding!
Hi, still got some issues with the work, I can't change the placeholder when email error is given and even when some input are filled the error still runs on all of them, I'm sure is because I used a for loop that's why it's giving me problems. Anyway JavaScript looks hard.
Feedback appreciated Thank you.
Hi there Osauyi,
Good effort on this project but I noticed a few things. Your project breaks on different screen sizes and the form validation needs to be fixed. I have a few suggestions that I think will make your life a lot easier.
Add the CSS property "box-sizing: border-box" to all html elements by using the '*' selector. This will make sure that your elements respect the size you want them to be, even if you add padding. If you want to learn more about it. https://www.w3schools.com/cssref/css3_pr_box-sizing.php
Get rid of the min-width for your input elements on your form and use width with a percentage value. This will make your input size responsive. You want this because it will allow your input fields to adjust to the appropriate size based on the user's device.
Add a min-width value to your body element. This will make your project look good even on much smaller screen sizes. I usually put a min-width of 365-375px. This is the size I need my project to be in order for the content to still be proportional.
With a few changes made to your code you could make your project fully responsive. If you can't these tips don't suffice and you need more hints, feel free to respond here and I will help you out.
Happy Coding!
Any feedback is welcome!
It's my first component using SASS and variables in styling. It's not pixel perfect, also I thought of a better approach at the end of the project using GRID i think it was easier.
Hi Diego, Great work on this challenge, you really knocked it out of the ballpark. The only piece of advice I can offer is to use a CSS methodology when creating your stylesheets. In case you don't know, a CSS methodology is simply a set of rules to follow when writing CSS that makes it easier to manage. While for a small project like this it could be considered overkill, getting used to it now will help you later on in your developer journey when you begin being responsible for larger and more complex projects.
The link below provides a good overview of the different CSS methodologies out there and their benefits. https://www.webfx.com/blog/web-design/css-methodologies/#:~:text=1%20Object-Oriented%20CSS%20%28OOCSS%29%202%20Block%2C%20Element%2C%20Modifier,%28SMACSS%29%204%20SUIT%20CSS.%205%20Systematic%20CSS.%20
So I challenge you to implement one of them for your next challenge. I personally enjoy the BEM methodology. It's simple and very easy to implement.
Keep up the good work and happy coding!
