Skip to content
OverviewSolutions
7
Comments
6
P
Yi-Ting Lu
@kris-lu-dev

All comments

  • Christian•180
    @christianb3llSubmitted 23 days ago
    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
    Yi-Ting Lu•110
    @kris-lu-devPosted 23 days ago

    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!

    0
  • Yi-Ting Lu•110
    @kris-lu-devPosted 3 months ago

    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
    0
  • Yi-Ting Lu•110
    @kris-lu-devPosted 4 months ago

    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! 🚀

    0
  • Yi-Ting Lu•110
    @kris-lu-devPosted 4 months ago

    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!

    0
  • Yi-Ting Lu•110
    @kris-lu-devPosted 4 months ago

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

    Marked as helpful
    1
  • Yi-Ting Lu•110
    @kris-lu-devPosted 4 months ago

    Looks perfect!

    0