Single price grid component with Flexbox

Community feedback

• 

  Zienab Mohammed Abdelmonaem•400

  @zenab12Posted over 2 years ago

  Hey, You did amazing work congratulations for completing this challenge

  to fix accessibility issues and make code more readable :

  • use main and wrap inside it div.container so all page content should be contained by landmarks

  • Go down orderly when you are using the headings <h1> down to <h2> down to <h3> and so on . so remove div.donji as the browser can see the ordering of heading an instead it you can use this to use semantic tags and classes name to make code more readable

  <main>
        <header>
          <h1>  Join our community </h1>
          <h2>  30-day, hassle-free money back guarantee </h2>
          <p> 
            Gain access to our full library of tutorials along with expert code reviews. 
            Perfect for any developers who are serious about honing their skills. 
          </p>
        </header>
          <div class="price">
             <h3> Monthly Subscription </h3>
            <p>  $29  <span>per month</span></p>
            <p>  Full access for less than $1 a day</p>
            <button class="register">   Sign Up </button>
          </div>
  
          <div class="whyus">
             <h3>  Why Us </h3>
             <ul>
               
                 <li>  Tutorials by industry experts </li>
                 <li>  Peer & expert code review </li>
                 <li>  Coding exercises </li>
                 <li>  Access to our GitHub repos </li>
                 <li>  Community forum </li>
                 <li>  Flashcard decks </li>
                 <li>  New videos every week </li>
             </ul>
          </div>
      </main>
  

  • don't use <br> to separate sentence vertically in div.desno but these text are items of list so it is recommendable to use unordered list and style it instead using <p> and <br> as this

         <ul>
                 <li>  Tutorials by industry experts </li>
                 <li>  Peer & expert code review </li>
                 <li>  Coding exercises </li>
                 <li>  Access to our GitHub repos </li>
                 <li>  Community forum </li>
                 <li>  Flashcard decks </li>
                 <li>  New videos every week </li>
          </ul>
  

  • don't give section or div specific height that will damage the responsivity in mobile and will make scroll if width of screen small or height of the div large than screen height view so remove height and use min-height instead .

  Regardless You did amazing I hope this is useful to you... Keep coding👍

  0