Kradaxeβ’ 30
@Kradaxe
Submitted
the first responsive page !!!
Samdevtechnology
@Samdevtechnology
All comments
- Samdevtechnologyβ’ 130
@Samdevtechnology
Posted
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
@Matt971x
Submitted
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.
Samdevtechnologyβ’ 130@Samdevtechnology
Posted
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 - Dominik SieroΕβ’ 120
@CALLmeDOMIN
Submitted
Samdevtechnologyβ’ 130@Samdevtechnology
Posted
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 - Patriziaβ’ 110
@patriziadev
Submitted
Samdevtechnologyβ’ 130@Samdevtechnology
Posted
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 - Vedant Lambaβ’ 30
@vedantlamba
Submitted
Really Enjoyed Doing It!
Samdevtechnologyβ’ 130@Samdevtechnology
Posted
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 - sorayaβ’ 170
@Soraya132
Submitted
welcome to all of your feedbacks
Samdevtechnologyβ’ 130@Samdevtechnology
Posted
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 - clement.pdrβ’ 10
@MRK4
Submitted
Samdevtechnologyβ’ 130@Samdevtechnology
Posted
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 - adityapandey51β’ 10
@adityapandey51
Submitted
Samdevtechnologyβ’ 130@Samdevtechnology
Posted
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"tosrc=".\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 theimagesi.esrc=".\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 - Dachiβ’ 10
@dachi-meparishvili
Submitted
Samdevtechnologyβ’ 130@Samdevtechnology
Posted
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
