Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive Newsletter Signup page

@Litheesh-kumar

Desktop design screenshot for the Newsletter sign-up form with success message coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Community feedback

Grego 1,310

@Grego14

Posted

👋 Hello! 🎉 congratulations on completing the challenge! 🎉

Remember that you should not skip headings, you should use a h1 before using a h2, for example you could use a h1 in the text of .container__title.

In the .container__message text you can use a p element, remember not to use the div element for everything!

I recommend that you read about the 👉 vertical-align property since it will help you a lot to style elements like when they are not block elements.

If the element is an icon, has no semantic meaning or is just for decoration you can leave the alt attribute empty.

Adds the aria-hidden attribute to icons. To prevent them from being displayed in the accessibility tree.

I hope this helps! 😁

Marked as helpful

0

@Litheesh-kumar

Posted

@Grego14 👋 Hello! Thank you for the congratulations and the valuable feedback! 🎉 I appreciate your guidance on using headings properly and incorporating semantic elements like <p> instead of <div> where appropriate. I'll definitely look into the vertical-align property for better styling control, and I'll ensure to add the aria-hidden attribute to icons for accessibility. Your advice is incredibly helpful! 😁

0
P

@MitaliShah

Posted

@Litheesh-kumar

  • Great job on completing this project!

    • Here are some suggestions:
      • Instead of using li::before for adding orange tick marks to the <li>, you can use svg as a value for list-style-type. Check out this article from MDN

      • I noticed that your image is not displayed on the mobile layout. For responsive images, look into this mdn article about <picture>: The Picture element so that mobile and desktop images can change based on which viewport it is.

  • Hope this helps you! Happy coding!

Marked as helpful

0

@Litheesh-kumar

Posted

@MitaliShah Thanks for the feedback and suggestions! Using SVG for list-style-type sounds like a neat alternative, and I'll definitely check out the MDN article you mentioned for more details. I've corrected the path to the image in the mobile layout, so it should display properly now. Your keen eye for detail is much appreciated. Happy coding! ✨👍

0

Please log in to post a comment

Log in with GitHub
Discord logo

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