Skip to content
OverviewSolutions
3
Comments
9
Samdevtechnology
@Samdevtechnology

All comments

  • Samdevtechnologyβ€’130
    @SamdevtechnologyPosted over 1 year ago

    Hi. Congratulations on a job well done! πŸŽ‰ πŸŽ‰ πŸŽ‰

    I would like to make some suggestions concerning your code that might be of help.

    --- This webpage generate an "All page content should be contained by landmarks" error. ---

    • This is caused by lack of landmarks for a webpage.
    • Landmarks can be added to a webpage via semantic elements.

    landmarks ? are use to provide a more precise detail of the structure of our webpage to the browser or screen readers. We make use of sematic elements to provide landmarks to our webpage example includes <main>, <aside>, <footer>, etc., instead of relying on generic elements like <div> or <span>.

    • Every webpage should contain one <main> element and it should include all content directly related to the page's main idea, there should only be one per webpage

    You can fix this on this webpage by replacing the <div class="header"> element with the semantic element <main> along with <div class="result"> and <div class="summary"> into a <section> element in your index.html file

    • A <main> element to wrap all content of the component. and a <section> element to wrap each section of the component.

    Well done for completing this challenge πŸ‘

    I hope have been of help, Please feel free to ask any question

    Happy Coding πŸŽ‰

    1
  • Matthieuβ€’180
    @Matt971xSubmitted over 1 year ago

    Hi ! i'm new to coding so i tried my best to complete this challenge. Everything is kinda hard for the moment So ! Feel free to leave me a comment and give me some tips and tricks.

    QR code component challenge (HTML/CSS)

    1
    Samdevtechnologyβ€’130
    @SamdevtechnologyPosted over 1 year ago

    Hello there πŸ‘‹. Congratulations on a job well done! πŸŽ‰ πŸŽ‰ πŸŽ‰

    • I would like to make some suggestions concerning your code that might be of help.

    HTML 🏷️:

    • This solution generates accessibility error report: "All page content should be contained by landmarks". This is due to a non-semantic markup, which causes a lack of landmark for a webpage.
    • So fix this by replacing the <div class="qr-code-container"> element with the semantic element <main> along with <div class="attribution"> into a <footer> element in your index.html file.
    • What is meant by landmark ?: They are use to provide a more precise detail of the structure of our webpage to the browser or screen readers. We make use of sematic elements to provide landmarks to our webpage example includes <main>, <aside>, <footer>, etc., instead of relying on generic elements like <div> or <span>.

    HEADINGS ⚠️:

    • This solution generated accessibility error report: Page should contain a level-one heading. This is due to the lack of a level-one heading <h1>.
    • Headings provide structure to a webpage. It helps Search engines and Users to determine the most important piece of texts in a webpage.
    • Every webpage must have at least one h1 element identifying and describing the main content(text) of the page.
    • Would recommend to change the <h3> to a <h1>, As it the main heading in the page.

    CSS 🎨:

    In the Design Just the Outfit font is used for all text. to achieve this in your code add font-family: 'Outfit' to the body selector and remove the font-family style from the h3 and the p selector.

    body {
  font-family: 'Outfit';
}
    Marked as helpful
    0
  • Samdevtechnologyβ€’130
    @SamdevtechnologyPosted over 1 year ago

    Hello there πŸ‘‹. Congratulations on a job well done! πŸŽ‰ πŸŽ‰ πŸŽ‰

    • I would like to make some suggestions concerning your code that might be of help.

    HEADINGS ⚠️:

    • This solution generated accessibility error report: Page should contain a level-one heading. This is due to the lack of a level-one heading <h1>.
    • Headings provide structure to a webpage. It helps Search engines and Users to determine the most important piece of texts in a webpage.
    • Every webpage must have at least one h1 element identifying and describing the main content(text) of the page.
    • Would recommend you change <div class="...text-center text-dB"> to a <h1> element and the <div class="...text-center text-gB"> to a <p> element.

    HTML 🏷️:

    • This solution generates accessibility error report: "All page content should be contained by landmarks". This is due to a non-semantic markup, which causes a lack of landmark for a webpage.
    • So fix this by replacing the <div class="font-outfit m-0 bg-lG"> element with the semantic element <main> along with <div class="attribution"> into a <footer> element in your index.html file.
    • What is meant by landmark ?: They are use to provide a more precise detail of the structure of our webpage to the browser or screen readers. We make use of sematic elements to provide landmarks to our webpage example includes <main>, <aside>, <footer>, etc., instead of relying on generic elements like <div> or <span>.

    Well done for completing this challenge πŸ‘

    I hope have been of help, Please feel free to ask any question

    Happy Coding πŸŽ‰

    Marked as helpful
    1
  • Samdevtechnologyβ€’130
    @SamdevtechnologyPosted over 1 year ago

    Hello there πŸ‘‹. Congratulations on a job well done! πŸŽ‰ πŸŽ‰ πŸŽ‰

    • I would like to make some suggestions concerning your code that might be of help.

    HTML 🏷️:

    • This solution generates accessibility error report: "All page content should be contained by landmarks". This is due to a non-semantic markup, which causes a lack of landmark for a webpage.
    • So fix this by replacing the <div class="wrapper"> element with the semantic element <main> along with <div class="attribution"> into a <footer> element in your index.html file.
    • What is meant by landmark ?: They are use to provide a more precise detail of the structure of our webpage to the browser or screen readers. We make use of sematic elements to provide landmarks to our webpage example includes <main>, <aside>, <footer>, etc., instead of relying on generic elements like <div> or <span>.

    Recommendation

    • Instead of leaving this link empty <a href="">Zabol</a>. Why not link to your favorite social media handle or to your frontend mentor profile page.

    Well done for completing this challenge πŸ‘

    I hope have been of help, Please feel free to ask any question

    Happy Coding πŸŽ‰

    Marked as helpful
    0
  • Samdevtechnologyβ€’130
    @SamdevtechnologyPosted over 1 year ago

    Hello there πŸ‘‹. Congratulations on a job well done! πŸŽ‰ πŸŽ‰ πŸŽ‰

    • I would like to make some suggestions concerning your code that might be of help.

    HEADINGS ⚠️:

    • This solution generates accessibility error report: Heading levels should only increase by one". This is because headings must be in a sequentially-descending order to be correct logically.
    • This webpage contains an <h1>, <h3>, <h4>. It is missing an <h2>. For a more easy accessibility would recommend you change your <h3> tags to <h2> tags and <h4> tags to <h3> tags.

    HTML 🏷️:

    • This solution generates accessibility error report: "All page content should be contained by landmarks". This is due to a non-semantic markup, which causes a lack of landmark for a webpage.
    • So fix this by replacing the <div class="container"> element with the semantic element <main> along with <div class="header"> into a <header> element also the <div class="navBar"> into a <nav> element also the <div class="main"> into a <section> element in your index.html file.
    • What is meant by landmark ?: They are use to provide a more precise detail of the structure of our webpage to the browser or screen readers. We make use of sematic elements to provide landmarks to our webpage example includes <main>, <aside>, <footer>, etc., instead of relying on generic elements like <div> or <span>.

    I hope have been of help, Please feel free to ask any question

    Happy Coding πŸŽ‰

    Marked as helpful
    0
  • Samdevtechnologyβ€’130
    @SamdevtechnologyPosted over 1 year ago

    Hello there πŸ‘‹. Congratulations on job well done! πŸŽ‰ πŸŽ‰ πŸŽ‰

    • I would like to make some suggestions concerning your code that might be of help.

    HTML 🏷️:

    • This solution generates accessibility error report: "All page content should be contained by landmarks". This is due to a non-semantic markup, which causes a lack of landmark for a webpage.
    • So fix this by replacing the <section class="container"> element with the semantic element <main> along with <div class="avatar"> into a <footer> element in your index.html file. You can also change the <div class="col-1"> and <div class="col-2"> to a <section> as they are both sections in the main component.
    • What is meant by landmark ?: They are use to provide a more precise detail of the structure of our webpage to the browser or screen readers. We make use of sematic elements to provide landmarks to our webpage example includes <main>, <aside>, <footer>, etc., instead of relying on generic elements like <div> or <span>.
    • Every webpage should contain one <main> element and it should include all content directly related to the page's main idea, there should only be one per webpage.

    HEADINGS ⚠️:

    • This solution generated accessibility error report: Page should contain a level-one heading. This is due to the lack of a level-one heading <h1>.
    • Headings provide structure to a webpage. It helps Search engines and Users to determine the most important piece of texts in a webpage.
    • Every webpage must have at least one h1 element identifying and describing the main content(text) of the page.
    • recommend you change your <h3> to an <h1> as it the main heading in the webpage

    Well done for completing this challenge πŸ‘

    I hope have been of help, Please feel free to ask any question

    Happy Coding πŸŽ‰

    0
  • Samdevtechnologyβ€’130
    @SamdevtechnologyPosted over 1 year ago

    Hello there πŸ‘‹. Congratulations on job well done! πŸŽ‰ πŸŽ‰ πŸŽ‰

    • I would like to make some suggestions concerning your code that might be of help.

    HTML 🏷️:

    • This solution generates accessibility error report: "All page content should be contained by landmarks". This is due to a non-semantic markup, which causes a lack of landmark for a webpage.
    • So fix this by replacing the <div class="p-4 flex ..."> element with the semantic element <main> along with <div class="... attribution"> into a <footer> element in your index.html file.
    • What is meant by landmark ?: They are use to provide a more precise detail of the structure of our webpage to the browser or screen readers. We make use of sematic elements to provide landmarks to our webpage example includes <main>, <aside>, <footer>, etc., instead of relying on generic elements like <div> or <span>.
    • Every webpage should contain one <main> element and it should include all content directly related to the page's main idea, there should only be one per webpage.

    Well done for completing this challenge πŸ‘

    I hope have been of help, Please feel free to ask any question

    Happy Coding πŸŽ‰

    1
  • Samdevtechnologyβ€’130
    @SamdevtechnologyPosted over 1 year ago

    Hello there πŸ‘‹. Congratulations on job well done! πŸŽ‰ πŸŽ‰ πŸŽ‰

    • I would like to make some suggestions concerning your code that I might be of help.

    HEADINGS ⚠️:

    • This solution generated accessibility error report: Page should contain a level-one heading. This is due to the lack of a level-one heading <h1>.

    *Headings provide structure to a webpage. It helps Search engines and Users to determine the most important piece of texts in a webpage.

    • Every webpage must have at least one h1 element identifying and describing the main content(text) of the page.

    • Headings in a webpage should only increase or decrease by one. your webpage contains a <h4> and a <h6> elements (elements decrease by 2). **Would recommend you change the <h4> to an <h1> Cause that's the main heading of the page, and the <h6> to a <p> cause its just the description of the component and not a heading.

    HTML 🏷️:

    • This solution generates accessibility error report: "All page content should be contained by landmarks". This is due to a non-semantic markup, which causes a lack of landmark for a webpage.
    • So fix this 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.

    • What is meant by landmark ?: They are use to provide a more precise detail of the structure of our webpage to the browser or screen readers. We make use of sematic elements to provide landmarks to our webpage example includes <main>, <aside>, <footer>, etc., instead of relying on generic elements like <div> or <span>.

    • Every webpage should contain one <main> element and it should include all content directly related to the page's main idea, there should only be one per webpage.

    Image ⚠️:

    • This solution generated HTML validation report: Bad Image value.
    • to correctly display your image in the browser change the src from src="images\image-qr-code.png" to src=".\image-qr-code.png"
    • I would recommend you to create an image folder in your project and move the image to the folder and the add .\ Infront of the images i.e src=".\images\image-qr-code.png"

    Well done for completing this challenge πŸ‘

    I hope have been of help, Please feel free to ask any question

    Happy Coding πŸŽ‰

    Marked as helpful
    0
  • Samdevtechnologyβ€’130
    @SamdevtechnologyPosted over 1 year ago

    Hello there πŸ‘‹. Congratulations on job well done! πŸŽ‰ πŸŽ‰ πŸŽ‰

    • I would like to make some suggestions concerning your code that I might be of help.

    HTML 🏷️:

    • This solution generates accessibility error report: "All page content should be contained by landmarks". This is due to a non-semantic markup, which causes a lack of landmark for a webpage.
    • So fix this 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.
    • What is meant by landmark ?: They are use to provide a more precise detail of the structure of our webpage to the browser or screen readers. We make use of sematic elements to provide landmarks to our webpage example includes <main>, <aside>, <footer>, etc., instead of relying on generic elements like <div> or <span>.
    • Every webpage should contain one <main> element and it should include all content directly related to the page's main idea, there should only be one per webpage.

    HEADINGS ⚠️:

    • This solution generated accessibility error report: Page should contain a level-one heading. This is due to the lack of a level-one heading <h1>.
    • Headings provide structure to a webpage. It helps Search engines and Users to determine the most important piece of texts in a webpage.
    • Every webpage must have at least one h1 element identifying and describing the main content(text) of the page.

    Well done for completing this challenge πŸ‘

    I hope have been of help, Please feel free to ask any question

    Happy Coding πŸŽ‰

    0