Skip to content
OverviewSolutions
20
Comments
6

Asya0601

@Asya0601300 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

  • Leyanis Díaz•220
    @LeyaDiaz
    What are you most proud of, and what would you do differently next time?

    I am most proud of successfully implementing CSS Grid in a real-world project. It was my first time applying Grid to create a complex and responsive layout, and seeing the design come to life exactly as intended was very rewarding. The challenge helped me deepen my understanding of grid areas, row and column spans, and responsive adjustments.

    Next time, I would spend more time planning the grid structure before coding to avoid some trial-and-error. Also, I would integrate more fluid units like minmax() and auto-fit earlier to make the layout even more flexible across different screen sizes

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

    The biggest challenge was mastering CSS Grid’s syntax and behavior, especially when positioning elements that span multiple rows and columns. Initially, some cards didn’t align properly or had inconsistent heights.

    I overcame this by studying documentation, experimenting with different grid properties, and using browser developer tools to inspect the grid layout visually. I also sought examples and tutorials to understand best practices for responsive grid design

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

    How to make the grid adapt smoothly between breakpoints without abrupt layout shifts.

    Best practices for equalizing card heights dynamically without fixed heights.

    Suggestions for combining CSS Grid and Flexbox efficiently inside cards for content alignment.

    Any tips or code examples to improve these areas would be very helpful!

    Testimonials grid section main using CSS Grid

    1
    Asya0601•300
    @Asya0601

    The work is almost identical to the layout, great job! I would only change the background color to Gray 100. As for smoothness, you can set the width of the container relative to the screen, so that when the screen resolution decreases, the container follows it in percentage terms. The width can be set differently at different intervals between breakpoints. Code example(mobile-first):

    .main_container{ width:90%; }

    @media(min-width:768px){ .main_container{ width:80%; } }

    @media(min-width:992px){ .main_container{ width:70%; } }

    @media(min-width:1200px){ .main_container{ width:60%; } }

    In this case, you also need to adjust the height, for example, through the margin-block of the container.

    Happy creating!😀👍

    Marked as helpful
  • Asya0601•300
    @Asya0601

    Great job!

  • kwakuobeng16•30
    @kwakuobeng16
    What are you most proud of, and what would you do differently next time?

    Try different ways of making the webpage responsive

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

    Sizing the webpage on different mobile screens

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

    Diferent ways of making the webpage responsive

    Responsive Product preview card using css grid

    1
    Asya0601•300
    @Asya0601

    Well done, it turned out great! There are just one nuance. The word "perfume" should be made the size of a p, it will be more proportional.

  • Asya0601•300
    @Asya0601

    Great job!

  • P
    Juan Vallejo•280
    @CiaoGab
    What are you most proud of, and what would you do differently next time?

    Figuring it out on my own with minimal research

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

    fitting the card within the mobile parameters and having the text shrink

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

    the smoothness of the responsive layout. ideally it would scale down as the screen re-sizes rather than a break point change

    Blog Preview Card Solution HTML/CSS

    1
    Asya0601•300
    @Asya0601

    For better adaptation and smoothness, try to use relative values ​​as often as possible (i.e. instead of fixed px, use % - percentage of the width or height of the parent element or screen, vh/vw - unit of height\width of the screen, rem/em - size, relative to the base font size). Good luck!

  • NISHA NAJIHAH•10
    @nishanajihah
    What are you most proud of, and what would you do differently next time?
    • Created a visually appealing QR code component with clean HTML structure
    • Properly implemented Google Fonts with preconnect for optimization
    • Added responsive design with centered content
    • Included proper attribution
    What challenges did you encounter, and how did you overcome them?
    • Designed a responsive card component that works across screen sizes
    • Implemented the design using appropriate typography and spacing
    • Organized the project files with proper structure
    What specific areas of your project would you like help with?

    Well what is the best practice, to make it convenient and maintaince proof?

    QR Code Component with Pure HTML and CSS

    3
    Asya0601•300
    @Asya0601

    For greater similarity with the task, you can add display:none to .attribution so that the line under the card is visible only in the code, and also slightly increase the sizes of p and h1, focusing on the template on the sizes of the last line in the example (in the sample it ends with "the next level"). If the emphasis is on individual creativity, everything is great, keep it up!👍