Skip to content
Submitted over 1 year ago

Advice generator - solution

pabarcag•210
@pabarcag
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Advice generator app
  • HTML
  • CSS
  • JS
  • API
2junior

Design comparison

SolutionDesign

Solution retrospective

Hello, any advice on how to improve is welcome! Especially when it comes to error handling

Community feedback

  • visualdennis•8,375
    @visualdennissPosted over 1 year ago

    Hello there,

    Congrats on completing the challenge successfully! your work seems great overall. I do have a suggestion regarding best practice and semantic HTML, which is important for accessibility but also for Search Engines (SEO).

    In your App, you have used <p> tag for the "Advice Id" and <h1> for the 'advice paragraph'. However the advice content should be a <p> instead of <h1> as it is not a title but a text content of paragraph. Heading tags should not be mistaken or used for determining font-sizes. Similarly the top title (e.g. "advice #166) more likely to be a heading than a <p> as it is the descriptive title of the whole section.

    Hope you find this feedback helpful!

    Marked as helpful
    0
  • C H A R A N 🎯•2,670
    @0xabdulPosted over 1 year ago

    Hi Patosinsuerte we'll congratulations on completing the Advice generator app it's so nice 🙂 but some Accessibility reports occurred A Few Feedback for improve your code and clear the issue

    IN HTML 📂 :

    L A N D M A R K 🚀

    • The main landmark should be a top-level landmark. When a page contains nested document and/or application roles (e.g. typically through the use of iframe and frame elements), each document or application role may have one main landmark. If a page includes more than one main landmark, each should have a unique label.
    • To Clear the Accessibility reports use the Semantic elements Or non - Semantic elements
    • Note This Elements are don't sikp
    • semantic elements : <aside> , <artical> , <main>, <header> ,<section><footer>, <form> ect..
    • non- semantic elements : <div> , <span> ect ...
    • for easy way to clear the Accessibility reports using non semantic elements Ex :
    <body>
<div class="container" role="main">
// All html code goes here : 📃
</div>
</body>
    • Or
    • using semantic elements
    • Ex :
    <header>
should be put heading or logo📸
</header>
<nav>
//Links here
</nav>
<main>
Main of the contents 📃
</main>
<footer>
©copy right  here📍
</footer>

    I Hope it's useful comment for you and Happy Coding 🤩

    Marked as helpful
    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord