single price grid component

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 :

  • use main and wrap inside it section.container instead using section 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 use <h1> instead <h2> in section div.item-1 and change font-size if you want .

  to make your code more responsive

  • don't use <br> to separate sentence vertically in div.item-3 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>
  

  • give your div semantic names instead using div.item-1 , div.item-2 and div.item-3 use this :

  <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>
  

  • you forget to use border-radius for section.container to get more awesome preview .

  • you can comment footer tag to get identical preview design .

  • you can use variables to give your style semantic names :

  :root 
  {
  --main-color:#3829e0;
  --font-family:'Red Hat Display',sans-serif;
  }
  
  h1 
  {
  font-family:var(--font-family)/*to call  value of the variable*/
  }
  
  

  • finally you can use the BEM approach for your next projects. It's a popular CSS naming convention for writing cleaner and more readable CSS classes. ---> Why BEM? , The Block, Element, Modifier BEM

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

  0