Skip to content
OverviewSolutions
81
Comments
27

Carlos Damian Perez

@caarlosdamianGuadalajara1,930 points

Hi, I'm a front-end engineer with a focus on building user interfaces using React.js. I have a strong understanding of component-based design and am proficient in using React also skilled in JavaScript, HTML, and CSS,SCSS,Typescript.

I’m currently learning...

Advance React Topics Node js

Latest solutions

View more solutions

Latest comments

  • Carlos Damian Perez•1,930
    @caarlosdamian

    Great job on your project! Your effort in implementing this functionality using plain JavaScript is commendable and showcases your programming skills. It's evident that you've put thought and dedication into making it work seamlessly.

    However, I noticed that your API keys are visible in the repository. While I appreciate your transparency and openness in sharing your code, it's crucial to prioritize security. Exposing API keys in a public repository can pose a significant risk. I recommend considering a more secure approach, such as using a .env file to store sensitive information like API keys. This way, you can keep your credentials confidential and avoid any potential security issues.

    Incorporating best practices for handling sensitive information will not only enhance the security of your project but also demonstrate your commitment to producing robust and reliable code. It's a good habit to develop early on in your coding journey.

    Once again, kudos on your achievements so far! Your willingness to learn and improve is evident, and I look forward to seeing more of your impressive work in the future. Keep up the excellent work and happy coding!

    Marked as helpful
  • Carlos Damian Perez•1,930
    @caarlosdamian

    Congratulations on completing the challenge! 🎉 I have some recommendations for your code that I think you will find useful.

    First, let's talk about HTML 🏷. Your solution currently generates accessibility error reports, and one of the issues is that "All page content should be contained by landmarks" due to non-semantic markup. To improve the accessibility and organization of your page, I suggest wrapping the entire content (which includes multiple section elements) with the semantic element <main> in your index.html file.

    You may be wondering, what is meant by a landmark? Landmarks are used to define major sections of your page instead of relying on generic elements like <div> or <span> . They convey the structure of your page. For example, the <main> element should include all content directly related to the page's main idea, so there should only be one per page.

    You can check more info about landmarks in the next link landmarks

    I hope you find this helpful 😊 Your solution is great, and I wish you all the best in your coding journey!

    Happy coding! 🚀

  • Carlos Damian Perez•1,930
    @caarlosdamian

    Congratulations on completing the challenge! 🎉 I have some recommendations for your code that I think you will find useful.

    First, let's talk about HTML 🏷. Your solution currently generates accessibility error reports, and one of the issues is that "All page content should be contained by landmarks" due to non-semantic markup. To improve the accessibility and organization of your page, I suggest wrapping the entire content (which includes multiple section elements) with the semantic element <main> in your index.html file.

    You may be wondering, what is meant by a landmark? Landmarks are used to define major sections of your page instead of relying on generic elements like <div> or <span> . They convey the structure of your page. For example, the <main> element should include all content directly related to the page's main idea, so there should only be one per page.

    You can check more info about landmarks in the next link landmarks

    The issue "Images must have alternate text" is related to web accessibility guidelines. Specifically, it's related to the Web Content Accessibility Guidelines (WCAG), which are a set of guidelines designed to make web content more accessible to people with disabilities.

    To fix this issue, you should add an alt attribute to the <img> element and provide a brief, descriptive text alternative that conveys the purpose of the image.

    I hope you find this helpful 😊 Your solution is great, and I wish you all the best in your coding journey!

    Happy coding! 🚀

    Marked as helpful
  • Carlos Damian Perez•1,930
    @caarlosdamian

    Congratulations on completing the challenge! 🎉 I have some recommendations for your code that I think you will find useful.

    First, let's talk about HTML 🏷. Your solution currently generates accessibility error reports, and one of the issues is that "All page content should be contained by landmarks" due to non-semantic markup. To improve the accessibility and organization of your page, I suggest wrapping the entire content (which includes multiple section elements) with the semantic element <main> in your index.html file.

    You may be wondering, what is meant by a landmark? Landmarks are used to define major sections of your page instead of relying on generic elements like <div> or <span> . They convey the structure of your page. For example, the <main> element should include all content directly related to the page's main idea, so there should only be one per page.

    You can check more info about landmarks in the next link landmarks

    I hope you find this helpful 😊 Your solution is great, and I wish you all the best in your coding journey!

    Happy coding! 🚀

  • Carlos Damian Perez•1,930
    @caarlosdamian

    Congratulations on completing the challenge! 🎉 I have some recommendations for your code that I think you will find useful.

    Why don't two divs fit inside a parent div when I set their widths to 50%? When you use position: absolute, the child div is taken out of the normal document flow and positioned relative to the nearest positioned ancestor. This means that it is disengaged from the parent div's width, and will no longer take up space within it. As a result, even if you set the width of the second div to 50%, it will take up all the available width because it is the only child div in the parent.

    To visualize this, you can think of the parent div as having only one child div that is positioned absolutely. In this case, the child div would take up all the available space within the parent div, just like the second div does when it is positioned absolutely.

    How do I use the weights in the style guide? You can use CSS_CustomProperties and create classes with similar properties and shared across necessary items.

    Is it better to use position or margin to position elements?

    margin is used to create space around an element, either inside or outside its border, and can be used to position elements relative to their containing block. It is generally recommended to use margins for simple layout adjustments and positioning, such as adding space between elements or centering an element within its parent container. Margins do not affect the layout of other elements, and are often used to create white space or breathing room in the design.

    position is used to position an element relative to its containing block, or relative to the viewport. There are several values for the position property, including static, relative, absolute, fixed, and sticky. Using position: absolute or position: fixed allows an element to be taken out of the normal document flow, and positioned precisely anywhere on the page, even overlapping other elements. This is often useful for creating complex layouts, such as overlays, modals, or fixed navigation bars.

    In general, it's recommended to use margins for simple layout adjustments, and use positioning when more complex layout needs arise.

    I hope you find this helpful 😊 Your solution is great, and I wish you all the best in your coding journey!

  • Carlos Damian Perez•1,930
    @caarlosdamian

    Congratulations on completing the challenge! 🎉 I have some recommendations for your code that I think you will find useful.

    Let's talk about HTML 🏷. Your solution currently generates accessibility error reports, and one of the issues is that Buttons must have discernible text Typically appears when a button element in HTML does not have text or has text that is not meaningful or understandable to users.

    Buttons are an important interactive element on web pages, and they should be designed in a way that allows users to understand their purpose and function without relying solely on visual cues. Providing meaningful and descriptive text on buttons is one way to achieve this goal.

    More info Buttons

    I hope you find this helpful 😊 Your solution is great, and I wish you all the best in your coding journey!

View more comments