Order Summary Component

Community feedback

• 

  P

  Alper•1,010

  @adonmez04Posted almost 2 years ago

  Hi, the newbire here:) I compare solutions with mine to understand other perspectives. This is a really good solution. Well done.
  I want to say something about your solution. You may want to use them.

  1 - You should use <div> tag as little as possible. It's not semantic and modern. Please check this resource and apply the structure to your code. click here

  2 - Do not use the element selector alone in CSS. It's not a problem in a small project like this, but you don't need this behavior. Also you don't need to give a class every element. Instead, you can use descendant combinators with their parents. They're a clear solution with your class name and selector specificity. For example, you can write .info-section h2 instead of h2. I think you already know this, I just wanted to remember them.

  3 - You can use this structure to add <a> tag: a:link, a:visited {} a:hover, a:active {} Also, you should use <a> tag with :link pseudo-class everytime (if the a tag is a link).

  4 - You can use flexbox with 1-dimensions layout and basic components. At the same time, CSS Grid is a good solution to 2-dimensions layout and complex components. We can use both of them at the same time in a project, it's not a problem.

  I'd prefer to use CSS Grid with complex components like Annual Plan Area. Here is my grid solution, you may check them.

   <header class="content-area__subscriptions--plans">
              <img class="plans_el--1" src="./images/icon-music.svg" alt="" />
              <p class="plans_el--2">Annual Plan</p>
              <a class="plans_el--3" href="#">Change</a>
              <p class="plans_el--4">$59.99/year</p>
            </header>
  

  /* The Grid Template (Start) */
  
  .content-area__subscriptions--plans {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: repeat(2, 1fr);
  
    padding: 1.563rem 1.5rem;
  
    background-color: var(--very-pale-blue);
    border-radius: 0.688rem;
    column-gap: 1.25rem;
  }
  
  .plans_el--1 {
    grid-column: 1;
    grid-row: 1/-1;
    justify-self: center;
    align-self: center;
  }
  .plans_el--2 {
    justify-self: start;
    align-self: start;
  
    font-style: normal;
    font-weight: 900;
    font-size: 1rem;
    line-height: 1.313rem;
  
    color: var(--dark-blue);
    vertical-align: top;
  }
  
  .plans_el--3:link,
  .plans_el--3:visited {
    grid-column: 3;
    grid-row: 1/-1;
    justify-self: center;
    align-self: center;
  
    font-style: normal;
    font-weight: 700;
    font-size: 0.875rem;
    line-height: 1.188rem;
  
    color: var(--bright-blue);
  
    /* The straight line */
    text-underline-offset: 5px;
    text-decoration-line: underline;
    text-decoration-thickness: 2px;
  }
  .plans_el--3:hover,
  .plans_el--3:active {
    color: hsl(245, 83%, 68%);
  }
  
  .plans_el--4 {
    justify-self: start;
    align-self: end;
  
    font-style: normal;
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.313rem;
  
    color: var(--desaturated-blue);
  }
  
  /* The Grid Template (End) */
  

  I hope these'll help you to improve your perspective. Keep coding. All the best.

  Marked as helpful

  0

  ---

  

  Raghu Anand•50

  @raghuaanandPosted almost 2 years ago

  @adonmez04 Thank you for your feedback. I will keep these things in mind.

  1