All solutions

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

I explored the mystery of CSS line-height yet again by reading the major difference between number and percentage-based values. Using this knowledge, I made the final output nearly identical to the shared design.

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

The only challenge was to space things just like the shared design without using pixel values. I prefer working with relative units more than absolute ones (like px), but having said that, the shared Figma file was really useful for gathering the spacing and sizing data.

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

I would like to know what people prefer working with more these days professionally: relative units like em and rem or absolute ones or a balanced blend of all that?

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

I applied my previous knowledge of laying things out and managing customizable settings with custom properties. Keeping the final UI pixel-perfect and almost exactly the same as the design is always a new learning experience.

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

I avoided using arbitrary magic numbers to adjust spacing and sizing. Instead, I opted for generally used values and utilized the leading to address certain spacing issues effectively.

I opted for the Inter variable font instead of its static variants. This kept the CSS code concise, requiring only one @font-face block to include the variable font.

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

I noticed the recommended font size of 14px wasn't necessary to achieve the desired UI. The standard 16px base font size worked well, and the basic copy inherited it seamlessly. Can you please throw some light on that or share a layout done with 14px font-size?

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

Since the project was fairly simple, the only thing I think I did a bit more effectively than other times was managing color schemes. Rather than using the literal colour names, I named the colors better as primary, secondary, and accent values.

I will be taking this approach further in future projects as well.

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

Pixel-perfecting the designs has always been a challenge for me. This one was no exception and made me scratch my head more than a few times.

Applying the design images as a background to the HTML pages while keeping all the elements opaque helped a lot to size and space things almost like the original designs.

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

I would like to know how professional front-end developers are dealing with designs in modern times when it comes to pixel-perfecting UIs.