Submitted 3 months ago

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

SmartAce• 170

@Smart-Ace-Designs

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Newsletter sign-up form with success message

HTML
CSS
JS

2junior

View challenge

Design comparison

SolutionDesign

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?

Community feedback

haquanq ®️• 1,585

@haquanq

Posted 3 months ago

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

SmartAce• 170

@Smart-Ace-Designs

Posted 3 months ago

@haquanq - thank you for the suggestions. I noticed a few other solutions also used the ul, li with the checked items after I completed the solution and figured that was probably the better way. Thank you for confirming that. I will update my solution per your suggestions.

Please log in to post a comment

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