Order summary with Vite + TS + Flexbox + React

Community feedback

• 

  Travolgi 🍕•31,400

  @denieldenPosted over 2 years ago

  Hi Guilherme, I took some time to look at your solution and you did a great job!

  Also I have some tips for improving your code:

  • add main tag and wrap the card for Accessibility
  • to make it look as close to the design as possible add background-size: contain to #main-section id
  • try to add hover effect and a little transition on the element with hover effect
  • instead of using px try to use relative units of measurement -> read here

  Overall you did well :)

  Hope this help and happy coding!

  Marked as helpful

  1

  ---

  

  P

  Guilherme Henrique Teixeira de Oliveira•110

  @guilhermehtoPosted over 2 years ago

  @denielden yoo, thanks for this amazing feedback Deniel, I'll do another pass tomorrow on this solution and apply them to it

  1
• 

  Abdur Rouf Tarek•120

  @rouftarekPosted over 2 years ago

  Hi, nicely done.

  One thing if I may, you should add a 'background-size: contain;' or 'background-size: cover;' in ./src/App.css file under #main-section { }

  #main-section { height: 100vh; background-image: url('./assets/pattern-background-mobile.svg'); background-repeat: no-repeat; background-size: cover;' background-color: var(--pale-blue); display: flex; align-items: center; justify-content: center; }

  Marked as helpful

  1

  ---

  

  P

  Guilherme Henrique Teixeira de Oliveira•110

  @guilhermehtoPosted over 2 years ago

  @rouftarek sweeet, thanks for the feedback :)

  0