https://github.com/fatemzh/newsletter-sign-up-form

A responsive newsletter sign-up form that validates user input and displays a success message upon successful submission. Built with HTML, CSS, and vanilla JavaScript, this project emphasizes form validation, user feedback, and mobile-first design principles.
https://github.com/fatemzh/newsletter-sign-up-form

frontend-beginner frontend-mentor mobile-first responsive vanilla-javascript

Last synced: 6 days ago
JSON representation

A responsive newsletter sign-up form that validates user input and displays a success message upon successful submission. Built with HTML, CSS, and vanilla JavaScript, this project emphasizes form validation, user feedback, and mobile-first design principles.

• Host: GitHub
• URL: https://github.com/fatemzh/newsletter-sign-up-form
• Owner: fatemzh
• Created: 2024-08-04T13:42:18.000Z (3 months ago)
• Default Branch: main
• Last Pushed: 2024-08-12T08:06:37.000Z (3 months ago)
• Last Synced: 2024-08-12T09:30:38.823Z (3 months ago)
• Topics: frontend-beginner, frontend-mentor, mobile-first, responsive, vanilla-javascript
• Language: SCSS
• Homepage: https://fatemzh.github.io/Newsletter-Sign-up-Form/
• Size: 422 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Newsletter Sign-up Form with Success Message

A responsive newsletter sign-up form that validates user input and displays a success message upon successful submission. Built with HTML, CSS, and vanilla JavaScript, this project emphasizes form validation, user feedback, and mobile-first design principles.

## Welcome! 👋

This is a solution to the [Newsletter Sign-up Form with Success Message challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/newsletter-signup-form-with-success-message-3FC1AZbNrv).

## Overview

This challenge was to build out this newsletter sign-up form and display a success message upon submission.

Users are able to:

- Submit their email to sign up for a newsletter

- See a success message with their email after successfully submitting the form

- Receive validation messages if the email field is left empty or incorrectly formatted

- View the layout optimally on different screen sizes

- Experience hover and focus states on interactive elements

# Frontend Mentor - Newsletter sign-up form with success message

![Design preview for the Newsletter sign-up form with success message coding challenge](./design/desktop-preview.jpg)

[Frontend Mentor](https://www.frontendmentor.io) challenges helps improving coding skills by building realistic projects.

Requirements for the challenge: HTML, CSS and JavaScript.**

## The challenge

The challenge was to build out this newsletter form and get it looking as close to the design as possible.

### Links

- Solution URL: [GitHub Repository](https://github.com/fatemzh/newsletter-signup-form)

- Live Site URL: [Live Site](https://fatemzh.github.io/newsletter-signup-form)

## My Process

### Built With

- Semantic HTML5 markup

- CSS custom properties

- Flexbox

- Mobile-first workflow

- Vanilla JavaScript

### What I Learned

In this project, I deepened my understanding of form validation and handling user interactions to display appropriate feedback messages.

### Continued Development

Moving forward, I plan to:

- Further enhance form validation techniques

- Optimize responsive design across different devices

- Work faster by developing better habits