Skip to content
OverviewSolutions
8
Comments
13
Hugo Sanchez
@HunigoleSan

All comments

  • Hugo Sanchez•270
    @HunigoleSanPosted 9 months ago

    👋 Hello! @itzvikashgupta

    Great job buddy, you've successfully completed the project!🎉 It's nearly perfect; there's just a little room for improvement in the CSS, but we can add a touch to the HTML architecture.

    I recommend using semantic tags, they're essential for both SEO and accessibility. Providing good tags is crucial. For instance, consider using the "article" tag for each "card". Besides being semantic, it's accessible as it internally includes the "role=article" attribute. This is important for the accessibility of people with different abilities who use Google assistants or other programs to understand the webpage.

    I suggest delving deeper into "Semantic HTML" and "HTML accessibility attributes" to grasp these concepts better and apply them to your project. I hope this recommendation helps enhance the structure of your project! 🚀

    0
  • Alysson Demari•240
    @AlyssonDemariSubmitted 9 months ago

    Feel free to leave me a comment if you have any suggestions to enhance this project. Any feedback is welcome.

    Four-Cards

    1
    Hugo Sanchez•270
    @HunigoleSanPosted 9 months ago

    Hello! 👋 @AlyssonDemari

    Congratulations on successfully completing the challenge! 🎉 However, let me provide you with some tips to help you improve as a web developer. Take some time to reflect on these suggestions, as I'm here to assist you in your improvement journey. 💼

    First tip: Width in the body tag 📏

    In your code snippet, you've set a fixed width for the body tag using "width: 1440px". While this isn't necessarily wrong, it could lead to unnecessary scrolling. Additionally, you're using "margin: auto", which becomes redundant when you're already utilizing flexbox for centering elements.

    Furthermore, within your media queries, you're setting "width: 100vw", which can also cause unnecessary scrolling. Instead, consider removing these width declarations as your "section" tag already utilizes CSS GRID, allowing child elements to dynamically provide their width.

    Second tip: Width in the Section tag 🖥️

    Similarly, if your child elements are dynamically expanding within the section tag, there's no need to specify a width for it. Removing these width declarations will make your code more adaptable for various devices.

    Remember, your effort and current knowledge are appreciated by developers, but there's always room for improvement. Keep practicing and striving for excellence on your journey as a web developer. 🌟

    1
  • Olga Pérez•30
    @orpd0523Submitted 9 months ago

    I continue to struggle with the fonts. After I figured the fonts out the margins finally started working with me. Any feedback on how I can improve my code is welcomed and appreciated! 😊 How long should a small project like this take on average?

    Desktop view, only html and css utilized.

    2
    Hugo Sanchez•270
    @HunigoleSanPosted 9 months ago

    Hello!👋 @orpd0523

    Great job on completing the challenge for computer devices. Here, I'm sharing 3 topics for your professional development research:

    -Investigate BEM CSS Methodology

    -Research CSS Reset or Normalize

    -Explore Web Responsive Design and Media Queries

    Let's explore and grow professionally! 🌱

    Marked as helpful
    1
  • Thaís Vieira•120
    @thaisavieiraSubmitted 10 months ago

    Please, check out the read.me in [my repository] (https://github.com/thaisavieira/profile-card-componet) where you can find more about my process how I built this project, and what I learned. Do you have any tips about how can I make it even better? Could the way I defined the spacings be done more cleanly?

    Practicing Flexbox skills with Profile Card Componet challenge!

    4
    Hugo Sanchez•270
    @HunigoleSanPosted 10 months ago

    Hello @thaisavieira! 🌟 You're on the right track. Remember, continuous practice makes you a better developer. To solve the issue you're facing, you only need three lines of code:

    ul {
    list-style: none;
    width: 100%;
    display: flex;
    justify-content: space-around;
}

    With this, you'll fix the problem you're encountering.

    Now, let's discuss some recommendations to avoid bad practices.

    First tip: Height 📏

    The ".card" class is using a fixed measurement for the "heigh"t property. This could lead to issues as you add more child elements. It's best to avoid fixed measurements and let child elements naturally expand within the parent container.

    Second tip: Width 📐

    The ".card" class is using a fixed measurement for the "width" property, which might be suitable for mobile devices. However, for best practices, you could use the "padding-30px" property to increase the container size and simulate the appropriate width. Although, using a fixed measurement isn't necessarily wrong in this case.

    Third tip: Responsive 📱

    While you're not yet applying responsive design, you can make the ".card" class use a percentage instead of a fixed measurement for width. For example, "width: 95%". This will make the container fluid and adaptable to any type of mobile device with a screen width less than 415px.

    I hope this little feedback has been able to help you in your professional development. 🌟 If you found it useful, feel free to rate it! Keep up the great work! 👍

    Marked as helpful
    2
  • Hugo Sanchez•270
    @HunigoleSanPosted 10 months ago

    Hello @Ilyes0izmr! 🎉 Congratulations on completing the challenge! 🚀

    I'm thrilled to see that you've met the main requirements. However, there's a small detail I'd like to address.

    In your code, you're defining your ".container" with a "width: 100px". This means that, thanks to your media query "@media (min-width: 390px)", starting from a screen width of 390px, your ".container" class adapts correctly for PC viewing. So far, everything is excellent.

    The issue arises when the screen resolution is less than 390px. In this case, your ".container" class will retain the value of "width: 100px", which makes it look bad on devices with a width less than 390px.

    My recommendation is to either remove the "width" property or change it to a percentage, for example, "width: 97%".

    Keep up the great work and continue improving! Don't stop pursuing your goals! If this comment has been helpful to you, feel free to rate it! 🌟

    0
  • Hugo Sanchez•270
    @HunigoleSanPosted 10 months ago

    Hello @aykinsancakli! 👋

    I want to commend you for your outstanding work, which closely aligns with the challenge requirements. Allow me to offer a suggestion that could enhance your CSS approach. 🛠️ Upon reviewing your code snippet:

    .btn:hover { 
    background: var(--color)
}

    It's evident that you effectively utilize the hover pseudo-class, particularly suited for PC devices. However, it's crucial to acknowledge potential issues on mobile devices where hover behaves differently, often leading to unexpected outcomes. 📱 To address this, I recommend deactivating hover for mobile devices and utilizing the active pseudo-class instead. 🔍

    @media (max-width: 414px) { 
    .btn:hover { 
        background: none; /* Define the desired background for the button in its normal state */ 
    }
    /* Mobile styles */
    .btn:active { 
        background: var(--color)
    } 
}

    You have the flexibility to employ this approach or explore alternative methods that better suit your preferences. The key takeaway is to gain insights into the nuances we must consider to refine our coding practices. 🛠️📘

    Marked as helpful
    0
  • Hugo Sanchez•270
    @HunigoleSanPosted 10 months ago

    Hello @brunohenriquedeveloper, congratulations on completing the challenge! You've applied your knowledge well, and I'd like to contribute some "concepts" and recommend avoiding certain things when adding CSS properties. Please take the time to understand these points as it will optimize your code and make you a better developer. 🚀💻

    First Tip: Universal Selector

    The universal selector, as we know, applies defined properties to all selectors. You're using:

    * {
    box-sizing: border-box;
    padding: 0;
    height: 100%;
}

    This is good as you're resetting, but at the same time, setting height: 100%. While this works when a parent container has a fixed height and your ".card" container has that fixed height, it's not ideal because each child and grandchild element inherits this height property. While it may look fine to the client, it's considered bad practice from a developer's standpoint.

    Note: Removing this property will cause your ".card" class to extend beyond the screen. To fix this, you can add the min-height: 100vh; property to the "body" selector (this ensures it takes up 100% of the screen height and adjusts if its children exceed the screen height). Additionally, add margin: 0px to the universal selector to reset margins.

    In summary, the universal selector acts as a "reset" property, allowing control over every element in the browser. I recommend adding margin to control it yourself. Remember, each web browser has default padding and margin properties, and not resetting them means letting the browser control them, which may lead to inconsistencies across different browsers. It's a good practice to apply a reset to elements. I suggest studying "CSS reset" or "normalize CSS" for more information. 📚🔍

    Marked as helpful
    0
  • Hugo Sanchez•270
    @HunigoleSanPosted 10 months ago

    Hello @NemanjaChido! 🎉 Congratulations on your work! You've done a good job so far, but let me offer you some tips for improvement. There's a lot you can enhance, but let's address something crucial first.

    In CSS, resizing images using percentages can sometimes result in a messy code and poor visual appearance. I noticed that you're resizing your image

    using background-size: 100% 100%;. While this is suitable if your container has a fixed width, it might cause issues when the container's size changes dynamically.

    For your ".wrapper" class, you're using embedded measurements or "percentages," causing the image to resize in an undesirable way. Instead

    I recommend using background-size: cover;.

    This property ensures that the image adapts to its entire container, maintaining its aspect ratio even when the container's size changes.

    Keep up the good work! 💪🚀

    0
  • Hugo Sanchez•270
    @HunigoleSanPosted 10 months ago

    Third Tip: Fixed Measurements or Pixels

    I noticed that your classes ".container", ".description", "#description", and "button" use a width property in pixels. While this isn't inherently bad, it's essential to understand its implications. While percentage measurements are often touted as superior, there are scenarios where pixels are more suitable. However, for mobile devices, using pixel measurements can be problematic.

    Consider learning about percentage measurements, and in this scenario, transitioning to percentage-based widths may be beneficial. Don't forget to add "padding: 2rem" to the body tag. However, be cautious as making these changes abruptly may break your existing code. Additionally, mastering the correct usage of "display: flex" can greatly improve your layout.

    Fourth Tip: File Paths

    If your image works locally but not when uploaded to a website, it may be due to incorrect file paths. Ensure that your file paths are correct, especially in the background-image property. Instead of "/images/image-product-mobile.jpg",

    use "../images/image-product-mobile.jpg" to adjust the path correctly.

    Congratulations on your progress in web development! Remember, success in this field requires consistent practice and patience. Keep practicing, and you'll become a better developer over time. Feel free to rate my assistance, and don't hesitate to reach out if you need further help. Until next time! 🚀✨

    Marked as helpful
    1
  • Hugo Sanchez•270
    @HunigoleSanPosted 10 months ago

    Second Tip: Media Queries

    You're using media queries to adjust the ".container" for PC devices, which is fine. However, some issues arise when resizing beyond 1440 pixels in width, causing it to revert to mobile device settings. This is because you've used the "FIRTSMOBILE" code, which is not incorrect, but I recommend removing a parameter from your media query:

    🖥️ Current Media Query:

    css @media (min-width: 900px) and (max-width: 1440px)

    🔍 Recommended Adjustment:

    css @media (min-width: 900px)

    This indicates a range from minimum to maximum. By leaving it undefined, all elements intended for PC screens will retain those changes. There's no need to add unless you're making other changes for a different theme, but for this challenge, it's unnecessary.

    Removing the (max-width: 1440px) range will prevent your classes from reverting to the "firsts mobile" state, thus avoiding code breakage. My suggestion is to eliminate that range.

    Marked as helpful
    1
  • Hugo Sanchez•270
    @HunigoleSanPosted 10 months ago

    Hello @Guga-tab! 👋 You've done a good job with your current knowledge. I'm here to help you improve your responsive design and CSS logic. Let's break it down into individual posts to keep it concise.

    First, let's address an important detail in your ".container" class. You're using embedded margin, which is expressed in percentages. While this can be effective with advanced mathematics, it's often cumbersome. Instead, consider a simpler approach for centering elements.

    I suggest removing the margin and adding a class to your "body". Give it properties like display: flex, justify-content: center, align-items: center, min-height: 100vh.

    🔍 What will these codes do in the body tag?

    These properties will center all child elements within the body tag, adapting them for various devices.

    justify-content: center (centers elements along the horizontal axis) align-items: center (centers elements along the vertical axis) min-height: 100vh (ensures the body tag takes up the entire viewport height)

    This approach offers practicality and adaptability for different screen sizes.

    Marked as helpful
    1
  • Hugo Sanchez•270
    @HunigoleSanPosted 10 months ago

    Hello @aykinsancakli ! 👋 You've done a great job, very similar to the challenge. Let me give you a tip that could help you improve your CSS logic a bit. 🛠️ You'll notice in the following line of code:

    .btn:hover { background: linear-gradient(hsl(252, 100%, 67%), hsl(241, 81%, 54%)); }

    I've noticed that you use the hover pseudo-class very effectively, which is perfect for PC devices. However, remember that on mobile devices, this can cause issues as it behaves like a fixed mode. 📱 In that case, I recommend deactivating the hover for mobile devices and using active instead. 🔍

    @media (width < 375px) { .btn:hover { background: none; /* You can set the desired background for the button in normal state */ }

            /* Mobile styles */
        .btn:active {
            background: linear-gradient(hsl(252, 100%, 67%), hsl(241, 81%, 54%));
        }
    }

    You can use this method or any other method that seems more suitable to you, the important thing is to learn a bit about those details that we must consider. 🛠️📘

    Marked as helpful
    0