Profile Card

Community feedback

• 

  Abdul Khaliq 🚀•72,380

  @0xabdulkhaliq

  Posted over 2 years ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have some recommendations regarding your doubts that I believe will be of great interest to you.

  ---

  SUGGESTION 💡:

  • "I see the project just fine with both circles on each corner but as I uploaded them, I don't see them in the Github Pages. Don't know why. Help?", Sure i'm here to guide you.

  ---

  • Here the image path you provided need to be starts with ./ because putting ./ states that your index.html file is in the root directory. So we can quicky fix by adding the ./ infront the image src path.

  ---

  • Example: background-image: url('./images/bg-pattern-bottom.svg')

  ---

  • Note: ./ is important here, which states from the root of a folder

  ---

  HTML 🏷️:

  • This solution generates accessibility error reports, "All page content should be contained by landmarks" is due to non-semantic markup, which causes lacking of landmark for a webpage

  ---

  • So fix it by replacing the <div class="container"> element with the semantic element <main> along with <div class="attribution"> into a <footer> element in your index.html file to improve accessibility and organization of your page.

  ---

  ---

  • What is meant by landmark ?, They used to define major sections of your page instead of relying on generic elements like <div> or <span>. They are use to provide a more precise detail of the structure of our webpage to the browser or screen readers

  ---

  • 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
    • The <footer> typically contains information about the author of the section, copyright data or links to related documents.

  ---

  .

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  02

  Marked as helpful
• 

  Manish Patel•740

  @savvystrider

  Posted over 2 years ago

  Your project looks great! To get your background images to appear, you will have to make a minor modification to your CSS:

  .circle-background and .circle-background2 need a period added inside the parentheses for the url

  background-image: url('./images/bg-pattern-bottom.svg') instead of background-image: url('/images/bg-pattern-bottom.svg').

  01