@MaulidFajarSubmitted 16 days ago
Sean Chen
@chenmeisterAll comments
- @chenmeisterPosted 15 days ago
Solution looks good. Great job on getting the modal to display above the share icon.
Marked as helpful0 - @SunilParbhooSubmitted 16 days agoWhat 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.
@chenmeisterPosted 16 days agoOverall, 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!0 - @cgeguizabalSubmitted 21 days ago@chenmeisterPosted 21 days ago
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 helpful1 - @sunnyeggSubmitted 22 days agoWhat 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.@chenmeisterPosted 22 days agoOverall, 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!
0 - @Jamal-DigitalSubmitted 22 days agoWhat 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.
@chenmeisterPosted 22 days agoOverall 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 helpful0 - @JogramadorSubmitted 24 days agoWhat 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.
@chenmeisterPosted 24 days agoOverall, 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.
0 - @gusanchefullstackSubmitted 3 months agoWhat are you most proud of, and what would you do differently next time?
NA
What challenges did you encounter, and how did you overcome them?NA
What specific areas of your project would you like help with?NA
@chenmeisterPosted 3 months agoThis solution looks almost exactly like the design. What I would suggest is to add the margin for the card element to be all around and evenly so that the bottom part doesn't just get stuck to the end. (Ex. use
margin: 10px autoin your container section). Otherwise entire site looks good in general.0 - @ShahddElsayedSubmitted 3 months ago@chenmeisterPosted 3 months ago
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 helpful0 - @ProgramJonesSubmitted 3 months agoWhat 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.
@chenmeisterPosted 3 months agoOverall the solution looks very good. Very organized and close to the jpeg provided.
0 - @Accel-exeSubmitted 3 months ago@chenmeisterPosted 3 months ago
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.
0
