Practicing React with Tailwind and map()

🚀 Just built a simple and interactive Counter App using HTML, CSS & JavaScript! This project is designed to practice core JavaScript concepts like DOM manipulation, event handling, and dynamic value updates. Users can easily increase, decrease, and reset the counter with a clean and responsive UI. ✨ Features: ✔ Increase Counter ✔ Decrease Counter ✔ Reset Counter ✔ Simple & User-Friendly Design ✔ Responsive Layout Small projects like these help strengthen the basics and improve problem-solving skills in frontend development. 🔗 Live Demo: View Project https://lnkd.in/dkBfDfEB

🚀 Day 10 of my #100DaysOfCode Challenge! ⚽ I’m continuing to build out my web development foundations! 🚀 I just wrapped up a new project: a fully responsive React Feedback Form. Handling user input is such a crucial part of building interactive UIs, so I used this project to really solidify my understanding of React Hooks and state management. Here is a quick look at what I implemented: ✅ Controlled Components: Utilized the useState hook to smoothly manage dynamic inputs for Name, Email, and Feedback text. ✅ Submission Validation: Added a native window.confirm step, allowing users to review their details before the form officially submits. ✅ Responsive Design: Wrote custom CSS to ensure the UI looks clean and functions perfectly across both desktop and mobile screens. Every project feels like a solid stepping stone toward mastering frontend architecture and eventually tackling full-stack applications. Getting these core mechanics down is key! You can check out the source code and how I structured the logic over on my GitHub: 🔗 https://lnkd.in/gJ5jg3NC #ReactJS #WebDevelopment #Frontend #JavaScript #SoftwareEngineering #CodingJourney #BuildInPublic

Frontend looks easy… until it really isn’t 😅 At first, it feels like: “Just some HTML, CSS, and a bit of JavaScript… should be straightforward.” Then you start building 👇 • Pixel-perfect design 🎯 That tiny 2px difference? Yeah… it suddenly matters more than you expected. • Cross-browser issues 🌐 Everything looks perfect on Chrome… Then Safari humbles you real quick. • Mobile responsiveness 📱 A clean desktop layout can turn into a completely different story on smaller screens. • That one CSS bug 🐛 You fix one thing… and somehow three new issues show up. • And then come animations ✨ Modern UIs almost expect them now. But getting them right? • Smooth timing • Natural feel • Good performance That’s where things get interesting (and sometimes frustrating). Frontend isn’t just about making things look good — It’s about creating an experience that feels right across every screen, browser, and interaction. And honestly, that challenge is what makes it worth it 🚀 #frontend #webdevelopment #javascript #animation #uiux #developerlife

🚀 Repeating your layout in every React page? I faced this problem too. When I started using React Router, my code looked like this: 👉 Same Navbar in every page 👉 Same Sidebar everywhere 👉 Layout repeated again & again 😬 It worked… but it was messy and hard to maintain. 💡 The Problem: Without using Outlet 👇 ❌ Repeated layout code in every component ❌ Hard to update UI (change one → update all) ❌ Not scalable for large apps 💡 The Fix: Use Outlet 👉 import { Outlet } from "react-router-dom"; 💡 Solution Example: function Layout() { return ( <div> <Navbar /> <Outlet /> </div> ); } 👉 Now all pages render inside <Outlet /> 🎯 💡 Before vs After: ❌ Before: Every page = Navbar + Content + Footer 😓 ✅ After: Layout handles UI Outlet handles page content 🚀 💡 Why it matters: ✔ No more duplicate code ✔ Easy to maintain ✔ Clean project structure ✔ Perfect for dashboards & large apps 🔥 Pro tip: If you're repeating layouts — you're missing Outlet. 🔥 Lesson: Smart developers don’t repeat UI — they structure it. Are you still repeating layouts or using Outlet the right way? 👀 #React #ReactRouter #WebDevelopment #Frontend #CodingTips #JavaScript

🤯 How do you build a complex responsive grid while maintaining total design control? I just finished the Bento Grid Challenge by @Frontend Mentor, and it was the perfect opportunity to master CSS Grid Areas. Instead of just defining columns, I "mapped" the layout directly in my code to ensure a seamless experience across all devices. Key achievements in this project: 📐 Advanced Layouts: Mastered grid-template-areas for a clean, mosaic-style UI. 📱 Responsive Precision: Implemented fluid transitions from 4 columns to a single-column mobile view. ♿ Accessibility First: Integrated ARIA attributes and a logical heading hierarchy to support screen readers. Building projects like this is part of my journey to becoming a top-tier Web Developer. Feedback is more than welcome! Check it out here: 🔗 Live Demo: https://lnkd.in/dKuh4HfH https://lnkd.in/d4Za8w2d #WebDevelopment #FrontendDeveloper #CSSGrid #ResponsiveDesign #GitHub #FrontendMentor #JuniorDev #CodingLife

🚀 Next.js Linking & Navigation Navigation in Next.js is faster, cleaner, and built for performance ⚡ Let’s break it down 👇 🧩 1. Basic Navigation (Using Link) 👉 Use <Link> for moving between pages import Link from "next/link"; export default function Home() { return ( <Link href="/about">Go to About</Link> ); } 💡 Why use it? ✔ Client-side navigation ✔ No full page reload ✔ Faster transitions 🔁 2. Programmatic Navigation (useRouter) 👉 Navigate using functions (button click, events) "use client"; import { useRouter } from "next/navigation"; export default function Page() { const router = useRouter(); return ( <button onClick={() => router.push("/about")}> Go to About </button> ); } 💡 Use when: ✔ On button click ✔ After form submission ✔ Conditional navigation ⚡ Key Advantages ✔ Client-side routing (SPA feel) ✔ Automatic prefetching ✔ Fast page transitions ✔ Better user experience 🧠 Simple Way to Remember • <Link>→ For UI navigation • useRouter() → For logic-based navigation 🔥 Modern apps rely heavily on smooth navigation — and Next.js makes it effortless. 💬 Which one do you use more — Link or Router? #NextJS #React #Frontend #WebDevelopment #JavaScript #Coding #SoftwareEngineering

My Next.js app's Lighthouse score went from 62 to 97. No paid tools. No infrastructure changes. Just 5 things I was doing wrong that most devs don't notice. Mistake 1: Loading Google Fonts via a link tag. External font requests are render-blocking. My CLS was 0.28. Switched to next/font and it downloads fonts at build time, self-hosts them, and auto-calculates fallback font metrics so there's zero layout shift. CLS dropped to 0.02. LCP improved by 400ms. Mistake 2: No priority on my hero image. My largest above-the-fold image was lazy-loading by default. The browser downloaded it last instead of first. Added priority prop to next/image. LCP went from 4.2s to 1.9s. One prop. 55% improvement. Mistake 3: Wrapping entire pages in 'use client'. I had 'use client' at the top of my page component because one button needed onClick. The entire page shipped as client JavaScript. I moved 'use client' to just the button component. JS bundle dropped 62%. Mistake 4: Barrel exports killing tree-shaking. export { Button } from './Button' in an index.ts file. Looks clean. But the bundler pulls in every component from that barrel file. Removed it, used direct imports. First Load JS went from 1.5MB to 200KB. Mistake 5: Testing Lighthouse in dev mode. Dev mode injects HMR code and error overlays. My dev score was 62. Production was 85 before any fixes. Always run next build && next start before measuring. After all 5 fixes: 62 to 97. Same server. Run Lighthouse on your site right now. What score did you get? #NextJS #WebPerformance #React #JavaScript #WebDev

From Syntax to Seamless UI. ☁️💻 I’ve just wrapped up this Weather Web App, built from the ground up using HTML5, CSS3, and Vanilla JavaScript. While the functionality is key, I wanted to push the boundaries of how a utility app feels. Moving away from standard templates, I engineered this "Premium Dark" interface to give it a cinematic, high-end dashboard vibe. Technical Highlights: Interactive Data Rendering: Leveraging Vanilla JavaScript to bridge the gap between complex weather data and a fluid, user-friendly interface. Custom CSS Architecture: Achieving that deep charcoal aesthetic with high-contrast cyan accents. Responsive Engineering: Ensuring the "Command Center" look remains pixel-perfect across all screen sizes. It’s one thing to design a mockup, but bringing it to life through clean, efficient code is where the real magic happens. 🌙 How do you like this "Command Center" aesthetic for a weather tool? Would love to hear your feedback! 🚀 #WebDevelopment #FrontendDeveloper #JavaScript #CodingLife #HTMLCSS #Programming #PortfolioUpdate #KarachiDevs

Built a responsive Bento Grid layout using pure HTML and CSS as part of a Frontend Mentor challenge. This project helped strengthen my understanding of: • CSS Grid (grid-template, spanning, auto-rows) • Responsive design (mobile-first approach) • Layout structuring for real-world UI patterns • Component-based thinking for reusable sections Implemented a multi-card layout with different grid spans, ensuring consistency across both mobile and desktop views. Tech Stack: HTML, CSS (Grid) This was a good exercise in translating design into code while maintaining responsiveness and alignment. 🔗 GitHub: https://lnkd.in/gPWekMbU 🔗 Live Demo: https://lnkd.in/gc-XexQp #FrontendDevelopment #CSSGrid #WebDevelopment #ResponsiveDesign #HTMLCSS #FrontendMentor

🚀 Just Built a Full React Project — Book Vibe 📚✨ Excited to share my latest project “Book Vibe” — a modern book management web app built with React! 🔧 Tech Stack I Used: React + React Router Context API (for state management) Tailwind CSS + DaisyUI (for clean UI) Recharts (for data visualization 📊) React Toastify (for better user feedback) 💡 Key Features: 📚 Browse and explore books ❤️ Add to Read List & Wishlist 📊 Visualize reading data with charts 🔍 Organized book details (category, rating, tags, etc.) ⚡ Smooth navigation using React Router 🎨 Clean & responsive UI design 🎯 This project helped me strengthen my understanding of: Component-based architecture State management with Context API Data visualization in React UI/UX design using Tailwind 🎥 Check out the demo video below! 🔗 Live Project: https://lnkd.in/gH5b6Ak6 🔗 GitHub Repo: https://lnkd.in/gcVA634u I’d love to hear your feedback! 🙌 #React #WebDevelopment #Frontend #JavaScript #TailwindCSS #Projects #LearningJourney #Recharts