All solutions

What are you most proud of, and what would you do differently next time?

First time using tailwind-css, completing the project

What specific areas of your project would you like help with?

Coding style, practices, smells, redundancies. Any feedback would be appreciated!

What specific areas of your project would you like help with?

Feedback on coding style, practices would be appreciated!

What are you most proud of, and what would you do differently next time?

Finishing the project.

What challenges did you encounter, and how did you overcome them?

Working with pages/components longer than 1 screen size, had to google and test with different units like height: 100%, height: 100vh.

What specific areas of your project would you like help with?

Need help on how to align the tables closer to the design.

When styling the whole page, say the background color of the full page, which one should I style on? Body, main or #root?

Thanks!

What are you most proud of, and what would you do differently next time?

Completing the project, first time using vite to setup a react project.

What challenges did you encounter, and how did you overcome them?

Deploying to github pages, required adding a workflow, followed instructions on the vite documentation site

What specific areas of your project would you like help with?

Not sure how to use Inter-VariableFont_slnt,wght.ttf font file in fonts. I tried using it in @font-face in css:

@font-face {
  font-family: 'Inter';
  font-display: swap;
  src: url('Inter-VariableFont_slnt,wght.ttf') format('truetype');
}

But it would not render Inter fonts but Times New Roman instead, I got around by having multiple font faces: Inter-Bold.ttf/Inter-Regular.ttf etc.

Any help on how to use this ttf file, so that I only have to import 1 font-face only and change their font-weight would be appreciated!

What are you most proud of, and what would you do differently next time?

Completing the project

What challenges did you encounter, and how did you overcome them?

Inaccurate height and width in the content div, using the dev tools I found out its off by a bit pixels. After some digging, I had

body {
line-height: 150%
}

thinking, it would apply to every div normally, but it scales off the body font size I think, so the value was different when inherited to child divs.

What specific areas of your project would you like help with?

Would appreciate feedbacks on coding practices, code smells

What are you most proud of, and what would you do differently next time?

Most proud of the completion of the project.

What challenges did you encounter, and how did you overcome them?

1. Margins and paddings were confusing at first, but by using Google DevTools, hovering on the computed panel, makes it easier to understand and debug

2. Figuring how to center the QR Code card component inside the body. Tried multiple solution from stack overflow, for eg. margin: auto, which only centers horizontally and other solutions like

body {
   display: flex;
   justify-content: center;
   align-items: center; 
}

Stumbled on adding height:100vh, which seems to fix the issue.

What specific areas of your project would you like help with?

I need to work on my understanding of the display property and viewport unit. Would also appreciate some feedback on my coding style!