https://github.com/codewithalamin/newsletter-signup-form
A responsive newsletter sign-up form with validation and success/error messaging using HTML, Sass, and JavaScript.
https://github.com/codewithalamin/newsletter-signup-form
codepapa360 codewithalamin css frontend frontend-mentor frontend-web html javascript
Last synced: 4 months ago
JSON representation
A responsive newsletter sign-up form with validation and success/error messaging using HTML, Sass, and JavaScript.
- Host: GitHub
- URL: https://github.com/codewithalamin/newsletter-signup-form
- Owner: CodeWithAlamin
- License: mit
- Created: 2023-05-26T14:40:43.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-10-30T12:36:24.000Z (8 months ago)
- Last Synced: 2025-01-08T19:11:28.882Z (6 months ago)
- Topics: codepapa360, codewithalamin, css, frontend, frontend-mentor, frontend-web, html, javascript
- Language: SCSS
- Homepage: https://newsletter-signup-form-alamin.netlify.app
- Size: 605 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
Newsletter sign-up form with success message
Challenge from [Frontend Mentor](https://www.frontendmentor.io/profile/CodeWithAlamin)
This project showcases a user-friendly form that allows users to submit their email, validates inputs, and displays success or error messages. The project includes responsive design and interactive features for a seamless user experience.
## The challenge
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
## Built with
- Semantic HTML5 markup
- Mobile-first workflow
- CSS custom properties
- CSS Grid
- JavaScript
- NPM
- [Webpack - a module bundler](https://webpack.js.org/)
## Installation
- Clone this repo:
```sh
git clone https://github.com/CodeWithAlamin/Newsletter-signup-form.git
```
- Install dependencies:
```sh
npm install
```
- Build command:
```sh
npm run build
```
- Live server:
```sh
npm start
```
## Author
👤 Alamin
- Twitter - [@CodeWithAlamin](https://www.twitter.com/CodeWithAlamin)
- LinkedIn - [@CodeWithAlamin](https://www.linkedin.com/in/CodeWithAlamin)
- Frontend Mentor - [@CodeWithAlamin](https://www.frontendmentor.io/profile/CodeWithAlamin)
- Github: [@CodeWithAlamin](https://github.com/CodeWithAlamin)
Feel free to contact me with any questions or feedback!
## Show your support
Give a ⭐️ if you liked this project!
## Acknowledgments
Special thanks to Frontend Mentor for providing such an amazing platform to practice and improve my frontend skills. The challenges and projects available on the website were both fun and challenging, and helped me learn a lot in a short amount of time.
## License
This project is licensed under the [MIT](https://github.com/CodeWithAlamin/Newsletter-signup-form/blob/main/LICENSE.md) license, which means you can use, modify, and distribute the code as you wish. If you have any questions or feedback, feel free to reach out. Thank you for considering my code!