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

Newsletter sign-up form with success message

P

@Temceo

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


What are you most proud of, and what would you do differently next time?

Being able to combine the use of html, css and javascript.

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

My main challenge was in hiding / showing appropriate elements in the different states of the application. I overcame the challenges by experimenting with grid, css and javascript.

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

Feedback on semantic css, and any potential improvements to make the code more efficient.

Community feedback

P

@MattPahuta

Posted

  • Nice use of flexbox and Grid to match the design comp
  • Good use of semantic elements here (form, ul, etc.)
  • The JavaScript looks great
  • Media queries should be set in rem/em, not px. Here's a good resource
  • I'd consider putting this image in the HTML. Background images are less performant and it's bad practice to have empty divs/elements in the HTML. This particular image is a good use case for the picture element
  • Also with the image: use max-widths instead of hard-coded widths. You shouldn't need to set a specific height property for anything in this challenge either. In general, setting heights like this should be avoided.
  • The email on the confirmation page is not being dynamically applied. You've got solid JavaScript code already, it should be straightforward for you to drop an ID on that span and populate the email received via the form.
  • The cursor for button hover states should be a pointer
  • All in all, very nice work. Cheers!

Marked as helpful

0
Caelus 520

@Caelus111

Posted

Your code is Good! keep going!

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