Skip to content
Submitted over 2 years ago

Pricing component with toggle solution

Abdullah•340
@ASH2001prince
A solution to the Pricing component with toggle challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

All feedbacks are welcome :)

Code

Please log in to post a comment

Log in

Community feedback

  • Finney•3,010
    @Finney06

    Hello there 👋. Good job on completing the challenge !

    Here are some suggestions regarding your code that may be of interest to you.

    HTML 🏷️:

    To clear the Accessibility report:

    • Wrap the page's whole main content in the <main> tag.

    • Always avoid skipping heading levels; Starting with <h1> and working your way down the heading levels (<h2>, <h3>, etc.) helps ensure that your document has a clear and consistent hierarchy.

    • Use HTML5 semantic elements such as <header>, <nav>, <main>, <aside>, and <footer> to define these sections.

    • Use ARIA landmarks such as <header role="banner"> and <footer role="contentinfo"> to provide additional information about the purpose of each section to assistive technologies.

    Here is a web accessibility evaluation tool📕 to check your webpage for any remaining errors or warnings related to landmarks.

    I hope you find it helpful!😏 Above all, the solution you submitted is 👌. 🎉Happy coding!

    Marked as helpful
  • Vanza Setia•27,715
    @vanzasetia

    Hi, Abdullah! 👋

    I recommend showing the background patterns with CSS background properties. To be specific, I recommend making them as background images of the <body> element.

    I recommend creating the toggle button with two radio inputs. Also, make sure each radio input gets labeled. This way, the users can toggle the price by clicking the labels—annually and monthly.

    For the line, I recommend using border properties. This way, you can make the HTML simpler by removing all <hr> elements.

    I suggest making the type of the pricing heading elements, specifically <h2>. As @Finney06 has mentioned, you should not skip heading levels.

    Headings must be in a logical order. Users of assistive technology can use heading tags to navigate the website. If headings are not in a logical order, they can get confused.

    Dive deeper — How-to: Accessible heading structure - The A11Y Project

    I hope this helps. Happy coding! 😄

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