Kumar Shivam’s Post

🚀 Built a Drum Kit Web App using HTML, CSS & JavaScript In this project, I focused on building a fun, interactive experience while strengthening my core frontend skills. 💡 Key features & learnings: • DOM Manipulation for dynamic interactions • Keyboard event handling (keydown listeners) • Audio integration for real-time sound playback • Smooth CSS transitions & animations • Responsive layout using Grid & Media Queries For UI enhancement and design improvements, I leveraged AI tools like ChatGPT and Gemini to refine layout, contrast, and visual hierarchy. This project really helped me deepen my JavaScript fundamentals and understand real-time user interaction. I’d love to hear your feedback and suggestions! 🙌 #HTML #CSS #JavaScript #WebDevelopment #Frontend #ResponsiveDesign #LearningInPublic

Stop using onclick on div tags. You are calling it a button, but is it? 🛑 We’ve all seen it: <div onclick={handleClick}>Click Me</div>. It’s easy, it’s quick, and it works... right? Wrong. By doing this, you are unintentionally locking out millions of users from your website. When you use a div as a button, you are killing Accessibility (A11y). Here is why a real <button> tag (or proper ARIA roles) is a non-negotiable in 2026: 1️⃣ Keyboard Navigation: A real button is focusable by default. A div is not. Try navigating your site using only the Tab key—your "div-buttons" will be invisible to keyboard users. 2️⃣ Screen Reader Support: Screen readers tell users "Button" when they encounter a <button>. For a div, it just says "Text," leaving visually impaired users confused about what’s interactive. 3️⃣ Built-in Behavior: Buttons support the Enter and Space keys automatically. With a div, you have to manually write extra code to handle those keypresses. The "Professional" Fix: If you must use something other than a button tag, don't forget the A11y essentials: ✅ role="button": Tells the browser what the element does. ✅ tabindex="0": Makes it reachable via keyboard. ✅ aria-label: Provides a clear description for screen readers. My Take: In a world where we focus so much on performance and SEO, let’s not forget Inclusion. A truly Great Developer builds for everyone, not just for people who use a mouse. Are you still using div for buttons, or have you made the switch to Semantic HTML? Let's discuss below! 👇 #WebAccessibility #A11y #HTML5 #FrontendDevelopment #SoftwareEngineering #InclusiveDesign #WebStandard #ReactJS #NextJS #CleanCode #CodingTips #UXDesign #WebDev2026

𝐄𝐧𝐡𝐚𝐧𝐜𝐢𝐧𝐠 𝐔𝐬𝐞𝐫 𝐄𝐱𝐩𝐞𝐫𝐢𝐞𝐧𝐜𝐞 𝐰𝐢𝐭𝐡 𝐀𝐝𝐚𝐩𝐭𝐢𝐯𝐞 𝐓𝐨𝐮𝐫 𝐅𝐞𝐚𝐭𝐮𝐫𝐞𝐬 Improved the user experience of the devlog-ist/landing project with several enhancements to the tour feature. Fixed an issue where the tour button was invisible on light themes by using adaptive colors. Implemented a Popper offset to prevent tooltips from overlapping the target element. Ensured consistent styling by matching the tour modal header's background color to the content area. Added tour replay buttons to mobile menus across all themes and optimized the codebase by removing obsolete JavaScript methods. These updates collectively provide a more polished and user-friendly onboarding experience, making it easier for new users to navigate the application. The changes also improve accessibility by ensuring the tour feature is consistently visible and usable across different themes and devices. Have you faced similar challenges in creating effective user onboarding experiences? What strategies have you found most successful? https://lnkd.in/d_ymfrSV #JavaScript #CSS #HTML

React's useImperativeHandle: Beginner's Guide 🎯 Ever needed to control a child component directly from the parent? That's useImperativeHandle. 🔹 THE PROBLEM React says: "Don't touch the DOM directly." But sometimes you need direct control: - Video player (play/pause/seek) - Input focus management - Third-party library integration That's where useImperativeHandle comes in. 🔹 VIDEO PLAYER EXAMPLE const VideoPlayer = forwardRef((props, ref) => { const videoRef = useRef(); useImperativeHandle(ref, () => ({ play: () => videoRef.current.play(), pause: () => videoRef.current.pause(), seek: (time) => videoRef.current.currentTime = time, })); return <video ref={videoRef} src="movie.mp4" />; }); Parent can now call: playerRef.current.play() 🔹 AUTO-FOCUS FORM FIELD On validation error, auto-focus the first invalid input. No messy state re-renders. 🔹 DO's & DON'Ts ✅ Use for: Imperative libraries, UX edge cases, performance optimization ❌ Don't: Use as prop-drilling shortcut, expose everything, abuse on every component 🔹 THE REAL TALK useImperativeHandle is RARE in good React code. Master it. Then forget about it until you actually need it. Always ask first: "Can I solve this with props and state?" If yes, do that. Questions? 👇 #React #ReactHooks #Frontend #JavaScript #WebDevelopment

Movie Nexus is a responsive frontend web application designed to display and explore movie information through a clean and modern user interface. The project is built using HTML and Tailwind CSS, focusing on responsive design and utility-first styling to ensure consistency across different screen sizes. Next.js is used as the main frontend framework, providing a structured React-based architecture along with efficient routing and component-based development. Live movie data is fetched using the OMDb API, enabling real-time access to movie details such as titles, posters, release year, and ratings. The application is deployed using GitHub Pages, making it easily accessible online and demonstrating the complete development-to-deployment workflow. Through this project, I strengthened my skills in frontend frameworks, API integration, responsive UI design, and modern web development practices. Live Demo: https://lnkd.in/gi_ewkDn GitHub Repository: https://lnkd.in/gtZ3K9Ug #NextJS #React #TailwindCSS #FrontendDevelopment  #APIIntegration #WebDevelopment

𝗛𝗶𝗱𝗱𝗲𝗻 𝗪𝗲𝗯𝘀𝗶𝘁𝗲𝘀 𝗘𝘃𝗲𝗿𝘆 𝗙𝗿𝗼𝗻𝘁𝗲𝗻𝗱 𝗗𝗲𝘃𝗲𝗹𝗼𝗽𝗲𝗿 𝗦𝗵𝗼𝘂𝗹𝗱 𝗞𝗻𝗼𝘄  Everyone knows MDN, StackOverflow, and CodePen… But here are some 𝘭𝘦𝘴𝘴𝘦𝘳-𝘬𝘯𝘰𝘸𝘯 𝘸𝘦𝘣𝘴𝘪𝘵𝘦𝘴 that seriously improve frontend workflow 👇 𝟭️ 𝗥𝗲𝘀𝗽𝗼𝗻𝘀𝗶𝘃𝗲𝗹𝘆 𝗔𝗽𝗽 Test your website on multiple screen sizes at the same time huge time saver for responsive design. 𝟮️ 𝗛𝗮𝗶𝗸𝗲𝗶 Generate beautiful SVG backgrounds, blobs, waves, and patterns in seconds. 𝟯️ 𝗨𝗜 𝗩𝗲𝗿𝘀𝗲 Open-source CSS components you can copy directly into your projects. 𝟰️ 𝗥𝗲𝗮𝗹 𝗚𝗿𝗮𝗱𝗶𝗲𝗻𝘁 Hand-picked modern gradient combinations for professional UIs. 𝟱️ 𝗞𝗲𝘆𝗳𝗿𝗮𝗺𝗲𝘀.𝗮𝗽𝗽 Create CSS animations visually and export clean code. 𝟲️ 𝗦𝗾𝘂𝗼𝗼𝘀𝗵 Compress images without noticeable quality loss perfect for performance optimization. 𝟳️ 𝗪𝗵𝗼𝗰𝗮𝗻𝘂𝘀𝗲 Accessibility-focused version of “Can I Use” helps create inclusive interfaces. 𝟴️ 𝗚𝗲𝘁 𝗪𝗮𝘃𝗲𝘀 Generate SVG wave shapes for hero sections instantly. 𝟵️ 𝗦𝗵𝗼𝘁𝘁𝗿 (𝗼𝗿 𝘀𝗶𝗺𝗶𝗹𝗮𝗿 𝘁𝗼𝗼𝗹𝘀) Capture clean screenshots for portfolio and LinkedIn posts. 𝟭𝟬 𝗕𝘂𝗻𝗱𝗹𝗲𝗽𝗵𝗼𝗯𝗶𝗮 Check package size before installing npm libraries (helps keep apps fast). 💡 Small tools like these can save hours and make your frontend projects look more professional. What’s your favorite “hidden gem” website that most developers don’t know? 👇 #FrontendDevelopment #WebDev #JavaScript #ReactJS #CSS #Programming #Developers #CodingTips

Day 23 of My Web Development Journey 🚀 Today felt more structured and intentional. Over the past few days, I’ve been working with DOM, events, and functions. Now I’m focusing on making everything work together smoothly. Today’s focus: • Improving UI interaction flow • Writing modular JavaScript • Handling edge cases properly • Reducing unnecessary DOM manipulation I’m no longer just attaching events and changing text. I’m thinking about performance, structure, and user experience. Earlier: Write code → Check if it works. Now: Plan logic → Structure functions → Connect to DOM → Test edge cases. That shift is real. The website I’m building is still basic, but the way I approach it is more practical and developer-like. Less random coding. More intentional building. 🧠 Momentum is building — and I can feel the speed increasing without losing clarity. #Day23 #JavaScript #WebDevelopment #FrontendDevelopment #DOMManipulation #CleanCode #CodingJourney #LearnToCode #BuildInPublic #DeveloperGrowth #ProgrammingLife #WebDeveloper #SelfTaughtDeveloper #TechJourney #CodeDaily

Component libraries are a trap. Don't get me wrong, they let you move fast initially. But 6 months down the line, when you need a highly specific custom component, you end up fighting the library's internal CSS overrides and bloating your bundle size. For our frontend, we took a different approach. We used shadcn/ui alongside Tailwind CSS. It’s not a library you install; it’s a collection of reusable components you copy and paste into your apps. ✅ We own the code. ✅ Fully accessible out of the box. ✅ Zero bloat. We built a premium, glassmorphism-inspired UI tailored exactly to our design needs, without hacking through third-party source code. Own your UI layer. Your future self will thank you. #Frontend #UIUX #WebDesign #Reactjs #TailwindCSS #ShadcnUI

🚀 Built a Custom OTP Input Field using React.js Excited to share my latest mini project — an interactive OTP (One-Time Password) input component built using React Hooks. 🔧 Features: ✔️ Auto focus to next input ✔️ Backspace moves to previous field ✔️ Arrow key navigation (Left & Right) ✔️ Only numeric input allowed ✔️ Clean and reusable component structure 🛠 Tech Used: React.js useState useRef useEffect JavaScript (Event Handling) This project helped me strengthen my understanding of: 👉 Controlled components 👉 DOM manipulation using useRef 👉 Keyboard event handling 👉 Better UX design practices Always learning and improving 🚀 #ReactJS #FrontendDevelopment #JavaScript #WebDevelopment #Learning #100DaysOfCode

🎮 Built a Tic-Tac-Toe Game Using HTML, CSS & JavaScript Just completed another fun project — a fully functional Tic-Tac-Toe web game! This project helped me practice JavaScript logic, DOM manipulation, and grid layouts while keeping the UI clean and interactive. 🔹 Features: 🟢 Two-player functionality (X & O) 🎨 Styled game board using CSS Grid ✨ Hover effects for better UX 🧠 Win condition detection logic 🔄 Game reset functionality (if implemented / upcoming) 💡 What I Focused On: Writing clear game logic Managing state between turns Detecting winning combinations Structuring layout using CSS Grid Keeping the design minimal and user-friendly Small games like this are powerful for strengthening: ✔ Problem-solving skills ✔ Logical thinking ✔ JavaScript fundamentals ✔ Clean UI structuring Next Improvements: Add score tracking Add AI (Play vs Computer mode) Add animations for winning combinations Make it fully responsive for mobile Every small project adds one more layer of confidence. 🚀 Would you play against the AI if I add it next? 😄 #WebDevelopment #JavaScript #FrontendDeveloper #CSS #HTML #CodingJourney #BuildInPublic