Skip to content
OverviewSolutions
2
Comments
5

Gokul

@Gokul221Pune20 points

Learning new things each day

Latest solutions

Latest comments

  • P
    Karolina•70
    @KarolinaMas
    What are you most proud of, and what would you do differently next time?

    I tried using clamp() function in css for the first time and found out that is pretty good function for making responsive font size and container width.

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

    I had research how to use clamp() efficiently and it worked out good.

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

    If you have some insights on clamp(), please share with me. Any other reviews are welcome too.

    Responsive card using clamp().

    1
    Gokul•20
    @Gokul221

    Great work Karolina! Your code is really great. I was not aware of the clamp() function. Would definitely integrate it in future projects.

  • Yoncess•70
    @Yoncess
    What specific areas of your project would you like help with?

    I am interested in learning more about how to align objects across the page, inside containers, in flex elements, and so on.

    Preview card newbie

    1
    Gokul•20
    @Gokul221

    Hi @Yoncess! For better accurate stylings, dimensions, hover effects and responsiveness you can refer to the figma design file provided. For applying various types of layouts like flexbox, grid you can inspect your elements in the browser. For example, if you've applied any display:flex or display:grid property to any element it would show a box after the layout name which has various alignments. Try applying them in the browser itself and when you get the desired alignments, add them in your code. Flexbox and grid has their own sets of alignments. For detailed explanation on layouts, try asking the github copilot in vscode to compare and explain styles for better clarity.

  • P
    Ben Schwartz•60
    @bmschwartz
    What are you most proud of, and what would you do differently next time?

    I'm most proud of the fact that I am starting to feel more comfortable translating what I want something to look like into the code that I need

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

    Getting the avatar to fit inside its parent div was one challenge I ran into. I just had to google how to do that

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

    Open to any feedback

    Blog card

    1
    Gokul•20
    @Gokul221

    Hi Ben! You have completed the basic stylings. For more accurate stylings, dimensions and hover effects, refer to the figma design file. Also, you can add multiple breakpoints to make it more responsive. You've written pretty well CSS code. I learned the usage of variables.

  • Gokul•20
    @Gokul221

    Great work @bobek1337! Page is well responsive for small screens but you can add multiple breakpoints (480px, 768px, 1024px, 1200px) to make it more responsive. Typography is on point just the margins need to be applied to get it almost like the expected design. You can refer to the figma file for accurate dimensions, margins and hover effects (transition delays and box shadow transition). Overall, great work.

  • Gokul•20
    @Gokul221

    The font-family, line-height, letter-spacing can be improved for the text. Shadow can be applied for the QR box. You can refer to the figma design file for accurate dimensions and typography. Good work btw.