Skip to content
Submitted 7 months ago

Flexbox & JS Mobile First Newsletter Sign-Up

Oswaldo Castro•240
@tufcoder
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Newsletter sign-up form with success message
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

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

In this project I tried to do some different things, such as using font-face in the css, avoiding Google Fonts and also using nested styles.

I felt good about creating error validation for my form.

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

I had a little trouble finding a regex to validate the email. Then I saw that I did the structure of my main container wrong, I had to make a compromise to separate the section in the desktop version. I create a class tks and adjust the size of the container in the success message.

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

I felt that my css is not very organized.

Community feedback

  • Levis Kim•1,200
    @Orekihotarou-kPosted 7 months ago

    Hey @tufcoder. Great work you did there. I'm really digging that validation, I love how you handled it.

    Here's one thing I think you can do to make your work even better. Consider changing the min-width in your media-query to about 55rem. The reason behind this is that, on screens smaller than 1440px (small laptops and tablets), what would be presented to them is the mobile view of the site. I noticed this because my screen width is less than 1440px.

    Other than what I've mentioned above, I think your work is great. Keep up the wonderful work.

    Happy coding✨

    Marked as helpful
    0
    Oswaldo Castro•240
    @tufcoderPosted 7 months ago

    @Orekihotarou-k Thank you very much for the tip, you were very kind!

    0
    Levis Kim•1,200
    @Orekihotarou-kPosted 7 months ago

    You're welcome @tufcoder. I'm happy to help☺️

    0
  • Levis Kim•1,200
    @Orekihotarou-kPosted 7 months ago

    Hey @tufcoder. Great work you did there. I'm really digging that validation, I love how you handled it.

    Here's one thing I think you can do to make your work even better. Consider changing the min-width in your media-query to about 55rem. The reason behind this is that, on screens smaller than 1440px (small laptops and tablets), what would be presented to them is the mobile view of the site. I noticed this because my screen width is less than 1440px.

    Other than what I've mentioned above, I think your work is great. Keep up the wonderful work.

    Happy coding✨

    0

Please log in to post a comment

Log in with GitHub

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