@MaulidFajar
Sean Chen
@chenmeisterAll comments
- @chenmeister
Solution looks good. Great job on getting the modal to display above the share icon.
Marked as helpful - P@SunilParbhooWhat are you most proud of, and what would you do differently next time?
I enjoyed practicing CSS Grid. I utilized the grid for the desktop layout of the card elements, however I think next time I may try using it for the card itself (elements inside the card).
What specific areas of your project would you like help with?I am always open for any insights on how to make my code more professional and always open to hearing how I can improve.
@chenmeisterOverall, the solution for the CSS Grid looks like the design provided. However, I've noticed the width of the entire testimonials grid covers up the entire screen. What I would suggest is to add a
width: min(95%, 70rem)to the.containerclass in your CSS File. That way it would give the container some width padding without having to stretch across the screen. Also, the best way to debug if your flexbox code is working is to utilize chrome dev tools and click on the icon next todisplay: flex;for your specified CSS class. Keep up the good work! - @cgeguizabal@chenmeister
Great job! This solution looks exactly like the design. Good use of flexbox and grid to organize the layout. Keep up the great work!
Marked as helpful - @sunnyeggWhat challenges did you encounter, and how did you overcome them?
For the card, I struggled a little bit with the responsiveness, such as setting the margin of the card, to make the card centered on the page. From the previous challenge, I learned that I can use
min-height: 100vhto make the page full height, and then usedisplay: flexandjustify-content: centeron thebodyto center the content.@chenmeisterOverall, great job! Looks exactly like the design. Taking the mobile first approach is the right way to go. HTML and CSS code is very organized and readable. Keep up the great work!
- @Jamal-DigitalWhat are you most proud of, and what would you do differently next time?
Not really proud, i have a lot of difficulties working with the desktop style.
What challenges did you encounter, and how did you overcome them?Yeah, i'll like to have a feedback on how i could develop the desktop design without affecting the mobile design.
What specific areas of your project would you like help with?I am looking forward to your feedback.
@chenmeisterOverall the solution looks fine. However, I did notice the box components are wider than the design. What I would suggest is to add a max-width to the box components ex.
max-width: 375px. Also, I highly recommend using CSS grid for the box components as they will make the flow more organized.Marked as helpful - @JogramadorWhat are you most proud of, and what would you do differently next time?
I'm proud to have made the change from one column (mobile) to two columns (web).
What challenges did you encounter, and how did you overcome them?Image. I was able to use the source tag to change the image based on the screen size
What specific areas of your project would you like help with?I need to improve my understanding of rem and spacing.
@chenmeisterOverall, this solution looks really good. It looks almost exactly like the design. I am also studying more about rem and spacing. While looking at the source code, I saw you took the mobile first approach with CSS. Keep up the great work.
- @ShahddElsayed@chenmeister
Overall this solution is very clean and looks almost exactly like the design itself. However, after looking at the source code there are some modern HTML5 elements and practices you can use.
- Instead of using div for the card element, use article or section if possible
- Maybe group the image, name and location into one section for easier CSS adjustment
Marked as helpful - @ProgramJonesWhat are you most proud of, and what would you do differently next time?
I'm proud of how I learned how to scalably structure my CSS code. Next time I'll be sure to set my CSS files with the lessons learned from this project.
What challenges did you encounter, and how did you overcome them?The only frustrating thing was a typo in the variable font relative path that took three hours to troubleshoot. Next time I won't put it past myself to make mistakes like that.
What specific areas of your project would you like help with?It'd be nice if I could figure out why there's space between the SVG and the yellow label below it.
@chenmeisterOverall the solution looks very good. Very organized and close to the jpeg provided.
- @Accel-exe@chenmeister
Overall this solution looks good and fulfills the task. However, when putting in mobile mode via chrome dev tools, the card and the QR code looks very small. Code wise, the best way is to utilize flexbox if possible as it requires less CSS code and makes your webpage more adaptable.
