Project 6: Scroll Fade-In Effect
Add range-based opacity animations to elements as you scroll, creating a polished, professional look.
React
React Day 15: Deployment & Best Practices
Day 15 of React series. Learn how to build and deploy your React application and understand common pitfalls like stale closures.
Sticky Scroll Animations with Framer Motion
Learn how to effectively mix CSS sticky positioning with Framer Motion for powerful scrolling UIs.
React Day 16: Form Validation with React Hook Form
Day 16 of React series. detailed guide to managing form state and validation efficiently using React Hook Form.
Layout Animations: Auto-Animate Changes
Magically animate layout changes with a single prop. Understand how the layout prop works for smooth UI transitions.
Building a Navbar with Layout Animations
Project tutorial: Create a polished navigation bar where elements smoothly resize and reposition using layout animations.
Shared Layout Animations with layoutId
Learn the secret to App-Store-like transitions. Animate shared elements between different components or routes with layoutId.
React Day 19: New Features (React 19)
Day 19 of React series. Deep dive into React 19 features including the useId hook, use API, metadata support, and Activity component.
React Authentication: JWT, Axios, and Context API Guide
Complete guide to React Authentication. Implement login, logout, protected routes, and silent token refresh using simplified patterns.