This is a solution to the Newsletter sign-up form with success message challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
This was a good project to work on and grow front end skills. It is desktop and mobile friendly. I took a desktop first approach and then adapted it to mobile. I went with vite+react as my framework and tailwind CSS to style.
Users should be able to:
- Add their email and submit the form
- See a success message with their email after successfully submitting the form
- See form validation messages if:
- The field is left empty
- The email address is not formatted correctly
- View the optimal layout for the interface depending on their device's screen size
- See hover and focus states for all interactive elements on the page
You can see other screenshots in the screenshots folder.
- Solution URL: Github Repo
- Live Site URL: Github Page
- Semantic HTML5 markup inside react components
- TailwindCSS exclusively
- Flexbox
- CSS Grid
- Desktop-first workflow
- React - JS library
- Vite - Frontend tooling
- TailwindCSS - Styling Framework
- Google - I'm serious...don't hesitate to google things....but please work on being GOOD and googling. There is a difference.
- React Documentation - This was a very helpful in understanding how react works.
- Website - Caleb McMains
- Frontend Mentor - @calebmcmains
Shout out to Kyle with Web Dev Simplified, great react content Web Dev Simplified YouTube
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent