Skip to content
Submitted 7 months ago

Frontend Mentor - Newsletter sign-up form - TailwindCSS - Javascript

SMHN•200
@smhnfreelancer
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?
  1. I used Tailwind CSS and advanced features like safelist in the Tailwind.
  2. I implemented the Javascript part easily.
What challenges did you encounter, and how did you overcome them?
  1. Some classes in the Tailwind features were not rendered, because they are not available on the HTML, but you can use advanced features like safelist.
  2. I used Tailwind CSS component features too.
What specific areas of your project would you like help with?

I like to write clean code, fast easy and I made lots of ID selectors, may be there is a more efficient way than making a whole bunch of ID selectors.

Community feedback

  • mofada•340
    @mofadaPosted 4 months ago

    The HTML code you provided already has a good structure and semantics, but there are still some areas that can be optimized:

    1. Semantic tags: Consider replacing some div tags with more semantic tags, such as header, section, article, etc., to improve readability and accessibility.
    2. Optimize the alt attribute of images: Currently, the alt attribute of the img tag is empty, which is not conducive to SEO and barrier-free access. It is recommended to provide descriptive text for each image.
    3. Reduce duplicate code: The use of lg:hidden and lg:flex on image tags may cause unnecessary repeated rendering, so consider unified management.
    4. Optimize style class names: For some style class names, such as UL and UL__item, you can consider more descriptive names to express the purpose more clearly.
    5. Icon optimization: The favicon icon can consider adding different size versions to meet the needs of different devices.
    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