Design comparison
Solution retrospective
I'm still practicing JavaScript, so any suggestions on how my code could be improved is appreciated. At first, I made my submit button type="submit"
, but since the default behavior makes the page reload, I changed it to type="button"
. Would preventing the default behavior work well here or should that be avoided?
Community feedback
- @HamzaouladevPosted over 1 year ago
hello @sianidan, great job finishing this project!
i have some suggestions that you may find interesting:
the styling of your component looks great, however it may break if the content inside were to change, the reason is that fixed heights make the components prone to overflowing issues.
my suggestion is to remove the height from the container, and to manage spacing you can add the gap property to your flex parent:
.card { gap: 2rem; }
i hope you find my suggestions helpful, Happy Hacking
Marked as helpful1 - @alleycaaatPosted over 1 year ago
Great job on your project! Your code looks great, clean and tidy. The person who already commented has good input, having a set height for
.container
could be problematic, especially when you think about folks viewing your project on a mobile device. Some of them have small screens :) I like to view my projects in Developer Tools (ctrl+shift+i in Chrome) to see the various screen sizes and how it impacts my design.For the submit question, using
button type=submit
will submit the form data to the server when the user clicks the button (unless there's JS to say otherwise), andtype=button
doesn't have a default behaviour. In this case, since the data isn't actually going anywhere/being collected, I think you're safe withtype=button
.1
Please log in to post a comment
Log in with GitHubJoin 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