Skip to content
Submitted 11 months ago

Newsletter sign-up built with Astro, Zod, and Tailwind CSS

astro, tailwind-css, zod
SmartAce•390
@Smart-Ace-Designs
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?

Using Astro Actions and Zod for the form validation. I would try to use a Vue component, as an Astro Island, the next time.

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

I wanted to use a separate Astro component as the success message, but could not find a way to show/hide it dynamically. I ended up having to scrap that idea and place the HTML for the message within the index file and use JavaScript to hide/display it.

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

I used margin to place the button in the success message at the bottom. It seems to me that there should be a better way to do this instead of using a huge margin value that I eye-balled to get right. Should I be able to use something like grid or flex to automatically position it at the bottom?

Code

Please log in to post a comment

Log in

Community feedback

  • haquanq•1,555
    @haquanq

    Hello Smart Ace 👋

    About your solution:

    • The margin for the button (success message) is not huge (to me it's small), it's ok.
    • Each page must only have one h1 to give it a title of the entire content of the page. For success message you should use h2 instead (remember when using headings don't skip any level as it's break the flow of the content and confuse users).
    • The items with checked icons is considered an unordered list in many ways (padding on the left, same icons, talking about the same thing which is what the newsletter offers), you can use ul, li to structure it (sometimes when a list have number the indicate the index - ordered list then use ol, li instead).
    <ul>
    <li>...item content...</li>
</ul>

    Have a nice day and happy coding! 😁😁

    Marked as helpful

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