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

HTML | CSS | JavaScript

@drod109

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

Solution retrospective


I enjoyed this project and I will have some refactoring to do.

All feedback is welcomed.

Community feedback

@MelvinAguilar

Posted

Hello there 👋. Good job on completing the challenge !

I have some suggestions about your code that might interest you.

  • You should use the cursor: pointer property to indicate that the element like a button or a link is clickable.
  • Instead of having two divs with the class "author," you should have used only one but placed it at the end of the document so that it always remains at the bottom, regardless of the screen being displayed. You should also use a <footer> tag.
  • The button should be inside the form, not outside.

I hope you find it useful! 😄

Happy coding!

Marked as helpful

1

@drod109

Posted

@MelvinAguilar, thank you for the feedback and I have update my code to include the cursor: pointer.

As far as .author class I don't know if you noticed that I used the role="contentinfo" as a replacement for the footer element. The reason for that decision is because as you can tell I need to call and hide the .author class element. Any thoughts on a more efficient way to to complete that?

0

@MelvinAguilar

Posted

@drod109 Hi again !

author1 and author2 have exactly the same information. What I mean is that you should use that element only once and have it at the bottom of your file:

<main class="newsl-wrapper">...</main>
<section id="success-wrapper">...</section>

/* Use it only once, and it will be the same footer every time. */
<footer class="author">...</footer>

Also, the <footer> explicitly has the role of contentinfo. It's the same, but using the <footer> tag is more recent way than using the role.

This way, you avoid using JavaScript to hide/show it.

Marked as helpful

1

@drod109

Posted

@MelvinAguilar ah ok I see what you mean and I have updated my code to reflect your suggested update and it is much cleaner.

Thank you!!

0

@Obed67

Posted

Joli design j'aime votre travail

1

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