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 with succcess message using CSS Flex, JavaScript

P

@Antonvasilache

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?

  • I did the responsive part without over relying on breakpoints
  • I have added the svg tags directly into the index, which I would not do again, easier to handle with an img tag import, in this instance

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

  • Making the layout responsive at small screen sizes. I did it by changing the padding and gaps via breakpoints.
  • Stopping svg images from resizing on small screens. Fixed by changing the svg tags with img imports.

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

Using width and max/min-width more effectively in responsive design.

Community feedback

Mouwvfic 210

@mouwaficbdr

Posted

Well done on this! I recommend adding additional styles for the 750px - 450px width breakpoint to address the issues. Also, consider adding some border-radius to the card in the mobile version.

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