Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lia-oliveira/newsletter-signup-form
This is a solution to the Newsletter sign-up form with success message challenge on Frontend Mentor
https://github.com/lia-oliveira/newsletter-signup-form
css css3 cssflexbox development front-end frontend frontend-mentor html html5 javascript js
Last synced: about 2 months ago
JSON representation
This is a solution to the Newsletter sign-up form with success message challenge on Frontend Mentor
- Host: GitHub
- URL: https://github.com/lia-oliveira/newsletter-signup-form
- Owner: lia-oliveira
- Created: 2024-12-23T23:46:15.000Z (about 2 months ago)
- Default Branch: main
- Last Pushed: 2024-12-25T12:11:05.000Z (about 2 months ago)
- Last Synced: 2024-12-25T13:22:14.187Z (about 2 months ago)
- Topics: css, css3, cssflexbox, development, front-end, frontend, frontend-mentor, html, html5, javascript, js
- Language: CSS
- Homepage:
- Size: 11.7 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Frontend Mentor - Newsletter sign-up form with success message solution
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). Frontend Mentor challenges help you improve your coding skills by building realistic projects.
## Table of contents
- [Frontend Mentor - Newsletter sign-up form with success message solution](#frontend-mentor---newsletter-sign-up-form-with-success-message-solution)
- [Table of contents](#table-of-contents)
- [Overview](#overview)
- [The challenge](#the-challenge)
- [Screenshot](#screenshot)
- [Links](#links)
- [My process](#my-process)
- [Built with](#built-with)
- [What I learned](#what-i-learned)
- [Continued development](#continued-development)
- [Useful resources](#useful-resources)
- [Author](#author)
## Overview
### 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
### Screenshot
Desktop / Tablet:
👩🏼💻 Work in progress
Mobile:
👩🏼💻 Work in progress
### Links
- Solution URL: [Newsletter sign-up form](https://github.com/lia-oliveira/newsletter-signup-form)
- Live Site URL: [soon](https://your-live-site-url.com)
## My process
1. Analyze the designs to identify the necessary resources for the project.
2. Download/import the required assets.
3. Organize assets into folders.
4. Define variables for colors and fonts.
5. Write the HTML markup.
6. Write the global styles
7. Style the page, typically using a mobile-first workflow
### Built with
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
### What I learned
👩🏼💻 Work in progress
1. Use an image as a list marker.
```css
ul {
list-style-image: url('image.png');
}
```
1.
### Continued development
👩🏼💻 Work in progress
### Useful resources
- [SVG Viwer for Windows Explorer](https://github.com/tibold/svg-explorer-extension) - Useful for viewing .svg files in Windows Explorer.
- [CSS list-style-image Property](https://www.w3schools.com/cssref/pr_list-style-image.php) -
Use an image as a list marker.
- [list-style](https://developer.mozilla.org/en-US/docs/Web/CSS/list-style) - Safari lists and put list-style image inside of container.
- [ARIA Landmarks Example](https://www.w3.org/WAI/ARIA/apg/patterns/landmarks/examples/HTML5.html) -
## Author
- Website - [Github](https://github.com/lia-oliveira)
- Frontend Mentor - [@lia-oliveira](https://www.frontendmentor.io/profile/lia-oliveira)
- Twitter - [@byliaoliveira](https://x.com/byliaoliveira)