Order Summary Component with HTML and CSS

Community feedback

• 

  Melwyn•250

  @melwyntPosted over 2 years ago

  Hi Gareth! 👋

  Some more tips to make your life easier 🙂

  These are the tools that you can use to make pixel-perfect versions:

  • Pixel Perfect Pro - This helps me to display a screenshot on top of the webpage to easily check if dimensions were accurate. This is super useful is you need to create pixel perfect work.
  • PX: Viewport Dimensions - This add-on will show you the dimensions of your viewport while resizing your browser.

  Other tools:

  • Figma - This helps me create a rapid mockup to get dimensions of components. I also use Figma to pick the colors from the screenshots to create a color palette.

  Cheers

  Marked as helpful

  0

  ---

  

  Gareth•410

  @Gareth-MoorePosted over 2 years ago

  @melwynt Wow Melwyn that Pixel Perfect Pro extension is pure gold! Thanks guy! I owe you!

  0
• 

  Gustavo Silva•130

  @GugaS1lvaPosted over 2 years ago

  Hello Gareth. When we download the challenge files, it always comes with a "style guide" folder. There you find all the colors of the challenge.

  But, if you want cool extensions to help you out (if there isn't a "style guide" to guide you eventually), try downloading the Google Chrome extension "ColorZila". It is very intuitive and always useful in the daily life of a Dev. I hope I was of some help, your challenge turned out great! ^^

  1
• 

  Anaz Anoiar•160

  @AnazAnoiar69Posted over 2 years ago

  Hi Gareth,

  I did it by uploading the image on https://imagecolorpicker.com/en.

  Great work btw :)

  0
• 

  Gareth•410

  @Gareth-MoorePosted over 2 years ago

  Hey Gustavo!

  Cool name by the way!

  Thanks for the advice. Normally the styles-guide has all the colours you'll need however this particular project didn't. S

  But the colour picker extension has been added and I'm going to put it to good use! Thanks a lot :)

  Gareth

  0