Form validation and responsive web design

What I Learned from This Project Responsive Web Design: I learned about responsive web design — making web pages adapt to all screen sizes, from mobile to desktop. For my project, I used a mobile-first approach, where I initially designed the layout to stack content vertically for smaller screens, as shown below: Then, using media queries with min-width, I adjusted the layout for desktop screens to match the cover picture design. Here’s a screenshot showing part of the code: HTML Constraint APIs for Forms: I learned about HTML Constraint Validation APIs, which include attributes like , , minlength, maxlength, required, and more. These attributes define rules and guidelines for user input in form fields, helping prevent invalid data submission. Form Validation Using JavaScript: I learned how to perform form validation using JavaScript to ensure that the data collected from users is accurate and complete. JavaScript validation offers more control over the validation process and allows for custom error handling. Regular Expressions (Regex): I learned about regular expressions (regex), which are sequences of characters that define a search pattern. Regex is especially useful for form validation — for example, checking if an email input matches the correct format. Using JavaScript form validation along with regex, I was able to achieve the result shown in the image above.

Apr 28, 2025 - 14:13

What I Learned from This Project

Responsive Web Design:
I learned about responsive web design — making web pages adapt to all screen sizes, from mobile to desktop. For my project, I used a mobile-first approach, where I initially designed the layout to stack content vertically for smaller screens, as shown below:

Then, using media queries with min-width, I adjusted the layout for desktop screens to match the cover picture design. Here’s a screenshot showing part of the code:
HTML Constraint APIs for Forms:
I learned about HTML Constraint Validation APIs, which include attributes like , , minlength, maxlength, required, and more. These attributes define rules and guidelines for user input in form fields, helping prevent invalid data submission.
Form Validation Using JavaScript:
I learned how to perform form validation using JavaScript to ensure that the data collected from users is accurate and complete. JavaScript validation offers more control over the validation process and allows for custom error handling.
Regular Expressions (Regex):
I learned about regular expressions (regex), which are sequences of characters that define a search pattern. Regex is especially useful for form validation — for example, checking if an email input matches the correct format.

Using JavaScript form validation along with regex, I was able to achieve the result shown in the image above.