Skip to content
OverviewSolutions
8
Comments
13

Hugo Sanchez

@HunigoleSanPerú270 points

Hola, soy Hugo. Me especializo en desarrollo front-end y diseño UX/UI, con interés en el desarrollo back-end. Mi objetivo es ser un desarrollador full-stack

I’m currently learning...

CSS, Javascript, PHP, Mysql

Latest solutions

View more solutions

Latest comments

  • Hugo Sanchez•270
    @HunigoleSan

    👋 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! 🚀

  • Hugo Sanchez•270
    @HunigoleSan

    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. 🌟

  • Hugo Sanchez•270
    @HunigoleSan

    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
  • Hugo Sanchez•270
    @HunigoleSan

    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
  • Hugo Sanchez•270
    @HunigoleSan

    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! 🌟

  • Hugo Sanchez•270
    @HunigoleSan

    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
View more comments