Skip to content
OverviewSolutions
32
Comments
22
Debabrata Banik
@DebabrataBanik

All comments

  • Debabrata Banik•730
    @DebabrataBanikPosted about 1 month ago

    Well, I can’t believe I just got Rick Rolled like this... couldn’t have ended the day better. 😂

    On a side note, your design looks great! Just a small suggestion: maybe try removing the margin from the body and using padding-inline instead. It should help avoid that unnecessary scroll on the page.

    Marked as helpful
    0
  • Debabrata Banik•730
    @DebabrataBanikPosted about 1 month ago

    Great work on the design! You might want to consider adjusting the font-size for the card elements as the font sizes changes across different viewports. You can try a few methods to scale the text as the screen size increases:

    • Media Queries: You can use media queries to define different font-size values for various screen widths.
    • Fluid Typography: Try using viewport width units (vw) for fluid scaling, so the text adjusts automatically as the viewport changes.
    • CSS clamp() Function: This modern method lets you set a minimum, preferred, and maximum font-size, offering more control over how text scales.

    Hope this helps!

    Marked as helpful
    0
  • Debabrata Banik•730
    @DebabrataBanikPosted about 2 months ago

    Your design looks amazing! Few things you might want to look at:

    1. Remove any default margin and padding from the body and set min-height: 100vh. This ensures the layout spans the full viewport height and eliminates unnecessary scrolling.
    2. On your img_container you can add display: flex to make sure the image inside is centered and covers the full containers space.
    Marked as helpful
    1
  • Debabrata Banik•730
    @DebabrataBanikPosted 2 months ago

    You can use z-index: -1 on your top and bottom img elements for the pattern to appear below the card.

    0
  • Debabrata Banik•730
    @DebabrataBanikPosted 2 months ago

    Great work on the design!

    You might want to center the card in the viewport. For that you can first remove the margin-top: clamp(62px, 16.533vw, 152px); and also remove the margin-inline:auto from your card component. And add some css to the main tag:

    main{
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

    Since the main tag contains the card, this CSS will center the card within the viewport without needing to manage margins manually.

    Using clamp() for margin-top is useful when adjusting spacing based on viewport size. However, because the goal is to keep the card consistently centered, flexbox is a simpler and more effective solution.

    0
  • Quang Thoai Vu•70
    @vuthoai02Submitted 3 months ago
    What specific areas of your project would you like help with?

    Please provide your feedback to help me improve the project. Thank you.

    Social-links-profile

    1
    Debabrata Banik•730
    @DebabrataBanikPosted 3 months ago

    Since your design is a single-component layout, you can simplify things by using a fixed width like width: 300px. This will keep the component consistent across different screen sizes without needing to worry about percentages or additional properties.

    However, for designs where responsiveness is more important, consider using a percentage-based width along with a max-width. For instance, setting width: 90% helps the component adapt to smaller screens and fill most of the viewport. Using max-width: 300px (or a suitable value) ensures it doesn't become too wide on larger screens.

    Also, be sure to change the source of your img file to the profile picture.

    Great work on the design overall! Hope this helps!

    Marked as helpful
    1
  • Gilang Ramadhan•460
    @gilangr1440Submitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    making image color overlay with ::before pseudo-element

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

    measurement width, height, padding, and margin

    Stats Preview Card Component

    1
    Debabrata Banik•730
    @DebabrataBanikPosted 3 months ago

    Great work on the design!

    For the image maybe you can try this, on your ::before psedo-element of .image-container replace the background-color with background-color: hsl(277, 64%, 61%);. Then on the img class add this mix-blend-mode: multiply; and opacity: 0.7;

    Hope this helps!

    Marked as helpful
    1
  • Michael Onafowokan•510
    @Shikamaru007Submitted 3 months ago
    What challenges did you encounter, and how did you overcome them?

    media queries. i just had to set more breakpoints than usual and im not sure if its best practice to do.

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

    the media queries section please? something about the width setting seem off And id like to know if there was a way to set the font size relative to the width of its container

    Responsive Stats Card

    2
    Debabrata Banik•730
    @DebabrataBanikPosted 3 months ago

    Your design looks great! Just a few tweaks could make it even better. For the font sizes, you might want to try using clamp(min, preferred, max). The preferred size should be a relative unit like vw to keep it responsive to different screen sizes.

    Also, consider a mobile-first approach. Start by designing for smaller screens, and then add breakpoints for larger screens as needed. This makes it easier to manage styles and improves the overall responsiveness.

    Hope this helps!

    Marked as helpful
    1
  • Debabrata Banik•730
    @DebabrataBanikPosted 3 months ago

    Great work! Your design looks amazing. You might want to remove the margins from the body and set margin: 0 to properly center the card. And also add a max-width: 90% to your .product-card element to help adjust the width of the card in smaller viewports.

    0
  • Debabrata Banik•730
    @DebabrataBanikPosted 3 months ago

    Excellent work on the design! Just add the hover state on the h1 element and since it's a clickable element maybe enlcose it in <a> instead.

    Marked as helpful
    0
  • Pinelopi•80
    @Pinelopi-RomeouSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    I used Grid, which is not something I am familiar with, instead of Flexbox for the layout

    Single price grid component

    1
    Debabrata Banik•730
    @DebabrataBanikPosted 4 months ago

    Great work on the design! Here are a few modifications I suggest:

    1. Avoid using fixed heights for the container; let the content inside it determine the height. For the width, instead of using 100%, consider using a smaller value unless you want the container to span the full width of the viewport.
    2. For the responsive layout, consider adjusting the max-width to at least 40rem.
    Marked as helpful
    0
  • Cleyrol Santana•120
    @cleyrolscSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    I feel like I keep getting better and better by the day thanks to the practice. I was able to create this project in a timely manner

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

    I had to research why ::before and ::after didn't work on image.

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

    Everything's good so far.

    Responsive design using CSS flexbox and media queries

    1
    Debabrata Banik•730
    @DebabrataBanikPosted 4 months ago

    Your design looks amazing! However, you might be missing certain elements, like the Ethereum and clock icons. Consider adding hover states to the heading and the creator's name for a more interactive experience. Also notice that there is a border around the creator's img.

    Marked as helpful
    0