Skip to content
OverviewSolutions
79
Comments
28
Carlos Damian Perez
@caarlosdamian

All comments

  • Carlos Damian Perez•1,890
    @caarlosdamianPosted 11 months ago

    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
    2
  • Carlos Damian Perez•1,890
    @caarlosdamianPosted over 1 year ago

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

    1
  • Kem De Guzman•210
    @kememesssSubmitted over 1 year ago

    Hi there! I’m Kem and this is my solution for this challenge.

    Any suggestions on how I can improve and reduce unnecessary code are welcome! Thank you.

    testimonials-grid-section-main

    1
    Carlos Damian Perez•1,890
    @caarlosdamianPosted over 1 year ago

    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
    1
  • Allan Martinez•200
    @allmtzSubmitted over 1 year ago

    Hello everyone, here is my solution to the Pomodoro timer.

    I turned it into a full-stack app that uses Firebase for authentication and Firestore for the database. I added a task tracking feature the lets you create tasks and track how many Pomodoros you've spent on each task. I'd appreciate any feedback and suggestions for improvements!

    Fullstack Pomodoro App. Firestore + React + Tailwind + Typescript

    1
    Carlos Damian Perez•1,890
    @caarlosdamianPosted over 1 year ago

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

    1
  • daniel-howorth•130
    @daniel-howorthSubmitted over 1 year ago

    Help! Lots of questions arose when completing this challenge!

    1. Why don't two divs fit inside a parent div when I set their widths to 50%? I thought they would both take up half the space and fit side-by-side but they didn't. Instead, one would wrap.

    2. I have a main card with a left pane and a right pane. I set the position of one

    pane div to absolute, thinking it would overlap the other as it had been taken out of the main flow of the page, but it didn't. Why is this?

    1. How do I use the weights in the style guide?

    2. Am I using too many classes to style individual elements? Any feedback/advice on how to avoid this? How do I fine tune elements without creating too many classes?

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

    Any other feedback is welcome and appreciated!

    Results Summary using Flexbox and Barebones CSS

    1
    Carlos Damian Perez•1,890
    @caarlosdamianPosted over 1 year ago

    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!

    1
  • Carlos Damian Perez•1,890
    @caarlosdamianPosted over 1 year ago

    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!

    0
  • Kamilek•170
    @KamilbdSubmitted over 1 year ago

    I would like to know how I can change the fill in svg because when I was looking for an answer, it popped up that it is not possible either through the css filler. Such beginnings are generally acceptable?

    article-preview-component-master

    2
    Carlos Damian Perez•1,890
    @caarlosdamianPosted over 1 year ago

    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!

    Marked as helpful
    0
  • Carlos Damian Perez•1,890
    @caarlosdamianPosted over 1 year ago

    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 <html> element must have a lang attribute

    The "lang" attribute in HTML specifies the language of the document. It is important for search engines and screen readers to accurately interpret and display the content.

    It is recommended to include the "lang" attribute in the HTML element of every web page, even if the language is English. This helps ensure that the page is accessible to a wider audience, including those who rely on assistive technology or machine translation.

    More info LangTag

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

    Marked as helpful
    0
  • Carlos Damian Perez•1,890
    @caarlosdamianPosted over 1 year ago

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

    0
  • Carlos Damian Perez•1,890
    @caarlosdamianPosted over 1 year ago

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

    0
  • Carlos Damian Perez•1,890
    @caarlosdamianPosted over 1 year ago

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

    0
  • Jhef•140
    @imjheefSubmitted over 1 year ago
    • Which areas of your code are you unsure of?

    The layout of the page and the media query

    • What did you find difficult while building the project?

    Working with the <img> and styling and @media query

    Responsive Product card

    1
    Carlos Damian Perez•1,890
    @caarlosdamianPosted over 1 year ago

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

    I did notice some overflowing within screens below 375px but pretty much well done awesome work, very clean coding love you use css variables keep it going. maybe adding some padding to the card will fix it. always test your apps under 320px minim screen width since some people may have lower screens.

    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
    0