Skip to content
OverviewSolutions
7
Comments
6
P

Kris Lu

@luyi765110 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

View more solutions

Latest comments

  • P
    Christian•270
    @christianb3ll
    What are you most proud of, and what would you do differently next time?

    It was good to get to grips with grid a bit more. It's really flexible once you get the hang of it.

    What challenges did you encounter, and how did you overcome them?

    It was a real challenge to get the design to respond correctly. I'm still not sure that the design is quite there on the mobile version. I also took the liberty of creating a 2x2 grid for medium-sized screens as both mobile and desktop versions looked awkward at that size.

    What specific areas of your project would you like help with?

    Any pointers or comments appreciated!

    Four card feature section with CSS grid

    1
    P
    Kris Lu•110
    @luyi765

    Hey there!

    Great job on your responsive design! I love how it seamlessly adapts from mobile to tablet and desktop.

    One suggestion for improvement is to use a pseudo-element for the top border of the card to maintain a consistent corner radius with the design.

    Keep up the great work—you’re doing amazing things!

  • P
    Kris Lu•110
    @luyi765

    Hi Gabriela,

    I've just finished this challenge as well. I'd recommend you start to learn a bit knowledge about responsive image. Let's keep up with the challenges 💪🏻

    Marked as helpful
  • P
    Kris Lu•110
    @luyi765

    Hi Moustafa,

    Great job! I like how you've organized the typography variables.

    I did notice that the nutrition section is missing from the solution, though. This would be a great chance to practice styling HTML tables. It would also be beneficial to add a mobile-responsive version.

    I hope you find my feedback helpful! Happy coding! 🚀

  • P
    Kris Lu•110
    @luyi765

    Hi @aymenezz,

    You did a good job!

    But I've noticed a few points you can try to make a improvement:

    1. Centerlize the profile:
    • Set the height of body to 100vh
    • Remove the height of .profile
    1. Apply font-family as Inter and set
    @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

body {
font-family: "Inter", sans-serif;
}

    Keep going!

  • P
    Kris Lu•110
    @luyi765

    Great job! However, downloading the Figma file to adhere to the design system and polish the details would definitely improve it!

    Marked as helpful
  • P
    Kris Lu•110
    @luyi765

    Looks perfect!