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.
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
- Solution URL: Repo
- Live Site URL: https://github.com/Deeokafor/fm-newsletter-sign-up-with-success-message-main
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Mobile-first workflow
- Tailwindcss - css utility-first framework
- ES6 (Javascript version 2015)
- I had to refresh my memory on how html & css file paths worked. I had to learn that using relative paths is more production friendly than absolute paths... a change in directory could cause paths to fail.
Henceforth, I am focusing on writing UI's which pass accessibilty tests and Semantic-ui's.
-
Tailwindcss Docs - having to refer to the detailed docs here when in a tight spot was so helpful.
-
w3schools - At some point in the project, I was stumped with properly aligning the elements for the
mobile-success-screenbut a little bit of practise onalign-selfrules in css, here, helped me to overcame that challenge in Tailwindcss.
- Website - Okafor-udah Divine Chukwunwemmeri
- Frontend Mentor - @Deeokafor
- Twitter - @dee_okafor
- I am thankful to Google Search :).