Order summary page with HTML and CSS

Community feedback

• 

  seekinfox•560

  @seekinfoxPosted about 3 years ago

  1. There are several html errors , div tags are not closed properly, br tags are not close properly

  • always start with creating opening and ending tags e.g <div></div>, so you won't have to worry about it later.

  2 . one of the best way to start building layout is to plan it. Do it in your mind or draw it down . once you get hang of it, you'll feel much more confident when you're building new layout.

  for general idea -> suppose i want to create a card like the challenge

  i would do ->

  <section class="card-container">
    <div class="header-image-hero">
    </div>
    <div class="text-content">
         
       <div class="plan">
       </div>
       <button></button>
    </div>
  </section>
  
  

  you get the idea.

  3 . ways to center div in mid of screen

  • margin: auto;

  • display: flex; justify-content: center; align-item: center;

  You should use css flexbox , start with simple flex, you'll get it eventually. it'll make your layout lot easier.

  for width ->

  • you can set button width: 100%; so it'll expand to width of it's container e.g. take example from above

  .text-content { //parent for button and plan
   width: 10rem;
  }
  
  button { // direct child of text-content
   width: 100%;  
  }
  
  .plan { // is direct child of text-content
   width:100%; 
  }
  

  you can also use flexbox to do this.

  4 . imo table is good but old. use flexbox and css grid. and using positioning a lot makes a code hard to maintain. but as long as you don't mess things up, its fine.

  Marked as helpful

  1

  ---

  

  Linea•10

  @lineah35Posted about 3 years ago

  @seekinfox Amazing, how incredibly helpful. Thank you. I think I'm gonna give this another go.

  0
• 

  Linea•10

  @lineah35Posted about 3 years ago

  Thanks so much!

  0
• 

  AnomalieXB-6783746•10

  @AnomalieXB-6783746Posted about 3 years ago

  Hey Linea,

  the div you find missing is faulty as you used a closing tag </div> when you actually intended to use an opening one.

  There are many ways to center the 'main' div, my preferred choice is to use flexboxes (https://css-tricks.com/snippets/css/a-guide-to-flexbox/ might help you big time). Same goes actually for the positioning of the annual plan div, but as I said there are 1000 ways and it is up to you to find the one that fits your needs and style best.

  0