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
- @MattPahutaPosted 5 months ago
- 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 helpful0
Please log in to post a comment
Log in with GitHub
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