Skip to content
Submitted over 1 year ago

Newsletter sign-up form with success message using BEM CSS

Leonard•1,025
@leoikeh99
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

This was my first time using bem css, wanted to start using this because I thought it made working with CSS cleaner and a little bit easier and it definitely was. Also tried to write better accessibility so please give me feedback on accessibility issues and also any feedback on CSS best practices.

Community feedback

  • Grace•31,270
    @grace-snowPosted over 1 year ago

    This is pretty good but there are some accessibility issues

    1. the error should not be in a label. It should be in a paragraph and have an aria-live attribute on it and a unique ID
    2. the error should not be display none by default. Aria-live elements should be present in the dom at all times so the browser knows to watch them for changes. Instead the error element should be present just with no content inside
    3. To programmatically link the error and input, use aria-desciribedby on the input pointing to the error element's ID
    4. clamped font sizes must not use viewport units for the middle font size. Instead you must use calc to transform those viewport units into rem. This is extremely important as at the moment this is ignoring users font size settings

    Other than that all this looks good previewing on mobile

    Marked as helpful
    0
    Leonard•1,025
    @leoikeh99Posted over 1 year ago

    @grace-snow thanks, will work on these

    0
  • Karol Binkowski•1,640
    @GrzywNPosted over 1 year ago

    Great job!

    I would suggest querying all the elements first and then passing them as function parameters. Then you can use the same elements and it is not necessary to query them again. This is generally considered a good practice.

    It is also better to avoid complicated regular expressions, as they almost always do not work as intended. I would suggest using one of the popular npm libraries in this case.

    Keep coding and have a nice day!

    1
  • Mandriva 19•330
    @mandriva19Posted over 1 year ago

    hello, the project is very well made. I like the fact that you are aware of accessibility features and used BEM in your CSS. I want to implement it in my future projects aswell. CSS is well written and name convention also in HTML looks nice. learned a lot from your code! thanks. keep up! <3

    one little detail tho: there is no error message popping up when user enters invalid email :P

    1

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