NSIDE

Why did we build this project?

After completing previous projects like Vanta, Dualite, and GreenCars, we sought a project that would challenge our understanding of complex layouts and animations. Ty Hughey's cloneable template stood out due to its intricate use of grid systems and animation-heavy design. It provided an excellent opportunity to deepen our skills in creating responsive and interactive web designs.

How We Approached the Build?

✅ Built with Client-First Precision

We implemented the Client-First framework to organize class naming, spacing consistency, and layout structure. Every section followed a system—because clean structure means fast iterations.

📐 Layout Logic: Grid + Flexbox Mastery

This project gave us a playground to sharpen our layout game. From overlapping elements to responsive stacking, we used grid and flex like pros—and learned how to solve layout bugs fast.

🌀 Interaction & Animation Practice

Despite its clean look, NSIDE includes subtle transitions and scroll-based animation. We recreated each using Webflow’s native tools—no scripts, no custom code. The result? A smoother, more scalable site.

What We Learned

1. Mastering Grid and Flexbox Layouts

The project extensively used CSS Grid for structuring sections, which was initially challenging. We aimed to understand how grid works and why it's preferred for certain layouts. Additionally, we explored combining grid and flexbox—using grid for two-dimensional layouts and flexbox for one-dimensional arrangements. This approach enhanced our proficiency in building complex, responsive designs.

2. Advanced Navigation and Mega Menu

The navigation bar featured a mega menu with subtle mouse hover interactions. Building this required applying our previous experience and learning new techniques to meet the design's specific needs. It was a valuable exercise in creating user-friendly and interactive navigation systems.

3. Innovative Use of Webflow's Native Slider

For the testimonial section, we utilized Webflow's native slider in a unique way, inspired by the original template. This demonstrated that with creativity, native tools could achieve effects typically associated with third-party integrations.

4. Animation Techniques

The project was animation-intensive, featuring interactions from the hero section to the footer. We learned various animation techniques, including:

• Mouse hover effects with shadow overlays on cards
• 3D card animations on hover
• Scroll-triggered animations
• Sticky scroll animations for the blog section

These animations enhanced the user experience and added depth to the design.

5. CMS Implementation

We implemented a CMS for the blog section, which included sticky scroll animations and hover effects on blog cards. Despite limitations, we structured the CMS to be scalable and maintainable, ensuring that the design could accommodate future content additions seamlessly.

🎯 Why This Project Matters‍

Every project doesn't need wild effects—some need precision, polish, and structure. NSIDE helped us:

• Refine layout fundamentals
• Master grid and flex alignment
• Execute interactions with precision
• Build confidently using native Webflow tools

Final Thoughts

This project was a significant step in our journey to mastering Webflow. It challenged us to think critically about layout structures, interactions, and animations. We are grateful to Ty Hughey for making this template cloneable, as it served as an excellent learning resource for advancing our Webflow development skills.