Skip to content
OverviewSolutions
15
Comments
16

gauravk2203

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

  • gauravk2203•310
    @gauravk2203

    nicely done

  • gauravk2203•310
    @gauravk2203

    Your functionalities are well-structured, but there seems to be a significant issue with the design. I recommend focusing on refining the design to align as closely as possible with the desired standards. Keep up the great work – you're making excellent progress.

  • Daniele Ercoli•170
    @DanieleErcoli243
    What are you most proud of, and what would you do differently next time?

    I'm proud because I managed to do the project all by myself. Next time I will watch everything that can help me finding issues and solutions.

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

    The size of the picture changed from the smaller sizes to the big one and it took a while to see the the figure tag needed to be resized. I use the console to see it. Then I had a little trouble to close the box with the link and I overcame it refreshing the browser.

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

    It was easy, I don't think I would need help.

    Responsive article with links to trigger

    1
    gauravk2203•310
    @gauravk2203

    Suggestions for Improvement:

    Use CSS Variables for Colors and Spacing:

    Define CSS variables for colors, font sizes, and spacing at the root level. This avoids repetition and makes the design easier to update.

    :root {
    --background-color: hsl(210, 46%, 95%);
    --text-color-primary: hsl(217, 19%, 35%);
    --text-color-secondary: hsl(214, 17%, 51%);
    --card-radius: 10px;
    --spacing-small: 10px;
    --spacing-medium: 20px;
}

    Then use them:

    body {
    background-color: var(--background-color);
}

    Avoid Deep Nesting:

    Deeply nested selectors like .card .card-body h1 can be harder to maintain and may lead to specificity issues. Try to keep selectors simpler and use class names to target elements.

    .card-title {
    font-size: 16px;
    color: var(--text-color-primary);
}

    Improve Responsiveness:

    Consider using relative units (like em, rem, %, or vw) instead of fixed units (like px) for margins, paddings, and font sizes to make the layout more fluid.

    Optimize Repeated Values:

    If the same property-value pairs (e.g., padding or border-radius) are repeated, move them to a shared class or parent container.

    Avoid Fixed Heights:

    You mentioned fixed height for the container is an issue. Replace fixed heights with min-height or let the height adjust dynamically. Use fit-content for Dynamic Layouts:

    For the #share section, consider width: fit-content for dynamic sizing instead of hardcoding widths.

    Add Comments for Clarity:

    While your code is structured, adding comments for specific sections can clarify the intent, especially for larger projects.

    Group Media Queries:

    Instead of repeating the same media query for different selectors, group them together for easier maintenance.

    @media screen and (min-width: 768px) {
    .container {
        max-width: 600px;
    }
    .card-title {
        font-size: 18px;
    }
}

    Example Refactor: Here’s how the body and container styles might look with these improvements:

    :root {
    --background-color: hsl(210, 46%, 95%);
    --text-color-primary: hsl(217, 19%, 35%);
    --text-color-secondary: hsl(214, 17%, 51%);
    --card-radius: 10px;
    --spacing-small: 10px;
    --spacing-medium: 20px;
    --max-width: 320px;
}

body {
    background-color: var(--background-color);
    font-family: 'Manrope', serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--spacing-medium) 0;
}

img {
    max-width: 100%;
    height: auto;
}

    Final Notes: Your approach is solid, and with a few tweaks, it will be even more professional and maintainable. Using tools like Prettier for formatting or a CSS preprocessor like SCSS can also help streamline your development process.

    Marked as helpful
  • Ghozy•280
    @Ghozy165
    What specific areas of your project would you like help with?

    Any comments would be helpful

    Time Tracking Dashboard

    1
    gauravk2203•310
    @gauravk2203

    The overall design and functionality look great! However, there are a couple of areas that need adjustments:

    1. The card-content has extra padding, which is causing it to overflow the component. Consider reducing or adjusting the padding to ensure proper alignment.
    2. The container currently has a fixed height, causing the children to overflow. To address this, use the fit-content property for the container's height. This will allow it to grow dynamically based on the content inside.

    Once these issues are resolved, your layout should look much more polished! Keep up the great work!

    Marked as helpful
  • gauravk2203•310
    @gauravk2203

    The issue with the rating article is that it doesn't have a specified width, which is causing it to inherit the width of its parent container. To resolve this, you can set a fixed width for the rating article max-width: 350px should be sufficient. Additionally, it would be great to adjust the spacing to ensure the design remains balanced. Once those adjustments are made, everything else looks fantastic!

    Keep up the great work! You're doing an excellent job!

  • gauravk2203•310
    @gauravk2203

    nice job!!

View more comments