Design comparison
Solution retrospective
All reviews are welcome. Please comment to make me improve
Community feedback
- @TomasPereira-DevPosted about 1 year ago
Hey, what's up?, congrats for completing this project!, I hope this tips help you to get better with some details.
For text, try adding max-width to the
<p>
and<h1>
tags, this mixed with the ch unit will make the line breaks.For the inputs try changeing the default borders from the inputs using the , like
border: 2px solid black;
, they will look nicer.And for the shadows, this video will be useful, if you add too much the desing will look weird, shadows are a tricky thing hahaha.
Good luck!
Marked as helpful0@abubakr01Posted 12 months agoThank you very much@TomasPereira-Dev I really appreciate
1 - @petritnurediniPosted 10 months ago
Congratulations on finishing the Intro Component with Sign Up Form project, Abu-bakrr! It's great to see your effort in building this responsive form. Here are a few tips to make it even better:
-
HTML & Accessibility:
- Label Inputs: Use
<label>
elements for better accessibility. This helps screen readers and improves form usability. - HTML Validation: Check your HTML code with a validator to ensure there are no errors or missing attributes.
- Label Inputs: Use
-
CSS Styling:
- Consistent Styling: Ensure consistent styling for all input fields and buttons.
- Responsive Design: Test your design on various devices to ensure it scales well. Use relative units like
em
orrem
for better control.
-
JavaScript:
- Form Handling: Consider using
event.preventDefault()
in your form submission to prevent page reload. - Error Handling: Display error messages next to the corresponding input field for better user experience.
- Form Handling: Consider using
-
Performance:
- Optimize Images: Make sure images are optimized for faster loading times.
-
Code Maintenance:
- Separation of Concerns: Separate JavaScript, CSS, and HTML into different files for better maintainability.
-
Learning Resources:
- Accessibility: MDN Web Docs
- CSS Tricks: Responsive Design
- JavaScript Form Validation: w3schools
Keep up the great work! Your journey in front-end development is progressing well, and I'm excited to see your future projects!
0 -
Please log in to post a comment
Log in with GitHubJoin 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