This is a solution to the Contact form coding challenge. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
- Solution URL: Contact form using optimal useForm React Hook | Tailwind CSS project
- Live Site URL: (https://contactform-javierdesant.netlify.app/)
- CSS custom properties
- Flexbox
- React - JS library
- Vite - Build tool
- Tailwind CSS - CSS framework
- react-hook-form - For form validation
- tailwindcss-forms - To make form customization easier
- tailwindcss-animate - For animations
In this project, I learned the following:
- Handling form validation with React Hook Form
- Displaying error messages conditionally
- Applying dynamic styling based on state
- Structuring components modularly
- Creating a responsive layout with Flexbox
- Using the basis class for responsive design
- Utilizing the new has-[] class for conditional styling
- Ensuring accessibility with labels and inputs
- Handling click events for interactivity
- Mastering Tailwind CSS
- Managing state with React
- LinkedIn - Javier de Santiago Soto
- Frontend Mentor - @javierdesant