Feel free to look through my code, and let me know of anything I can do better or ways that I can make it more reusable. Feedback is always welcomed :)
What helpful tips did you use for this project?
Like always any helpful feedback or words of wisdom is welcomed! :)
Project file structure, Structuring the Javascript file in itself or any other tips even if its not API related. Like I always say, pointers, tips, tricks or feedback is always welcomed :)
tried oop and be minimalistic. next time i would definitly do it with object , spread it and just change the new values to it like new tip in % or new bill or people so that i have consistant flow of data and 1 source of truth
What challenges did you encounter, and how did you overcome them?OOP in javascript is still a pain :-D try and error . now i get it why ppl love typescript in oop
With the exception of a few needed styling tweaks, you did great. The code works, well-structured is readable, and it adapts well to all screen ranges. Overall great job!
Looks great, code is readable, reusable, and responsive. Maybe a closer look with the sizing in the cards, but overall it's pretty much perfect. Good job!
I'm proud of the responsive CSS Grid layout, clean design, and consistent styling using CSS variables. I’d improve accessibility, add subtle animations, and explore dynamic content loading with JavaScript.
What challenges did you encounter, and how did you overcome them?Positioning the quote image was challenging at first. I solved it by using multiple background properties, ensuring proper alignment without affecting the layout.
What specific areas of your project would you like help with?I’d appreciate feedback on responsive optimizations and accessibility improvements, especially regarding ARIA attributes and keyboard navigation.
Hi Chrystiana! You did great on the project it's easy to read, easy to follow a few little errors, but overall looks great. The quote image is missing, I think it might be a simple directory path error. Try this url path instead: .testimonial-1 { background-image: url(../images/bg-pattern-quotation.svg); }
As for responsiveness what works for me is addressing the project mobile first. Begin with the things that will be consistent throughout then add breakpoints/changes where needed. This guy is pretty great at explaining css. Definetly check him out. Kevin Powell - guide to responsive css: https://youtu.be/x4u1yp3Msao?si=hLYYeqTJZRGwQgBE
I wish I could be more helpful when it comes to ARIA attributes, I'm not a 100% sure, but I do know it's helpful to use semantic HTML. Here's a helpful article I came across: https://css-tricks.com/why-how-and-when-to-use-semantic-html-and-aria/
Hope you found this helpful! :)
Excellent work Yonerfy! Code is well-structured, clear, and easy to follow. The layout has a smooth responsiveness throughout all sizes. Only detail that would need to be fixed is the card shadow to something with more of a blueish hue.
Good job on the project!
It's well structured, and the email validation works!
However, you forgot to include the success message. There's a few design errors that can easily be fixed, the heading size for larger screen sizes, as well as the container's padding.
In future projects consider filling out the ReadMe page, I feel like it gives you the opportunity to reflect back on any problems you may have come across, and the ways you solved them.
Layout looks great on a range of screen sizes. Your code is well-structured and readable. The solution is spot on with the design, all that's left to do is add a box-shadow around the card, but that's a quick fix, good job!
