https://discord.com/channels/849667629785546782/850328283848376331/853667085389660160

Vikramvi

Positives:

• Consistent CSS naming style
• Readable CSS naming -> easy to understand and what they are for
• Clean code, very easy to read and understand
• Consistent code style
• Good use of the pre tag! I didn't know you could use it to embed HTML
• Helpful comments in files

Things You Can Improve On:

• Button text is using the wrong font
• Missing cusor: pointer on hover on buttons and links
• Use variables for your colors, you can waste less time copy/pasting and just use a variable instead
• Wrong color on focus, it's yellow instead of the color indicated in the design
• Like Femi, a lot of div tag uses, please use more semantic HTML
• Customizability:
  • the use of the buttonTheme is great, but I don't really understand what styles are being applied
  • you should be able to pass in a value (i.e color="primary")
    • many CSS libraries use this style, it makes it easier for the programmer to
      understand what styles are being applied to the button
    • the label for the button component should match the code inside your
      file. This way the programmer would know how to use the button component in their own code
• Missing footer with your github link
• Links in the sidebar are not bold
• The links in the sidebar should be an unordered list (ul tag) not paragraphs

Some Tips:

• Read up on semantic HTML, this will let you better understand which HTML tags you should use for different data

• For a more responsive design, a lot of people recommend using em or rem instead of px

  • just something to think about

• For widths and height, it's better to use percentages rather than pixels

  • There are many differen screen sizes, using percentages will let your website scale with their view height and width

• When clearing something like a margin, you don't need to include the measurment unit

  Example:

    body {
      margin: 0;
    }

• You forgot to change you project name in the README!

• youtube video How a FAANG Senior Software Engineer stays productive

• Google "react how to create button component"

• Check different solutions

• Used below solution
  https://react.school/ui/button

https://codesandbox.io/s/react-buttons-and-tabs-6l1mr?from-embed=&file=/src/App.js

• How To Use Styled-Components In React
  https://www.smashingmagazine.com/2020/07/styled-components-react/

• Used 2 versions of CSS namely styled component and external css

• Learnt about default component usage
  https://stackoverflow.com/questions/67837396/styled-component-default-props-values-are-not-getting-picked-up

Also gained more confidence wrt design using plain CSS