@MARYAMTEE
P
CoderAlchemy24
@CoderAlchemy24All comments
- P@CoderAlchemy24
Success! The keyboard event is working well!
- @MARYAMTEEWhat are you most proud of, and what would you do differently next time?
I built an interactive rating component where users select a rating from 1 to 5 and see a success message after submitting.
P@CoderAlchemy24I like it
- P@Ashmit-kansalWhat specific areas of your project would you like help with?
Any help would be appreciable, tell me if I have done something wrong or something can be improved.
P@CoderAlchemy24Congratulations! Great work!
- P@johnnygerardP@CoderAlchemy24
Nice work!
- P@imvan2P@CoderAlchemy24
Good!
It's working and nice!
- @MARYAMTEEP@CoderAlchemy24
Nice work!
Some notes:
-
units: Using rem and em is preferable to px.
-
the breakpoints in @media-queries are not continuous, there is a break between 1030 and 1137 pixels, and the layouts do not appear in parallel with the screen size change.
-
- P@joeabrahamianWhat are you most proud of, and what would you do differently next time?
Adding and removing classes with the form event listener. Making it transition between the start and a success screen.
What challenges did you encounter, and how did you overcome them?Yes
What specific areas of your project would you like help with?More practice on media queries and client side validation.
P@CoderAlchemy24Hi @joeabrahamian,
Please consider my feedback to your 'newsletter-sign-up-form-with-success' solution:
-
First, the main view in desktop size looks good.
-
However the '#success' and '.success-info' need some 'white space' corrections, especially in smaller sizes.
You can solve this with smaller 'margin', 'padding' and 'gap' and you can position the parts with 'flex', 'justify-content' and 'align-items'
- The next problem is that the error message is displayed for too short a time, only while the button is pressed.
You can see my solution on github: https://github.com/CoderAlchemy24/frm-newsletter-sign-up.git, I solved this problem with an 'input' eventhandler on the input field.
- Also, the main image position and width need some correction, you can solve this with fix width sizes. Good luck!
@coderAlchemy24
-
- @jonathasltavaresP@CoderAlchemy24
Perfect!
- P@Oleksandr5768965P@CoderAlchemy24
Your work looks good.
However on mobile screens the header text content is hardly to read. You can use smaller font-sizes there.
- P@CristianAlexaP@CoderAlchemy24
Nice work!
- @Aniket365-TechP@CoderAlchemy24
I see here an unfinished solution, with missing details.
Missing details:
- cards: border-radius,
- cards-margins: not equal the vertical and horizontal margins,
- card-padding: less than the margins
- @saba-tandashviliP@CoderAlchemy24
It seems good solution, nice work!
Maybe you will optimalize it for mobile screens later.
- @Odavid66What are you most proud of, and what would you do differently next time?
Nothing, I would like to try what is suggested to me
What challenges did you encounter, and how did you overcome them?a lot, especially the box shadow that has different effects across different widths, also the sizing of the main box.
What specific areas of your project would you like help with?dont really know
P@CoderAlchemy24Good work
- P@monicaivanovWhat are you most proud of, and what would you do differently next time?
I am proud I kept my goals from my previous project: to continue practicing sematic HTML and build the project mobile first. Next time I want to start adding personal touches.
What challenges did you encounter, and how did you overcome them?To ensure visitors can navigate the links only using their keyboard. I didnt manage to accomplish this
What specific areas of your project would you like help with?Any suggestion for improvement is highly welcomed.
P@CoderAlchemy24Hi Monica,
I like your solution, good work!
@coderalchemy24
- @hectorelcapitanP@CoderAlchemy24
Hi @hectorelcapitan!
It seems a perfect work.
However you missed the card's box-shadow. You can drop a shadow the following way: box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
Good luck!
- @lh62863P@CoderAlchemy24
Good work!
Only the scale-ratio a little differ in the solution and on the design.
