Skip to content
Submitted 4 months ago

Responsive NewsLetter SignUp Page With Success Message

Mohammed Rashafi•190
@RASHAFi00
A solution to the Newsletter sign-up form with success message challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

I stopped uploading to frontend mentor for a couple of months due to some important stuff, and when I'm Back... I was able to complete the task to the fullest with the least time possible! surprisingly! My Hands still remember the way I used to complete tasks for frontend mentor, and that means I did learn the right way that made me never forget

What challenges did you encounter, and how did you overcome them?

A bit of hard time finding a way to check a valid email without regex, but i did it in the end

What specific areas of your project would you like help with?

Any Piece of Advice is Definitly Helpful

Code
Couldn’t fetch repository

Please log in to post a comment

Log in

Community feedback

  • Andrey•4,710
    @dar-ju

    Hi, Mohammed Rashafi!

    Great job! Email verification works correctly, the layout is close to the original.

    I'll add a few comments and what can be fixed:

    • look at the layout in screen resolutions from 770px to 1020px. The image goes beyond the block.
    • with minimum screen resolutions of 320-375px the image is too narrow in height, in the layout it is larger.
    • need to fix several html errors. The input attribute name="" should not be empty. There should be no more than one <main> tag on one page as well as <h1>. If the <section> tag does not have a heading, it is better to use <div>.
    • try not to use !important in css. !important is usually used in extreme cases, for example, if you do not have access to the css file, but you have access to the html or other options. In your case, you have full access and all styles can be reassigned without using !important
    • in js var is already a bit outdated, use const and let. In your case, the form is const, the rest is let. Difference info here
    • the "Thanks for subscribing!" window is not centered on the screen. I see that the form window is in the way. When the thanks window appears, make the form window display: none;

    Everything else is fine, good luck with your development!

    Marked as helpful
  • Marzia Jalili•9,670
    @MarziaJalili

    Amazing Job, man! 👏

    A tiny suggestion:

    • For large screens, consider setting the font-size of the buttons to some larger number. The same goes with the <input /> element.

    • I'm kinda planning to create a study group on Google Chats, let me know if you're interested to be added there. Let's beat Elon Musk together.

    😎😎😎

    Marked as helpful
  • Sham•150
    @JOYBOi3D2Y

    Amazing work!!

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord