All comments

• 

  Luccas Gonçalves•10

  @Luccas-goncalvesSubmitted about 1 year ago

  i would like to receive any feedback about best practices and clean code

  

  dashboard design flex-box

  2

  50
  

  finitehorizons•80

  @finitehorizonsPosted about 1 year ago

  The shadow didn't stick out to me until I had seen the solution/design slider. The shadow is mainly to the bottom right, and the color of it is one of the neutral colors in the styles-guide. Other than those things it looks great!

  I wanted to look at the code for you but your repo doesn't have anything in it

  1

  This comment has received 1 replyShow
• 

  Anthony Nguyen•80

  @AnthonyPA0902Submitted about 1 year ago

  There are 4 things that I found hard to do:

  1. Make the icon in a horizontal line with the text
  2. Make the score in a vertical line
  3. Make the content in the middle of the page ( This I've done but it quite hard to know where is the middle of the page )
  4. Make the page change when using on mobile

  I would be grateful if anyone can help me. Thank you so much

  

  Results-Summary-Component using HTML and CSS

  1

  60
  

  finitehorizons•80

  @finitehorizonsPosted about 1 year ago

  -So, instead of making a specific class for each summary row and then magic numbering them in line, you should put them all inside a flex container(or grid) and then use gap to move them around the page. To adjust the individual styles of each score, you can add a second class for each for the colors specifically.

  -Flex or grid solves this problem

  -The middle of the page problem is solved by setting a min-height to the page(or body) of 100vh and then using margin to center or using flex/grid to align/justify the container to the center of the screen

  -This requires media queries. You set a max or min limit to screen width and then adjust styles accordingly based on that size. Example: @media screen and (max-width: 600px) { ...styles go here}

  That would apply styles only when the screen size is less than 600px. Hope this helps :)

  Marked as helpful

  0
• 

  Dastageer HC•30

  @dastageer-hcSubmitted about 1 year ago

  Exact Design match and Responsive,

  

  HTML, Sass, Responsive Design, Vite

  2

  90
  

  finitehorizons•80

  @finitehorizonsPosted about 1 year ago

  You're missing the border-radius on the left Results component's right side as well as the box shadow(hint: you're using the color elsewhere)

  0