Skip to content
OverviewSolutions
5
Comments
4

Carlos Damota

@carlosdamotaEspaña120 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

Latest comments

  • Carlos Damota•120
    @carlosdamotaPosted about 1 month ago

    First of all, I want to say that your code is truly impressive. The structure, logic, and overall implementation are at a level that I aspire to reach. It's well-organized, follows best practices, and delivers a great user experience.

    However, I noticed a small issue that might have been overlooked:

    Issue: Button Hover and Input Focus Styles Not Activating Properly The :hover state on the button doesn't seem to trigger as expected. This could be due to conflicting styles, specificity issues, or an overriding rule elsewhere in the CSS. Similarly, the :focus state on the input field is not being activated correctly. This might be because the outline is being removed without adding an alternative focus indicator, which could also impact accessibility.

    Marked as helpful
    0
  • Carlos Damota•120
    @carlosdamotaPosted about 1 month ago

    Design Feedback

    Overall, the design is good. However, there are a couple of areas where improvements can be made:

    1. Social media component: It seems display: flex wasn't used, and margin-left was applied to the share button. This causes the entire margin to become visible during hover due to the use of transparency.

    2. Desktop mode: In the logic, there's no way to hide the social media banner.

    Positive Aspects

    • HTML and CSS structure: The HTML and CSS structure is very polished and easy to read. That said, it might be preferable to rely more on semantic tags rather than classes.
    0
  • Bhavik Thakur•190
    @bhavikthakurSubmitted about 1 month ago
    What are you most proud of, and what would you do differently next time?

    I liked how I was able to manage the image of product with different screen size

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

    Nothing really however, image is something that I struggle with.

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

    I would love if people could review my code, drop comments, and let me know about my progress. Thanks in advance :))

    Product preview cart component using plain html and css

    2
    Carlos Damota•120
    @carlosdamotaPosted about 1 month ago

    Feedback on the Code

    The code is clean and tidy, it is pleasant to read. At most, what I can add—and it is more of my own opinion than a standard—is that you separate the reset and the style into different files.

    Marked as helpful
    0
  • Carlos Damota•120
    @carlosdamotaPosted about 1 month ago

    🛠️ Constructive Criticism

    Your implementation is well-structured and demonstrates a good grasp of CSS and HTML! 🎯 There are many positives, such as using Flexbox for layout and a clear HTML structure. However, there are areas where you can improve to align more closely with the provided style guide.

    🎨 Styles and Consistency with the Design Guide

    1️⃣ Typography

    • The style guide specifies the Manrope font with weights 500 and 700, but your CSS uses a mix of serif fonts (Cambria, Cochin, Georgia, Times).
      Solution: Import and apply the correct font from Google Fonts.
    • The recommended body text size is 13px, but your code does not explicitly set this.
      Solution: Ensure that the p elements use font-size: 13px.

    2️⃣ Colors

    • The provided colors (Very Dark Grayish Blue, Desaturated Dark Blue, etc.) are not fully implemented in your styles.
      Solution: Adjust the text and background colors to match the provided HSL values for better consistency with the design.

    🖼️ Layout and Responsiveness

    3️⃣ Image Handling

    • The image in .image-area should maintain aspect ratio and avoid distortion.
      Solution: Use object-fit: cover; in the #image style.

    4️⃣ Desktop vs. Mobile Layout

    • The hidden share icons (.hidden-icon) have a hardcoded width (15%), which may not scale properly on different screen sizes.
      Solution: Use max-width or flex-grow instead of a fixed percentage.
    • The profile section disappears when clicking the share button on mobile but remains visible on desktop.
      Issue: On desktop, the share icons should appear as a floating tooltip rather than replacing the profile section.
      Solution: Adjust the JavaScript logic to toggle visibility correctly for both layouts.

    🏗️ JavaScript Improvements

    5️⃣ Event Handling

    • The visible() function currently hides the profile section on small screens but does not revert correctly on desktop.
      Solution: Ensure that the profile section reappears when needed instead of forcing display: none.

    6️⃣ Code Efficiency

    • Instead of checking window.innerWidth multiple times, consider using matchMedia("(max-width: 767px)") to listen for screen size changes dynamically.
    • The setTimeout() inside visible() is a good approach but could be improved with a CSS transition instead of hiding elements with JavaScript.

    🔧 Minor Fixes

    • The border-radius for the card images should match across all screen sizes.
    • Use semantic HTML where possible (e.g., <button> instead of <img> for the share icon).

    ✅ Final Suggestions

    Your implementation is solid, and with these refinements, it will align more closely with the Frontend Mentor style guide. Keep up the great work! 🚀

    Marked as helpful
    0