Figma Design: https://www.figma.com/community/file/1068172976080193544

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

This project is a fully responsive website built from a Figma design titled “Client First Template 10 — Church & Community.” The design focuses on clean layouts, purposeful spacing, strong visual hierarchy, and clear messaging — all important aspects of websites intended for community organizations and non-profits.

The goal of this project was to accurately translate the design into a working website, paying close attention to detail, alignment, typography, and responsiveness across various screen sizes. I approached the build with semantic HTML and Tailwind CSS, ensuring the code was not only maintainable but also accessible.

What I Worked On

• Recreated the entire layout from scratch based on the Figma file
• Structured HTML with semantic tags for better accessibility and SEO
• Styled every section using Tailwind CSS, leveraging utility classes for spacing, grids, and responsive behavior
• Ensured pixel-perfect responsiveness for mobile, tablet, and desktop views
• Paid close attention to visual balance, typography rhythm, and image presentation

What I Learned

This project gave me a chance to practice interpreting static design files and turning them into live, responsive experiences. It reinforced my skills in structuring clean, readable code and organizing components in a scalable way using Tailwind’s utility-first approach. It also helped me refine my workflow when working from Figma — from analyzing spacing and typography to making real-time decisions about breakpoints, padding, and layout structure.

Overall, it was a rewarding exercise that not only sharpened my technical skills but also strengthened my eye for detail and design implementation.