Skip to content
OverviewSolutions
14
Comments
29
Tobenna
@tobezhanabi

All comments

  • Tobenna•610
    @tobezhanabiPosted over 1 year ago

    hi Opeyemi You did a nice job. Congratulation on submitting a working task. 🎉🎉

    Here are a few suggestions to the issue with your solution.

    Work on HTML

    You should replace the <section> with the landmark <main> and <div class="attribution"> with <footer> this way your site gets accessibility. It is not important for this fragment of a site, but by making it in a habit, you can easily build crawl-able site.

    Landmarks in HTML are structural elements that define the major sections of a webpage. They include semantic elements such as <header>, <nav>, <main>, <article>, <aside>, and <footer>

    Heading

    Generally, it is a best practice to ensure that the beginning of a page's main content starts with a h1 element, and also to ensure that the page contains only one h1 element.

    You should always have h1 tag on your site, and they should follow the hierarchical order. i.e. h1> h2> h3 till h6

    Overall, you did a fantastic job,

    happy coding

    0
  • Tobenna•610
    @tobezhanabiPosted over 1 year ago

    Hi there Nice job Next time, be sure to use a level one heading for accessibility’s sake.

    Generally, it is a best practice to ensure that the beginning of a page's main content starts with a h1 element, and also to ensure that the page contains only one h1 element.

    You should always have h1 tag on your site, and they should follow the hierarchical order. i.e. h1> h2> h3 till h6

    Overall, you did a fantastic job,

    happy coding

    Marked as helpful
    0
  • Tobenna•610
    @tobezhanabiPosted over 1 year ago

    Hi, Nice job you did very well

    Work on HTML

    You should replace the <div class="card"> with the landmark <main> this way your site gets accessibility. It is not important for this fragment of a site, but by making it in a habit, you can easily build crawl-able site. Landmarks in HTML are structural elements that define the major sections of a webpage. They include semantic elements such as <header>, <nav>, <main>, <article>, <aside>, and <footer>

    Heading

    Generally, it is a best practice to ensure that the beginning of a page's main content starts with a h1 element, and also to ensure that the page contains only one h1 element.

    You should always have h1 tag on your site, and they should follow the hierarchical order. i.e. h1> h2> h3 till h6

    Overall, you did a fantastic job,

    happy coding

    Marked as helpful
    0
  • Tobenna•610
    @tobezhanabiPosted over 1 year ago

    Hi Alex, wonderful job you did here congrats I would suggest you learn to use landmark

    You should replace the <div class="content"> with the landmark <main> this way your site gets accessibility. It is not important for this fragment of a site, but by making it in a habit, you can easily build crawl-able site. Landmarks in HTML are structural elements that define the major sections of a webpage. They include semantic elements such as <header>, <nav>, <main>, <article>, <aside>, and <footer> A site is excepted to have at less one landmark

    Marked as helpful
    0
  • Tobenna•610
    @tobezhanabiPosted over 1 year ago

    Hi Abdul, You did a nice job. Congratulation on submitting a working task. 🎉🎉

    Here are a few suggestions to the issue with your solution.

    Work on HTML

    You should replace the <div class="container"> with the landmark <main> this way your site gets accessibility. It is not important for this fragment of a site, but by making it in a habit, you can easily build crawl-able site. Landmarks in HTML are structural elements that define the major sections of a webpage. They include semantic elements such as <header>, <nav>, <main>, <article>, <aside>, and <footer>

    Heading

    Generally, it is a best practice to ensure that the beginning of a page's main content starts with a h1 element, and also to ensure that the page contains only one h1 element.

    You should always have h1 tag on your site, and they should follow the hierarchical order. i.e. h1> h2> h3 till h6

    Overall, you did a fantastic job,

    happy coding

    0
  • Tobenna•610
    @tobezhanabiPosted over 1 year ago

    Hi Rahil, You did a nice job. Congratulation on submitting a working task. 🎉🎉

    Here are a few suggestions to the issue with your solution.

    Work on HTML The <div class="card"> should be replaced with the landmark <main>.

    Landmarks in HTML are structural elements that define the major sections of a webpage. They include semantic elements such as <header>, <nav>, <main>, <article>, <aside>, and <footer>

    overall you did a great job

    0
  • Eduardo Godoi da Silveira•90
    @GodoiTheCreatorSubmitted over 1 year ago

    I would like to know if it's a correct way to change between images, when I want to specify what image I'll want to use to mobile or desktop, using display: none and display: block. I couldn't be able to use something like backgound-image property because it got always a blank space. If you have any other recomendations, I'll be gratefull.

    Responsive Product Preview Card WebPage

    1
    Tobenna•610
    @tobezhanabiPosted over 1 year ago

    Hi Godoi, You did a nice job working with an API. Congratulation on submitting a working task. 🎉🎉

    Short answer yes, There is a more standard way to switch between images instead of creating a <div class= "imagem"> you could have used the default picture tag.

    <picture>
  <source media="(min-width:850px)" srcset="img_pink.jpg">
  <source media="(min-width:465px)" srcset="img_white_flower.jpg">
  <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

    You can even have 3 images for different screen size. You can use (max-width) for your own case

    Here are a few other suggestions to the issue with your solution.

    Work on HTML The landmark <div class="container"> should be replaced with <main> and also switch <div class="attribute"> with <footer>.

    Landmarks in HTML are structural elements that define the major sections of a webpage. They include semantic elements such as <header>, <nav>, <main>, <article>, <aside>, and <footer>

    Heading

    Headings must be in a valid logical order, meaning h1 through h6 element tags must appear in a sequentially-descending order.

    Hope you find this helpful

    Happy Coding😀

    Marked as helpful
    1
  • Tobenna•610
    @tobezhanabiPosted over 1 year ago

    Hi Praise, You did a nice job working with the QR design. Congratulation on submitting a working task. 🎉🎉

    Here are a few suggestions to the issue with your solution.

    Work on HTML You don't have a landmark, you should replace the <div class="qr-card card-border"> with the <main> and also replace the <div class="attribution"> with the <footer>.

    Landmarks in HTML are structural elements that define the major sections of a webpage. They include semantic elements such as <header>, <nav>, <main>, <article>, <aside>, and <footer>

    Hope you find this helpful

    Happy Coding😀

    0
  • Tobenna•610
    @tobezhanabiPosted over 1 year ago

    Hi Pavan, You did a nice job working with an API. Congratulation on submitting a working task. 🎉🎉

    Here are a few suggestions to the issue with your solution.

    Work on HTML The landmark <main class="container"> should not be a child to <section class="background" >. Landmarks in HTML are structural elements that define the major sections of a webpage. They include semantic elements such as <header>, <nav>, <main>, <article>, <aside>, and <footer>

    Heading You left the h1 tag empty, maybe you forgot to put the advice numbers there.

    Add slip.id from the API to take in the Advice's numbers and display it.

    Others

    • You should make your dice button glow when its hovered on and change the cursor to pointer... Like so:
      .circle:hover {
cursor: pointer;
box-shadow: 0px 0px 20px 0px rgba(82, 255, 168, 1);
}

    Hope you find this helpful

    Happy Coding😀

    0
  • Tobenna•610
    @tobezhanabiPosted 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 due to non-semantic markup, which lack landmark for a webpage

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

    What is landmark ?, They 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

    HEADINGS ⚠️:

    This solution also generated accessibility error report due to lack of level-one heading <h1> Every site must want at least one h1 element identifying and describing the main content of the page.

    An h1 heading provides an important navigation point for users of assistive technologies, allowing them to easily find the main content of the page.

    So we want to add a level-one heading to improve accessibility by reading aloud the heading by screen readers, you can achieve this by adding a sr-only class to hide it from visual users (it will be useful for visually impaired users) I hope you find it helpful ! 😄 Above all, the solution you submitted is great

    Happy coding!

    1
  • Tobenna•610
    @tobezhanabiPosted 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 due to non-semantic markup, which lack landmark for a webpage

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

    What is landmark? They 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.

    HEADINGS ⚠️:

    This solution also generated accessibility error report due to lack of level-one heading <h1> Every site must want at least one h1 element identifying and describing the main content of the page.

    An h1 heading provides an important navigation point for users of assistive technologies, allowing them to easily find the main content of the page.

    So we want to add a level-one heading to improve accessibility by reading aloud the heading by screen readers, you can achieve this by adding a sr-only class to hide it from visual users (it will be useful for visually impaired users).

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

    Happy coding!

    Marked as helpful
    1
  • Tobenna•610
    @tobezhanabiPosted 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 due to non-semantic markup, which lack landmark for a webpage

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

    What is landmark? They 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

    Image⚠️:

    It is necessary that you master putting alt attribute into your img tags. This helps with Google crawler and screen reader, therefore increasing your site accessibility

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

    Happy coding!

    1