P
@HelewudSubmitted about 1 month ago
P
Suraj Khatri
@SurajCaseyAll comments
- P@SurajCaseyPosted 10 days ago
You've done a great job with the design! The overall layout looks clean and the code is readable and well-structured, which is great to see. I appreciate that the code isn't overly complex—it's straightforward and easy to follow, just like I have done in some of my own work.
However, one thing I noticed is that the tablet design could use a little more attention to match the design guidelines. The responsiveness is there, but the layout could be further refined on tablet-sized screens to ensure everything looks polished. Additionally, I noticed that the percentage for the discount was missing in the implementation. This is a small detail but important for the complete experience.
Overall, your solution is solid, and with a few tweaks for tablet design and including the discount percentage, it will be spot on. Keep up the good work!
0 - @codi-AndreSubmitted 17 days agoP@SurajCaseyPosted 14 days ago
Accessibility is decent but needs improvements in ARIA attributes, focus management, and color contrast. The layout is responsive and looks good on both mobile and desktop, closely matching the design. The code is well-structured and readable, but reusability can be improved by reintroducing sub-components and moving data to a separate file. The solution closely matches the design, with minor adjustments needed for font sizes, spacing, and the MainContent height.
1 - @codi-AndreSubmitted 20 days ago
- @Stephanie0905Submitted 29 days agoP@SurajCaseyPosted 27 days ago
Good use of <main>, <header>, and <div> for structure. The <header> includes different images for mobile and desktop using .img__container-mobile and .img__container-desktop. This is a great responsive design approach. Use <button> instead of <div> for better keyboard navigation and screen reader support. Use buttons instead of divs for FAQ toggling. Improve accessibility by adding aria-expanded and using hidden. Optimize JavaScript to close other open FAQs when clicking a new one. Simplify HTML structure by removing unnecessary wrapper divs.
0 - P@jonatan-samuelssonSubmitted about 1 month agoWhat are you most proud of, and what would you do differently next time?
Though it wasn't part of the challenge as such, since the challenge appeared in the accessibilty learning path, I decided to read up a little on accessibility and to implement some of what I found. This led me to pay some attention to both the cloe-button on the thank you section, which got an ARIA-label to let screen readers know what it's for, and the rating radio buttons, for which I ended up slightly adjusting my design solution to accomodate a better focus-state highlight.
What challenges did you encounter, and how did you overcome them?Not that challenging overall, but I am keen to learn more accessibility techniques now, as I feel I am starting to see some of the little tweaks that go very far. Also, on a side note, I realized I need to brush up on my formData management skills in JS.
- P@firatyedibelaSubmitted about 1 month agoP@SurajCaseyPosted about 1 month ago
You have done a wonderful job with your design and it looks cool. Codes are well structured and redeable. It looks cool on different screen sizes. Keep it up bro!
1 - P@k2pbacSubmitted 10 months agoP@SurajCaseyPosted 4 months ago
You have done a great job. Your code matches perfectly to the design. Codes are accessible and the layout matches to the screen sizes except for the mobile devices. You could add media queries to for the mobile devices. Overall it is perfect.
0 - P@jasper2virtualSubmitted 5 months agoP@SurajCaseyPosted 4 months ago
solution looks amazing. it is accessible and layout looks good on different range of screen . You could have made it look better in the mid size screen by shrinking the design with the desktop design. You can add hover effect for the Reset button. Also for the reset button it matches the same color of the background so it looks hidden. if you add gap between tip amount and total it will look good. overall, you have done fantastic job. Keep it up !
Marked as helpful1 - @bMeenSubmitted 10 months agoP@SurajCaseyPosted 5 months ago
Your solution looks so good. If only you could position the footer at the bottom of the page it will better. The codes are readable, well structured and reusable. It looks good on the mobile and desktop view. You could add more media queries so that it will look good on the tablet or medium sized screen view.
Marked as helpful0 - @arthuvinciSubmitted 5 months agoP@SurajCaseyPosted 5 months ago
Your solution looks so good. Only thing is you could have set the width and height properties to match exactly with the design. Codes are all readable and the layout looks good on different screen sized. You have done a great job with the codes and it looks amazing. Keep it up!
0 - @Rakshitha971Submitted 8 months agoP@SurajCaseyPosted 5 months ago
Your solution looks so good. Especially, in the mobile screen it matches perfectly. The codes are well-structrued and readable. The only thing that you could do is use flexbox to make the content be in the middle of the screen, you could do the following: body { background-color: #ecf2f8; height: 100vh; display: flex; justify-content: center; align-items: center; } The whole container will appear in the middle of the screeen and will look perfect.
0 - P@loiccapeSubmitted 6 months agoWhat are you most proud of, and what would you do differently next time?
I realy improve on the way i use grid and flex box !! I use less usless than i used before.
P@SurajCaseyPosted 6 months agoYour solution looks good. It also has a lot of room for improvement. The codes looks redeable. It is responsive for the most screen sizes. There is seperate hero image and footer image for the mobile screen which you could have used. You could make vertical line in page number by using this html and css.
<div class="vertical-line"></div> .vertical-line{ width: 1px; height: 80px; background-color: hsl(240, 18%, 85%); } Overall, looks good. Goodluck!Marked as helpful0 - @Shaharyar16Submitted 6 months agoP@SurajCaseyPosted 6 months ago
Your solution looks amazing. Codes are well structured and readable. Also, the solution matches the design, But, there are few improvements that could be done. They are: You could include <main> </main> to make it more accessible after the body tag. You could add the backgroud color:hsl(210, 46%, 95%); to make it more similar to design.
Marked as helpful1 - @GiorgiBebiaSubmitted 7 months agoP@SurajCaseyPosted 6 months ago
The solution matches well with the design. It is accessible and the page is responsive to the mobile and desktop screen but for the the contents overflows for the screen sizes in between mobile and desktop. You have done well with the box shadows. The codes looks readable. As the font family is same for whole page you could use it in the body section so that you do not have to use it again.
0 - @elijahraphael5Submitted 6 months agoWhat are you most proud of, and what would you do differently next time?
that i didnt skip i took the challenge and i was able to finish it up
What challenges did you encounter, and how did you overcome them?button and object fit
What specific areas of your project would you like help with?nothing it challenging enough
P@SurajCaseyPosted 6 months agoWell done, But the web page is not responsive to small screen sizes. Try using grid method instead of flexbox. There is seperate images provided for the mobile and desktop screens which you can add to use it accordingly.The codes are readable. Keep it up!
Marked as helpful0 - @AmirmfthSubmitted 6 months agoWhat are you most proud of, and what would you do differently next time?
I'm happy that I was able to make this site responsive to smaller screens, and I would prefer to use sass in my next projects.
- @kalebbirhanuSubmitted 6 months ago
- @DanielOmeheSubmitted 7 months ago
