@domdem-dev
denise
@moncadadAll comments
- @moncadad
Good code structure everything is easy to follow. My few suggestions would be to use semantic elements in order to meet accessibility standards. As for styling it's a bit off so definetly work on getting closer to the design. Another tip is to use rem (em where appropriate) instead of pixels as it allows for better accessibility and responsiveness. At the end of the day it functions as it should, clean code well structured. Although the spacing is off it's still responsive from mobile to desktop screen sizes.Good job :)
Marked as helpful - P@TurtlewordsWhat are you most proud of, and what would you do differently next time?
I made sure to use semantic elements where possible and assign aria roles to certain interactive elements.
What challenges did you encounter, and how did you overcome them?Styling the radios as buttons was a bit of a challenge. Hiding the input and styling the radio allowed me to achieve the desired effect.
What specific areas of your project would you like help with?Responsiveness, design accuracy, and functionality. Thanks!
@moncadadIf it wasn't for the side by side I'd assume it was perfect. Responds well, the code is well structured as well as it's functionality. You did a great job!
- @mariokreitzWhat are you most proud of, and what would you do differently next time?
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
@moncadadWith 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!
Marked as helpful - @Lapupeh@moncadad
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!
- P@chryspenalberWhat are you most proud of, and what would you do differently next time?
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.
@moncadadHi 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! :)
Marked as helpful - P@Yonerfy@moncadad
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.
- @Obiwumma@moncadad
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.Marked as helpful - @Manannan297@moncadad
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!
- @r3dxm@moncadad
Good job! Code is readable, and well structured. Although it meets responsiveness standards consider using max-width instead of a set width for better layout results for a greater range of screen sizes
- P@hairamaWhat are you most proud of, and what would you do differently next time?
Happy I learned a lot about Sass.
I was trying to keep the HTML simple by not having too many elements with custom classes--but that ended up making the layout difficult. Next time I might just use more <div> elements to group things.
What challenges did you encounter, and how did you overcome them?Styling <li> when the bullet/number has different styling than the text. I ended up using <span> which worked pretty well.
What specific areas of your project would you like help with?Any feedback is welcome.
@moncadadGreat problem solving I also had trouble with the list styling, wish I would've though of this. Your solution looks spot on to the design. Good job!
- @alecanonm@moncadad
Excellent job, on making use of semantic elements. It could use some better sizing but overall good job!
- @AlejandroLR00@moncadad
Great work!! Only suggestion would be to review the font size used through out your text. Perhaps go a size up.
- @lumanaa@moncadad
Great job practically pixel perfect! Review the "Scan..." paragraph's text alignment.
- @mooogzWhat are you most proud of, and what would you do differently next time?
Pretty proud of this one although I know my media queries are all over the place. Styling the submit button gave me some trouble but I learned a lot! The JavaScript was actually one of the easiest parts for me so it showed me how much I've learned so far.
What specific areas of your project would you like help with?I notice when I resize the window to be smaller the Base Apparel logo overlaps the other text. Any suggestions would be welcome. I'm sure there are errors in my code, especially with the media queries and maybe even the way I organized the items in my HTML.
I'm trying to get better at mobile-first workflow and media queries. I work on a pretty large screen and use chrome inspector to test other screen sizes, but does anyone have any tips? I find that once it looks great at smartphone sizes and 1440px+ I have a lot of trouble figuring out the smaller sizes like tablet and smaller laptops.
@moncadadHello Megan you did a good job! Not sure if you've come across Kevin Powell on Youtube he's great at explaining CSS. He has a few playlist on responsiveness, it's helped me a lot hopefully you find him as helpful as well :)
- @GabrielNoss@moncadad
Excellent job! Consider adding a background-color to body. I used the colors provided, but you could always use a color picker tool for the exact color.
ex: body { background-image: url('/images/pattern-background-mobile.svg'); background-color: pale-blue; ... }
Marked as helpful - @04leslie@moncadad
The approach I took on my project was for the .card { max-width: 600px } and went on to .card-image .img{ width: 100%} .card-info {width: 100%} and just made up for the remaining space with padding, and margin.
I found this video very helpful for understanding responsiveness. https://www.youtube.com/watch?v=VQraviuwbzU Hope it helps :)
