Figma Design: https://www.figma.com/community/file/1020702672948793919/client-first-template-2

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

For this portfolio project, I chose to work with the Client-First Template 2 by Finsweet, available on the Figma Community. The template is based on the Client-First naming convention for Webflow, but I used it as a reference to build a fully responsive website using my own front-end development stack.

This project allowed me to practice converting a Figma design into a pixel-perfect, responsive web page, sharpen my CSS structuring, and improve my overall approach to scalable and maintainable UI development.

What I Worked On

• Design Conversion: I translated the full Figma design into clean, semantic HTML and modern CSS (with Tailwind CSS).
• Responsive Layouts: I made the layout responsive across multiple breakpoints (mobile, tablet, and desktop) by using Flexbox, Grid, and media queries effectively.
• Component-Based Structure: I broke down the UI into reusable components (hero, features, CTA, footer, etc.) to keep the codebase modular and organized.
• Typography and Spacing: I closely followed the design system from the Figma file, maintaining consistent paddings, font sizes, and line heights.
• Accessibility Considerations: I used proper heading structures, semantic tags, and contrast ratios to ensure a more accessible web experience.

What I Learned

• Client-First Naming System: Although it’s built for Webflow, I adapted the class naming strategy to keep my HTML structured and easy to read. It helped me think in a more systematic way when organizing my markup.
• Design Interpretation: Translating static designs into code helped me improve my attention to detail—like spacing, alignment, and interactive states.
• Efficiency with Tailwind CSS: I got more comfortable using Tailwind utility classes and learned how to extend them to fit custom design needs.
• Working with Figma Files: I gained more experience navigating Figma—inspecting layers, extracting assets, understanding constraints, and adapting design decisions when necessary.
• Mobile-First Development: I refined my approach to mobile-first development by starting with small screens and scaling up, ensuring better performance and maintainability.