@MikeProduceSubmitted over 1 year ago
Took me around 2 hours to finish this. I think it looks okay, could definitely use some work on anything under 375. Used mobile first development and with just regular html and css
DrainGK
@DrainGKAll comments
- @DrainGKPosted over 1 year ago
Some recommendations regarding your code that could be of interest to you. 🤗
In order to fix the accessibility issues
You need to replace <div class="container"> with the <main> tag. You'd better use Semantic HTML, and you can also reach more information about it from [Using Semantic HTML Tags Correctly] Each main content needs to start with an h1 element, and also contain only one h1 element. Your accessibility report states the need for one main landmark. So, you need to use a <h1> element in the <main> tag instead of using the <h2> element. You can replace the <h2>Improve your front-end skills by building projects</h2> element with the <h1>Improve your front-end skills by building projects</h1> element. Hope I am helpful. :)
Marked as helpful2 - @wajeeNPCSubmitted over 1 year ago
Another project on html & css , Used many peoples responeses to early websites to make the html and css code more efficient, please let me know if there's anything more to improve on Thank you😉.
@DrainGKPosted over 1 year agoSome recommendations regarding your code that could be of interest to you. 🤗
In order to fix the accessibility issues
You need to replace <div class="container"> with the <main> tag. You'd better use Semantic HTML, and you can also reach more information about it from [Using Semantic HTML Tags Correctly] Each main content needs to start with an h1 element, and also contain only one h1 element. Your accessibility report states the need for one main landmark. So, you need to use a <h1> element in the <main> tag instead of using the <h2> element. You can replace the <h2>Improve your front-end skills by building projects</h2> element with the <h1>Improve your front-end skills by building projects</h1> element. Hope I am helpful. :)
Marked as helpful1 - @lttlsunshnSubmitted over 1 year ago@DrainGKPosted over 1 year ago
Well done!
I cannot see the difference, you must have hawk eyes. Liking and saving your solutions congratulations
ps: Order the rest of the comments, otherwise it was too short x)
Some recommendations regarding your code that could be of interest to you. 🤗
In order to fix the accessibility issues
You need to replace <div class="container"> with the <main> tag. You'd better use Semantic HTML, and you can also reach more information about it from [Using Semantic HTML Tags Correctly] Each main content needs to start with an h1 element, and also contain only one h1 element. Your accessibility report states the need for one main landmark. So, you need to use a <h1> element in the <main> tag instead of using the <h2> element. You can replace the <h2>Improve your front-end skills by building projects</h2> element with the <h1>Improve your front-end skills by building projects</h1> element. Hope I am helpful. :)
1 - @hannyfishSubmitted over 1 year ago@DrainGKPosted over 1 year ago
Some recommendations regarding your code that could be of interest to you. 🤗
In order to fix the accessibility issues
You need to replace <div class="container"> with the <main> tag. You'd better use Semantic HTML, and you can also reach more information about it from [Using Semantic HTML Tags Correctly] Each main content needs to start with an h1 element, and also contain only one h1 element. Your accessibility report states the need for one main landmark. So, you need to use a <h1> element in the <main> tag instead of using the <h2> element. You can replace the <h2>Improve your front-end skills by building projects</h2> element with the <h1>Improve your front-end skills by building projects</h1> element.
over all try to put your components in parent <div> then you can add a display flex property to center the child <div> Hope I am helpful. :)
Marked as helpful1 - @gb0yeSubmitted over 1 year ago
Making it responsive was fun, overall the challenge was easy and i didn't make so many mistakes. Feedback on my code is much appreciated
@DrainGKPosted over 1 year agoSome recommendations regarding your code that could be of interest to you. 🤗
In order to fix the accessibility issues
You need to replace <div class="container"> with the <main> tag. You'd better use Semantic HTML, and you can also reach more information about it from [Using Semantic HTML Tags Correctly] Each main content needs to start with an h1 element, and also contain only one h1 element. Your accessibility report states the need for one main landmark. So, you need to use a <h1> element in the <main> tag instead of using the <h2> element. You can replace the <h2>Improve your front-end skills by building projects</h2> element with the <h1>Improve your front-end skills by building projects</h1> element. Hope I am helpful. :)
1 - @omarmazinSubmitted over 1 year ago@DrainGKPosted over 1 year ago
Some recommendations regarding your code that could be of interest to you. 🤗
In order to fix the accessibility issues
You need to replace <div class="container"> with the <main> tag. You'd better use Semantic HTML, and you can also reach more information about it from [Using Semantic HTML Tags Correctly] Each main content needs to start with an h1 element, and also contain only one h1 element. Your accessibility report states the need for one main landmark. So, you need to use a <h1> element in the <main> tag instead of using the <h2> element. You can replace the <h2>Improve your front-end skills by building projects</h2> element with the <h1>Improve your front-end skills by building projects</h1> element. Hope I am helpful. :)
Marked as helpful1 - @GuyLebonSubmitted over 1 year ago@DrainGKPosted over 1 year ago
Hello there 👋. Congratulations on successfully completing the challenge! 🎉
I have other recommendations regarding your code that I believe will be of great interest to you. HTML 🏷️:
This solution generates accessibility error reports, "All page content should be contained by landmarks" is due to incorrect usage of semantic markup, which causes lacking of landmark for a webpage So fix it by replacing the wrapper <div class="container"> element with the semantic element <main> 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. .
In the overall, your project is really good. You can follow the style-guide to be more accurate and being carfull of the margin.
I LIKED your challenges, please feel free to visit my solution
I hope you find this helpful 😄 Above all, the solution you submitted is great !
Happy coding!
Marked as helpful1 - @RalfiSlaskSubmitted over 1 year ago@DrainGKPosted over 1 year ago
Hello there 👋. Congratulations on successfully completing the challenge! 🎉
I have other recommendations regarding your code that I believe will be of great interest to you. HTML 🏷️:
This solution generates accessibility error reports, "All page content should be contained by landmarks" is due to incorrect usage of semantic markup, which causes lacking of landmark for a webpage So fix it by replacing the wrapper <div class="container"> element with the semantic element <main> 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. .
In the overall, your project is really good. You can follow the style-guide to be more accurate and being carfull of the margin.
I LIKED your challenges, please feel free to visit my solution
I hope you find this helpful 😄 Above all, the solution you submitted is great !
Happy coding!
Marked as helpful2 - @Chandima-RSubmitted over 1 year ago@DrainGKPosted over 1 year ago
Hello there 👋. Congratulations on successfully completing the challenge! 🎉
I have other recommendations regarding your code that I believe will be of great interest to you. HTML 🏷️:
This solution generates accessibility error reports, "All page content should be contained by landmarks" is due to incorrect usage of semantic markup, which causes lacking of landmark for a webpage So fix it by replacing the wrapper <div class="container"> element with the semantic element <main> 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. .
In the overall, your project is really good. You can follow the style-guide to be more accurate and being carfull of the margin.
for the image you can use a section "left-container" with a background-size cover and bacground-position center.
I LIKED your challenges, please feel free to visit my solution
I hope you find this helpful 😄 Above all, the solution you submitted is great !
Happy coding!
1 - @shuvrojitSubmitted over 1 year ago
I would love to get any feedback. Thank You.
@DrainGKPosted over 1 year agoHello there 👋. Congratulations on successfully completing the challenge! 🎉
I have other recommendations regarding your code that I believe will be of great interest to you. HTML 🏷️:
This solution generates accessibility error reports, "All page content should be contained by landmarks" is due to incorrect usage of semantic markup, which causes lacking of landmark for a webpage So fix it by replacing the wrapper <div class="container"> element with the semantic element <main> 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. .
In the overall, your project is really good. You can follow the style-guide to be more accurate and being carfull of the margin.
I LIKED your challenges, please feel free to visit my solution
I hope you find this helpful 😄 Above all, the solution you submitted is great !
Happy coding!
1 - @Romany-RefaatSubmitted over 1 year ago@DrainGKPosted over 1 year ago
Hello there 👋. Congratulations on successfully completing the challenge! 🎉
I have other recommendations regarding your code that I believe will be of great interest to you. HTML 🏷️:
This solution generates accessibility error reports, "All page content should be contained by landmarks" is due to incorrect usage of semantic markup, which causes lacking of landmark for a webpage So fix it by replacing the wrapper <div class="container"> element with the semantic element <main> 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!
2 - @xyrlanSubmitted over 1 year ago@DrainGKPosted over 1 year ago
Hello there 👋. Congratulations on successfully completing the challenge! 🎉
I have other recommendations regarding your code that I believe will be of great interest to you. HTML 🏷️:
This solution generates accessibility error reports, "All page content should be contained by landmarks" is due to incorrect usage of semantic markup, which causes lacking of landmark for a webpage So fix it by replacing the wrapper <div class="container"> element with the semantic element <main> 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!
Marked as helpful1
