Akinwunmi Oluwasegun’s Post

Day 23 of #100DaysOfCode 👉 I created a quick-view page for the products, and I used react router to navigate to the page and used useParams in react to change the text of the quick-view page based on the product clicked. 👉 I also created a tooltip that is displayed when the user hover over the quick-view button of each product, which tells the user about the action that is to be performed. 👉 I added a collection section to the home page that contains different cartegories of the products available, and updated the VIEW ALL button to navigate to the general product page. 👉 I updated the styling of each product and each div in the collection section to display some divs and texts respectively when hovered on. Link to project: https://lnkd.in/e-sP9jAa

Exciting Update: New Feature Alert! I'm thrilled to announce a significant update to my Chrome extension, PixelPeek! What’s New? Display Dimensions Tooltip: Now, you can seamlessly see both the displayed and original pixel sizes of various elements on any webpage. Whether it's images, videos, SVGs, buttons, or even links - just hover over, and the magic happens! Optimized Performance: Leveraging IntersectionObserver and MutationObserver, the extension now dynamically handles and updates elements as you scroll, ensuring a smooth and responsive experience. Improved User Experience: Enhanced tooltips with clear, concise information about element dimensions, making web development and debugging more efficient and enjoyable. This update is all about making your web development journey easier and more intuitive. Happy coding! Check out the updated extension here: https://lnkd.in/gpJTjvaB

🔗 New Piccalilli link: Look Mum, No Breakpoints! Rob McCormick breaks down how they refactored their front-end with fluid type, flexible layouts and importantly, giving the browser more control. #PiccalilliLinks

This is so very refreshing and requires anyone seriously intersecting with web design due consideration. It’s not responsive design per se where one is tied to a set of specific breakpoints, it’s more like leveled up intrinsic design.

Want to know how to do custom layout with scoped modifier in Compose ? Follow this link to have a 101 complete example. https://lnkd.in/eN5XKkfD

🚀 Introducing KrabbyCase: Your Go-To Custom Phone Case Creator! 🚀 I'm thrilled to announce the launch of my new website, KrabbyCase, where you can create and order your very own custom phone cases. 🎨📱 🔗 https://lnkd.in/e2_MeK9h What's KrabbyCase all about? KrabbyCase is designed for anyone looking for a new, high-quality phone case. Whether you want to showcase your unique style or find the perfect gift, we've got you covered. Key Features: ✨ A complete shop built from scratch in Next.js 14 ✨ Beautiful landing page featuring custom artworks by a professional illustrator ✨ Secret admin dashboard to manage orders seamlessly ✨ Drag-and-drop file uploads for easy customization ✨ Direct purchase option for customers ✨ Clean, modern UI on top of shadcn-ui ✨ Completely custom phone case configurator inspired by Apple’s design ✨ Authentication using Kinde ✨ 100% written in TypeScript Why KrabbyCase? I created KrabbyCase to demonstrate my abilities with modern technologies like TypeScript, NextJS, PostgreSQL, and Auth. This project has been a labor of love over the past month and a half, and I’m excited to share it with you. Technologies Used: NextJS and TypeScript for a robust foundation TailwindCSS, Shadcn-ui, and Lucide-React for a sleek UI Prisma for efficient database management Stripe for save payment system (test card: https://lnkd.in/eT2zfHNH) FramerMotion for smooth custom animations Thank you for taking the time to read about KrabbyCase. I can't wait to see the amazing custom cases you create! 🌟 #webdevelopment #NextJS #TypeScript #TailwindCSS #customphonecases #newwebsite #KrabbyCase #JSX #fullstack #webdev

🚀 Day 17 of my 30-day CSS journey! I designed a sleek front page for a Noise website, featuring a gradient background, custom navigation, and product cards for earphones and smartwatches. 🖌️✨ Working with flexbox, positioning, and smooth transitions to make each element pop. Getting better each day! #CSS #WebDesign #LearningJourney #FrontendDevelopment #30DaysOfCSS

⚡ 𝐁𝐨𝐨𝐭𝐬𝐭𝐫𝐚𝐩 𝐅𝐮𝐧𝐝𝐚𝐦𝐞𝐧𝐭𝐚𝐥𝐬 — 𝐁𝐮𝐭𝐭𝐨𝐧𝐬 ⚡ 👉 Button Variants: Primary, Secondary, Success, Danger, Warning, Info, Light, Dark, and Link buttons 👉 Button Sizes: Regular, Small, and Large buttons to fit any design 👉 Button States: Disabled and Active states for enhanced user interaction 👉 Outline Buttons: Stylish buttons with no background, just a border and text color 👉 Links as Buttons: Convert links to button-like elements easily 👉 Block Buttons: Stack buttons vertically with the .d-grid class 👉 Button Group & Toolbar: Organize your buttons into groups and toolbars for better UI 👉 Dropdowns: Add dropdown menus for compact, user-friendly navigation https://lnkd.in/ehK5khAR

Use CSS ‘clip-path’ in your Gravity Forms color Picker choices When it comes to creating visually appealing forms, the details matter, and JetSloth’s Gravity Forms Color Picker add-on offers a fantastic way to enhance user experience. But why stop at the default styles?

I added a couple of highly requested icons for @HabitKit. Available with the next update!