HTML CSS, Beginner Order Summary Component

Community feedback

• 

  Lian Paul•340

  @lianpaulmPosted about 3 years ago

  Hey man! About your question

  1. you can use position: absolute

  .attribution {
       position: absolute;
       bottom: 1rem;
       left: 50%;
       transform: translateX(-50%);
  }
  

  to center and stick to the bottom.

  2.Yeah, Its okay to use position absolute, top50% left50% transform translate(-50%, -50%) trick to center an element but be aware of using it because it affect the other element
  Note: Absolute positioned elements are removed from the normal flow, and can overlap elements.

  There's many ways to do center an element, but I recommend using flexbox or grid because its very simple and flexible. I hope it helps 😀

  Overall great work 👍 Keep it up!

  Marked as helpful

  1

  ---

  

  Gavin Loo•100

  @rawsashimi1604Posted about 3 years ago

  @lianpaulm Hey Paul, thank you for replying to my questions. That really helped me clarify my doubts! Would learning flexbox be enough or should I explore grid as well?

  Also what do you think about learning Bootstrap?

  1

  

  Lian Paul•340

  @lianpaulmPosted about 3 years ago

  @rawsashimi1604 Hey Gavin slr. yeah, flexbox is powerfull! it's enough most of time, but I highly recommend to learn and explore more about grid, css grid is very powerfull you can make a complex layout very easily. When you confident writing flexbox and grid you can do anything complex layout!
  I would suggest learn those two very well!

  About bootstrap, I would not suggest to learn it(except if needed in your school or in your job). I recommend having a strong foundation in vanilla CSS first before jump on a framework, because any css framework is very easy and very quick to learn if you have a good foundation in css. But if you want to learn a css framework you can go on bootstrap, its up to you.

  good luck to your journey 😀

  Marked as helpful

  0

  

  Gavin Loo•100

  @rawsashimi1604Posted about 3 years ago

  @lianpaulm Alright Paul thank you!!!

  0
• 

  darryncodes•6,390

  @darryncodesPosted about 3 years ago

  Hi Gavin,

  Well done - your design is a very close match!

  • try background-size: 100% auto; instead of background-size: cover;
  • i think you've forgotten to add this: background-color: hsl(225, 100%, 94%);
  • try the desktop image for all device widths: background-image: url(../images/pattern-background-desktop.svg);
  • this is a really useful tool to help get the box shadow right, it's worth learning how box shadow work though Box Shadow CSS Generator

  Happy coding 🤙

  Marked as helpful

  1

  ---

  

  Gavin Loo•100

  @rawsashimi1604Posted about 3 years ago

  @darryncodes Hey man, thanks for your input! Just updated my background

  0
• 

  Lateef•35

  @ayobltPosted about 3 years ago

  This is a really great solution. I am not a pro in web development but i love what i am seeing. keep up the good work

  1

  ---

  

  Gavin Loo•100

  @rawsashimi1604Posted about 3 years ago

  @ayoblt Thank you for your kind encouragement Lateef! Will definitely put in more work to be a better front end developer!

  0