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.
Overall, 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 .container class 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 to display: flex; for your specified CSS class. Keep up the good work!
Great job! This solution looks exactly like the design. Good use of flexbox and grid to organize the layout. Keep up the great work!
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: 100vh to make the page full height, and then use display: flex and justify-content: center on the body to center the content.
Overall, 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!
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.
Overall 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.
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.
Overall, 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.
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
This 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 auto in your container section). Otherwise entire site looks good in general.
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.
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.
Overall the solution looks very good. Very organized and close to the jpeg provided.
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.
