DOM Property Gotcha: offsetTop vs offsetHeight

Built a Color Palette Generator 🎨 | DOM Project Recently, I built a Color Palette Generator using JavaScript and DOM manipulation. This project allows users to generate colors in both HEX and RGB formats, along with a Light & Dark mode . -> Generate random colors in HEX & RGB codes ->Toggle between Light and Dark mode ->Dynamically update UI using DOM manipulation  ->Improved understanding of events and styling -> Focused on building interactive UI features Working with both HEX and RGB gave me a better understanding of how colors are handled in web development. Big thanks to Suraj Kumar Jha for the guidance throughout the cohort. Hitesh Choudhary | Akash Kadlag | Piyush Garg #JavaScript #DOM #WebDevelopment #FrontendDevelopment #CodingJourney #BuildInPublic #LearnInPublic #100DaysOfCode #Programming #TechJourney #UIUX

🔦 Custom Spotlight Effect — Cursor-Driven Interaction Experiment Built a custom spotlight effect where the light dynamically follows the cursor movement, revealing content as it moves across the screen. The idea behind this project was to explore how mouse tracking + DOM manipulation + CSS masking techniques can completely transform a normal UI into something immersive and interactive. Instead of a static background, the interface responds in real-time — creating a focused “spotlight” area controlled entirely by user movement. What I focused on: • Tracking cursor position using JavaScript • Updating element styles dynamically via DOM • Creating a smooth spotlight illusion using CSS • Optimizing movement for fluid performance • Designing an experience that feels modern and interactive This project helped me understand how powerful small interaction experiments can be. It’s not about adding complexity — it’s about controlling attention through motion. Frontend development becomes exciting when the UI reacts to you. Mentor: Sheryians Coding School | Sarthak Sharma | Harsh Vandana Sharma | Ankur Prajapati 🧠 Tech Stack: HTML | CSS | SCSS | JavaScript (DOM) #JavaScript #DOM #FrontendDevelopment #WebAnimation #CreativeCoding #InteractiveUI #CSS #SCSS #BuildInPublic #DeveloperJourney

🎯 CSS Fix: Text Overflow Issue Ever faced this problem? 👇 Long text breaking your UI layout 😵💫 Instead of letting it overflow, use this: .text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } Now long text will look like: 👉 “This is a very long text…” Clean UI ✨ Better user experience 🚀 Small CSS tricks like this make a big difference in real projects. Have you used this before? #CSS #FrontendDeveloper #WebDevelopment #UIDesign #Programming

Everyone says frontend is easy... “Just center a div.” It sounds simple… until you open the same UI on a different screen. On your machine, everything looks perfect. The layout is clean, aligned, and exactly how you designed it. Then it runs on another device. The alignment shifts. The spacing breaks. The layout starts behaving differently. And suddenly, that “easy frontend” doesn’t feel easy anymore. Because frontend doesn’t run in a controlled environment. It runs across different screen sizes, different browsers, and different rendering engines. What works perfectly in one setup can behave completely differently in another. That centered div depends on its parent, the layout system, the viewport, and how the browser interprets all of it. Frontend isn’t about making something look right once. It’s about making sure it stays right everywhere. If it was really as simple as people say, why do so many production apps still ship with broken layouts and poor mobile experiences? The truth is simple. Anyone can center a div. Not everyone can build a UI that holds up in the real world. #WebDevelopment #FrontendDevelopment #SoftwareEngineering #UIUX #JavaScript #CSS #ResponsiveDesign #Developers #Programming #WebDesign #FullStackDeveloper

#Hello #Connections 👋 #100DaysOfCodeChallenge | #Day42 🚀 Project: Netflix Clone UI 📌 What I built Today I created a modern Netflix Clone UI that replicates the look and feel of the Netflix landing page. It includes a hero section with a dark overlay, a stylish header, and a trending movies section with hover effects for a better user experience. 🛠 Technologies Used HTML5 CSS3 (Flexbox, Gradients, Pseudo-elements, Hover Effects) ⚠ Challenge I faced Creating the curved section divider and maintaining proper spacing/layout while keeping the design visually clean. ✅ How I solved it Used CSS pseudo-elements (::before) with border-radius and positioning to create the curved effect, and carefully adjusted layout spacing using Flexbox. 🌐 Live Demo: https://lnkd.in/dhBtauHH 💬 Open to feedback and suggestions 🚀 🙏 Code Of School Avinash Gour | Ritendra Gour #FrontendDeveloper #HTML5 #CSS3 #WebDevelopment #100DaysOfCode #DeveloperJourney #UIClone

🚀 Just Built My First Image Comparison Slider! Excited to share my latest mini project using HTML, CSS & JavaScript 💻🔥 This interactive slider lets users compare two images smoothly with a draggable line — a simple concept but super powerful for UI/UX (before/after effects, product comparisons, edits, etc.) 💡 What I learned from this project: ✔ DOM manipulation & event handling ✔ Creating smooth user interactions ✔ Improving UI responsiveness ✔ Writing clean and structured JS This is just the beginning — more creative and advanced projects coming soon InShaAllah! 💯 👉 Check out the demo and let me know your feedback in the comments 👉 Suggestions are always welcome 🙌 #WebDevelopment #FrontendDeveloper #JavaScript #HTML #CSS #UIDesign #UXDesign #CodingJourney #100DaysOfCode #Developers #LinkedInDevelopers #Programming #CodeNewbie #TechCommunity #BuildInPublic #CreativeCoding #FrontendProjects #SoftwareEngineering #LearningByDoing #Innovation #CodeDaily #DevLife 🚀

I built a Tabs component with 15 props once. It worked. Nobody could use it. Day 3 of my frontend system design series is about the 3-component patterns that actually solve this: → Custom hooks — share stateful logic across components → Compound components — build flexible UI as Radix/Headless UI does → Render props — give consumers full control over rendering The one that changed how I write components: Compound components. Instead of passing everything as props into one giant component, you give consumers a parent + child API. They control the structure. You control the state. That's how Tabs, Accordions, and Selects should be built. Full blog with code examples 👇 [link in first comment] Following GreatFrontend's system design curriculum and posting daily. Follow along if you're leveling up, too. #ReactJS #Frontend #JavaScript #WebDev #SystemDesign

One UI component taught me more than weeks of theory. I rebuilt a simple card UI. Sounds basic, right? It wasn’t. What started as a small frontend task quickly turned into a deep dive into how real-world interfaces actually work. Here’s what that one component taught me: → Responsiveness isn’t just breakpoints It’s about fluid layouts, content priority, and how users interact across devices. → Animations are not decoration Done right, they guide attention, improve perceived performance, and make the UI feel alive. → Accessibility is non-negotiable Keyboard navigation, semantic HTML, focus states — small details, massive impact. → State management matters even in “small” components Handling hover, loading, and dynamic data cleanly separates good UI from great UI. → Performance is hidden in the details Image optimization, lazy loading, avoiding unnecessary re-renders — these are the real differentiators. The biggest realization? Frontend isn’t about building components. It’s about crafting experiences. And sometimes, rebuilding something simple teaches you more than consuming endless tutorials. What’s one “small” project that changed how you think as a developer? #frontend #reactjs #webdevelopment #uiux #javascript #programming #developers #learninginpublic

𝐘𝐨𝐮 𝐚𝐫𝐞 𝐜𝐫𝐞𝐚𝐭𝐢𝐧𝐠 𝐦𝐨𝐝𝐚𝐥𝐬 𝐭𝐡𝐞 𝐰𝐫𝐨𝐧𝐠 𝐰𝐚𝐲.⁣ ⁣ Most React devs just drop a modal component inside their current tree and slap a z-index on it.⁣ ⁣ It works. Until it doesn't.⁣ ⁣ The real problem?⁣ ⁣ - Your modal lives inside a 𝐝𝐞𝐞𝐩𝐥𝐲 𝐧𝐞𝐬𝐭𝐞𝐝 𝐃𝐎𝐌 𝐧𝐨𝐝𝐞.⁣ - 𝐂𝐒𝐒 𝐨𝐯𝐞𝐫𝐟𝐥𝐨𝐰: 𝐡𝐢𝐝𝐝𝐞𝐧 from a parent? Your modal gets clipped.⁣ - 𝐳-𝐢𝐧𝐝𝐞𝐱 𝐬𝐭𝐚𝐜𝐤𝐢𝐧𝐠 𝐜𝐨𝐧𝐭𝐞𝐱𝐭 from a wrapper? Your modal loses the battle.⁣ - 𝐒𝐜𝐫𝐞𝐞𝐧 𝐫𝐞𝐚𝐝𝐞𝐫𝐬? Confused by where the dialog actually lives.⁣ ⁣ That's not a modal. That's a 𝐝𝐢𝐯 𝐰𝐞𝐚𝐫𝐢𝐧𝐠 𝐚 𝐝𝐢𝐬𝐠𝐮𝐢𝐬𝐞.⁣ ⁣ 𝐄𝐧𝐭𝐞𝐫 𝐜𝐫𝐞𝐚𝐭𝐞𝐏𝐨𝐫𝐭𝐚𝐥.⁣ ⁣ Instead of rendering inside the component tree, 𝐜𝐫𝐞𝐚𝐭𝐞𝐏𝐨𝐫𝐭𝐚𝐥 𝐭𝐞𝐥𝐞𝐩𝐨𝐫𝐭𝐬 𝐲𝐨𝐮𝐫 𝐦𝐨𝐝𝐚𝐥 𝐝𝐢𝐫𝐞𝐜𝐭𝐥𝐲 𝐭𝐨 𝐝𝐨𝐜𝐮𝐦𝐞𝐧𝐭.𝐛𝐨𝐝𝐲 — outside every stacking context, outside every overflow trap.⁣ ⁣ Here's what that unlocks:⁣ ⁣ - 𝐍𝐨 𝐳-𝐢𝐧𝐝𝐞𝐱 𝐰𝐚𝐫𝐬⁣ - 𝐍𝐨 𝐜𝐥𝐢𝐩𝐩𝐢𝐧𝐠 from parent overflow rules⁣ - Proper 𝐟𝐨𝐜𝐮𝐬 𝐭𝐫𝐚𝐩𝐩𝐢𝐧𝐠 and accessibility⁣ - Clean animation transitions 𝐰𝐢𝐭𝐡𝐨𝐮𝐭 𝐥𝐚𝐲𝐨𝐮𝐭 𝐬𝐢𝐝𝐞 𝐞𝐟𝐟𝐞𝐜𝐭𝐬⁣ ⁣ And the best part?⁣ ⁣ It still behaves like a 𝐫𝐞𝐠𝐮𝐥𝐚𝐫 𝐑𝐞𝐚𝐜𝐭 𝐜𝐡𝐢𝐥𝐝.⁣ State, props, context — all connected to the parent.⁣ The logic stays in your component tree.⁣ 𝐎𝐧𝐥𝐲 𝐭𝐡𝐞 𝐃𝐎𝐌 𝐧𝐨𝐝𝐞 𝐦𝐨𝐯𝐞𝐬.⁣ ⁣ I combined 𝐜𝐫𝐞𝐚𝐭𝐞𝐏𝐨𝐫𝐭𝐚𝐥 with 𝐫𝐞𝐪𝐮𝐞𝐬𝐭𝐀𝐧𝐢𝐦𝐚𝐭𝐢𝐨𝐧𝐅𝐫𝐚𝐦𝐞 - based state to get smooth enter/exit animations — no flash, no layout jank, just clean transitions synced to the browser's paint cycle.⁣ ⁣ That's what 𝐩𝐫𝐨𝐝𝐮𝐜𝐭𝐢𝐨𝐧-𝐠𝐫𝐚𝐝𝐞 𝐦𝐨𝐝𝐚𝐥 𝐛𝐞𝐡𝐚𝐯𝐢𝐨𝐫 looks like.⁣ ⁣ If you're not using 𝐜𝐫𝐞𝐚𝐭𝐞𝐏𝐨𝐫𝐭𝐚𝐥 for modals, overlays, or tooltips — you're 𝐟𝐢𝐠𝐡𝐭𝐢𝐧𝐠 𝐭𝐡𝐞 𝐃𝐎𝐌 instead of working with it.⁣ ⁣ Are you using createPortal in your projects? Or still doing it the hard way? 👇⁣ ⁣ #React #Frontend #WebDevelopment #JavaScript #SoftwareEngineering

🎨 Fixing UI Styling Issues After a Library Update After upgrading a library, some UI elements broke unexpectedly. 🔍 Problem: CSS styles were overridden due to version changes. 🛠 Approach: Inspected elements using browser DevTools Identified conflicting CSS classes Updated styles accordingly ⚡ Result: UI behavior returned to normal. 📚 Learning: Frontend debugging requires attention to detail and strong DevTools usage. #FrontendDevelopment #CSS #Debugging