Figma Design: https://www.figma.com/design/zoyUrEb1RQZE3cT2i4QfF9/Client-First-Template-4–Community-?node-id=0-1&p=f&t=Q0zgla5fq4KVx6tJ-0

Live Site: https://finsweet4.markluigibatoctoy.com/

This project is part of my ongoing journey to sharpen my front-end development skills through real-world practice. I took this Figma design and transformed it into a responsive, clean-coded website using HTML, Tailwind CSS, and best practices in layout structure.

What I Worked On:

• Converted the full Figma layout into a responsive and pixel-perfect website
• Implemented Tailwind utility classes to create flexible and maintainable styles
• Built reusable components like buttons, cards, and newsletter forms
• Handled layout challenges across breakpoints using mobile-first design
• Structured the HTML to be semantic and accessible
• Optimized spacing and typography to closely match the Figma design

What I Learned:

• How to better organize and reuse Tailwind classes for cleaner code
• How to manage spacing and scale more consistently using utility-first principles
• Improved my responsiveness workflow, especially on content-heavy sections
• Gained a better eye for detail — matching fonts, colors, and layout spacing more accurately
• Reinforced the value of building with accessibility and readability in mind