Latest solutions
Latest comments
- @Ahmeddnada@motuncoded
Weldone!!!
Here is a list of suggestion
-
the alt attribute of the image need to be filled and should not be empty and it should have a descriptive information about the image.
<img src="image-qr-code.png" alt="QR code Image" />
-
The div around the image can be change to
<figure>
as the image container and<figcaption>
for the caption for the image.
<figure className="image mb-4"> <img src="image-qr-code.png" alt="QR code lmage" className="w-full rounded-lg" /> <figcaption>Scan the code to improve your front-end skills</figcaption> </figure>
Marked as helpful -
- @Muhammad-Saim-KhanWhat are you most proud of, and what would you do differently next time?
"Thank you for reaching out to us! Your message has been successfully submitted, and our team will get back to you shortly. We appreciate your patience and look forward to assisting you. If you have any urgent queries, feel free to contact us directly through our support email or phone number. Have a great day!"
What challenges did you encounter, and how did you overcome them?Challenges Encountered: During the process of building the project, one of the major challenges I faced was ensuring the form validation was both user-friendly and functional. Initially, getting the form fields to properly validate inputs, especially the email field with regex, was a bit tricky. Additionally, making the form fully responsive across all screen sizes required multiple iterations to get the layout just right.
How I Overcame Them: To resolve the validation issues, I spent time debugging and refining the regex for email, while also improving the error messages to make them clearer for users. For responsiveness, I used Tailwind CSS and ensured to test the form on different devices and viewports, tweaking the design until it looked perfect on all screens.
What specific areas of your project would you like help with?There are a few specific areas where I would appreciate some help:
Form Validation: While the form is working fine, I want to make sure the validation is as robust as possible. I'm currently using regex for email validation, but I want to know if there are better approaches or best practices for handling form validation more efficiently, especially with larger forms.
Responsive Design: Although the design is responsive, I'm looking for feedback on optimizing it further for mobile devices. Specifically, I want to ensure that the layout scales smoothly across all screen sizes without any issues in spacing or alignment.
Code Optimization: I feel that some parts of my code could be refactored to make it cleaner and more maintainable. I'd appreciate advice on how to better structure my state management or simplify some of the event handlers.
Error Handling: Currently, I'm handling form errors with basic useState. Are there better ways to manage form errors, perhaps using React Hook Form, Yup, or Zod for validation?
@motuncodedCongratulations to you on the completion of the project.
Few suggestions for a better HTML structure:
<p className="text-[14px] text-[#383a3b] mb-1 font-normal"> First Name <span className="text-[#0d6eff]">*</span> </p>
can be changed to<label htmlFor="firstname" className="text-[14px] text-[#383a3b] mb-1 font-normal"> First Name <span className="text-[#0d6eff]">*</span> </label>
and for every input field.- The p tag for the error can be changed to this
<p id="error-message" aria-live="assertive">{error.message}</p>
to allow screen readers to understand that it is validation errors.
hope this is useful
Marked as helpful - @agpprastyo@motuncoded
Congratulations on the completion of your project
Few suggestions to make it better:
- It is a good practice to have the css styles in a css file
- The
<div class='container'>
should be changed to<main class='container'>
or<div role="main" class="container">
to be accessible to screen readers - The heading should be in hierarchy i.e
<h1>
><h2>
><h3>
. This shows that the heading should be ascended order - It is also a good practice to use a formatting package e.g prettier to format the code base.
- @SUJAY-HK@motuncoded
Congratulations on the completion of your project
Few suggestions that make the HTML structure better
- It is a good practice to have the css styles in a css file
- The
<div class='container'>
should be changed to<main class='container'>
or<div role="main" class="container" >
to be accessible to screen readers - The heading should be in hierarchy i.e
<h1>
><h2>
><h3>
. This shows that the heading should be ascended order
I hope you find this useful
Marked as helpful - @AbdoMohamad768@motuncoded
Congratulations on completing this challenge
Here are few suggestions to be added
- The
<div class="card">
can be changed to<main class="card">
. - The heading should be in hierarchy i.e the
<h4>
should change to<h2>
.
I hope this is useful.
Marked as helpful - The
- @Cyber-dave-official@motuncoded
Congratulations to you all
Here is a suggestion that can be added
- The heading should be in hierarchy i.e
<h1>
to<h2>
to<h3>
.
I hope it is helpful
- The heading should be in hierarchy i.e