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

Schismondโ€ข 160

@Schismond

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


this is the last time I use figma to try and get the right sizes , well I get it 99% accurate but I'm tired of all this pixel declarations I believe it's not the right way to do things , please comment your opinion

Community feedback

P
ApplePieGiraffeโ€ข 30,545

@ApplePieGiraffe

Posted

Hey there, Schismond! ๐Ÿ‘‹

Nice effort on this challenge! ๐Ÿ‘

A few suggestions I have are,

  • Taking another look at the responsiveness of your site. At the moment, things start to look a little broken/get cut off around ~1000px as the screen width decreases. Remember that even if the desktop and/or mobile views of your site look good, it is important to make sure that your site looks great across all screen sizes so that as many people as possible can enjoy your work. If youโ€™d like to learn more about how building responsive layouts, check out this helpful course
  • Avoiding using px for setting the values of things like font-size and spacings in your styles. Instead, use a responsive unit such as em or rem so that users will be able to change the size of the text (and ideally, overall layout) of your site by changing the default font-size of their browser. If you'd like to learn more about those units in CSS and how all of this works, check out this helpful video

Don't worry too much about making "pixel-perfect" solutionsโ€”it's more important to focus on things like accessibility and responsiveness so that people can use and enjoy the websites you make ๐Ÿ˜‰ As long as your solution looks more or less like the design in the end and it is functional and accessible, that's great ๐Ÿ‘

Hope you find these suggestions helpful. ๐Ÿ˜Š

Keep coding (and happy coding, too)! ๐Ÿ˜

Marked as helpful

2

Schismondโ€ข 160

@Schismond

Posted

@ApplePieGiraffe thanks for your comment this was really helpful, I really needed someone to clarify things for me , I will take a look on the resources you included

Thanks again for your comment I really appreciate it , have a good day

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