P
@MathiasHun1
Mahmud1Available
@Mahmud1AvailableAll comments
- @Mahmud1Available
its a nice one but u didnt do the light box
- @Sir-josh01What challenges did you encounter, and how did you overcome them?
-Making the websites responsive -Making the functionality (error-messages) to show.
@Mahmud1Availablenice one but pls try to reduce the width of the form .in your js try using form.submit so that the information can be stored in your local storage
Marked as helpful - @saimasial-bitWhat are you most proud of, and what would you do differently next time?
I’m most proud of achieving a pixel-perfect design, ensuring correct layout, colors, and spacing. The code is well-structured and follows best practices. I also focused on responsive styling to make it mobile-friendly. Next time, I would improve accessibility with better contrast and ARIA labels. I’d also add subtle animations for better user engagement. Lastly, I’d optimize print styles for a cleaner printed version.
What challenges did you encounter, and how did you overcome them?One of the challenges I faced was aligning the elements perfectly according to the design. Initially, some sections were not positioned correctly, but I resolved this by carefully adjusting margins, paddings, and using flexbox. Another challenge was ensuring that the text and images were responsive. I overcame this by using relative units like percentages and rem instead of fixed pixel values.
What specific areas of your project would you like help with?This project helped me strengthen my CSS skills, especially in layout techniques like grid and flexbox. I also learned the importance of attention to detail when recreating a design. Additionally, I realized how crucial it is to test the design on different screen sizes to ensure responsiveness.
@Mahmud1Available"Great job on the solution! The layout looks clean and responsive. However, I noticed that you haven't used semantic HTML elements like <figcaption> and <figure>. Adding them would improve accessibility and readability. Also, on smaller screens, the text alignment looks slightly off. Adjusting the padding/margins might help. Keep up the great work!".and u should improve better on the css like in the confirn order u should remove those dot in ul by using list-style:none; in the css.
Marked as helpful - @saimasial-bitWhat are you most proud of, and what would you do differently next time?
I’m most proud of achieving a pixel-perfect design, ensuring correct layout, colors, and spacing. The code is well-structured and follows best practices. I also focused on responsive styling to make it mobile-friendly. Next time, I would improve accessibility with better contrast and ARIA labels. I’d also add subtle animations for better user engagement. Lastly, I’d optimize print styles for a cleaner printed version.
What challenges did you encounter, and how did you overcome them?One of the challenges I faced was aligning the elements perfectly according to the design. Initially, some sections were not positioned correctly, but I resolved this by carefully adjusting margins, paddings, and using flexbox. Another challenge was ensuring that the text and images were responsive. I overcame this by using relative units like percentages and rem instead of fixed pixel values.
What specific areas of your project would you like help with?This project helped me strengthen my CSS skills, especially in layout techniques like grid and flexbox. I also learned the importance of attention to detail when recreating a design. Additionally, I realized how crucial it is to test the design on different screen sizes to ensure responsiveness.
@Mahmud1Available"Great job on the solution! The layout looks clean and responsive. However, I noticed that you haven't used semantic HTML elements like <figcaption> and <figure>. Adding them would improve accessibility and readability. Also, on smaller screens, the text alignment looks slightly off. Adjusting the padding/margins might help. Keep up the great work!".and u should improve better on the css like in the confirn order u should remove those dot in ul by using list-style:none; in the css.
Marked as helpful - @Simr-coderWhat specific areas of your project would you like help with?
To highlight number with routing I used location.pathname but I need some better approach
@Mahmud1AvailableI love it great effort, lovely design🎉🎉
In terms of key areas for improvement:
avoid setting: outline: none; i understand this can be tempting to do this, as the default outline usually looks ugly, but it can cause accessibility problems for users that make use of accessibility features. Outline is an important part of the accessibility tree to help users navigate and see selected areas of the form
while this can be overcome with other ways of styling, as you have done here, but it is still recommended to keep the outline. perhaps as an alternative, you could style the outline as needed instead of adding an additional boarder
make use of <main> element to place the content into the main block
this makes it easier to control layout and page size as demonstrated in this code:
<main> // Html or react codes in between </main>html, body{ height: 100%; }
main{ min-height: 100%; }
Marked as helpful - P@de-furkan@Mahmud1Available
Nice job, however, you should consider all details in the design such as borders, opacity, and sizing. Remember these are critical and does make a difference. And I also love what u did for the background and the translation nice one. and also how is it that with one solution u got 145 points
Marked as helpful - P@kindlypi8MCeN7What are you most proud of, and what would you do differently next time?
Nothing in particular.
What challenges did you encounter, and how did you overcome them?Nothing in particular.
What specific areas of your project would you like help with?Nothing in particular.
@Mahmud1AvailableImprove HTML5 semantics. You could change <main> to <article>, for carts use <section>, in <section> use <header> and others <section>.<figure> and <figcaption>.and i like the way u used the box shadow.
Marked as helpful - @zahraabellu@Mahmud1Available
Right now, the API call only runs when the button is clicked. To fetch data on page load too, just call the function inside a load event. and your width shuld be static and not be changing
- @Mahmud1Available@Mahmud1Available
please help me correct me on my html
- @asia272@Mahmud1Available
Great job! 👏 I really appreciate your project—it's excellent! You’ve done an amazing job with the implementation, but I have a small suggestion. Adding a border-radius to your .card-status would help it match the requirements better and improve the overall design consistency. This small tweak will enhance the visual appeal of your project. Keep up the great work! 🚀
- @Mahmud1Available@Mahmud1Available
pleas i need help on my css with the accent color ofmy radio i gave it yellow but it is showing yellow and black
- @PastelMeow@Mahmud1Available
Nice job, however you should consider all details in the design such as borders, opacity and sizing. Remember these are critical and does make a difference.
