Single price grid component solution

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 :

  • Go down orderly when you are using the headings h1 down to h2 down to h3 and so on . so use h2 instead h3 in section div.box1 and change font-size if you want .

  To make your code more Responsive

  • instead of using top:100px in main.container use this to center your container in the page and avoid scroll

  body {margin :0;display:flex;flex-direction:column; min-height:100vh;}
  

  • you can use variables to give name to colors or font-size or any thing you want but choose semantic name

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

  • give cards semantic names to make code more readable as below

  <main class="container cards">
        <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>
  

  • use grid template with main.container to make it more responsive as this

  main 
  {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-auto-rows: minmax(270px,auto);
      grid-template-areas:
          'header header'
          'price whyus';
      gap: 20px 0px;
      margin: auto auto;
      align-items: center;
      justify-content: center;
      border-radius: 15px;
      background: var(--white);
  }
  
  header {
      grid-area: header;
      display: grid;
      gap: 30px;
      margin: auto auto;
  }
  
  main div.price,main div.whyus
  {
      min-height: 100%;
      padding: 30px 30px 0px;
      color: var(--white);
  }
  main div.price {
      grid-area: price;
      background: var(--Cyan);
      border-radius: 0px 0px 0px 15px;
  }
  
  main div.whyus {
      grid-area: whyus;
      background: var(--light-cyan);
      border-radius: 0px 0px 15px 0px;
  }
  
  

  • use media query different for each screen not used only one so use this in mobile

  @media (max-width: 775px)
  {
  main {
      grid-template-columns: repeat(1, 1fr);
      grid-template-areas:
          'header'
          'whyus'
          'price';
      gap: 10px;
  }
  
  }
  
  

  • instead of delete footer tag use can comment it as well structured page should contain semantic tags as header,main,footer

  • 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