🚀 Just Built an Interactive Card UI using HTML, CSS & JavaScript (DOM)! I recently worked on a project where I created a dynamic card system using pure HTML, CSS, and JavaScript DOM manipulation. The concept was to make it simple yet interactive and visually engaging. ✨ Key Highlights: • Users can submit a form to dynamically generate cards • Smooth navigation with Up & Down buttons to browse cards • Implemented proper form validation for better user experience • Added subtle micro-interactions and effects to enhance UI feel This project helped me strengthen my understanding of DOM manipulation, event handling, and building interactive UI without any frameworks. 🔗 Live Demo: https://lnkd.in/diPtMk84 💻 GitHub Repo: https://lnkd.in/dtyxNZ5t Always learning, building, and improving 🚀 #WebDevelopment #JavaScript #HTML #CSS #FrontendDevelopment #DOM #UIUX #Coding #Developers #Projects

Dynamic Image Generation using JavaScript (createElement & setAttribute): I’m excited to share another JavaScript DOM project where I implemented dynamic image generation on button click. In this project, when the button is clicked, multiple images are created dynamically and displayed at different random positions on the screen. This creates a fun and interactive visual effect. Key concepts I practiced in this project: 1. createElement() – Dynamically creating image elements 2. setAttribute() – Setting attributes like src and positioning 3. DOM Manipulation – Adding elements to the webpage in real time 4. Event Handling – Triggering actions using button clicks 5. Dynamic UI Behavior – Generating multiple elements with different positions Through this project, I clearly understood how to create and insert elements dynamically into the DOM, and also strengthened my knowledge of setAttribute() and interactive UI design. Building projects like this is helping me improve my creativity and confidence in JavaScript. Checkout my full project code on github: https://lnkd.in/gqPQptPS Feedback and Suggestions are always welcome! 😊 #JavaScript #DOMManipulation #FrontendDevelopment #WebDevelopment #JavaScriptProjects #CodingJourney #LearningByDoing #BeginnerDeveloper #UIInteraction

🚀 Building a Profile Card UI with HTML & CSS Today I worked on improving my frontend skills by creating a simple profile card UI 💻 🔹 What I practiced: Centering elements using Flexbox Creating a split background (blue & white card) Designing a circular profile image with double border Aligning icons and text in a single line Adding social stats (❤️ Likes | 💬 Comments | 🔗 Share) Fixing alignment issues using align-items: center 💡 One small thing I learned: Instead of manually adding separators like |, we can use CSS (::after) for a cleaner and more professional approach. 🔗Project Link: https://lnkd.in/gTtAZ4Md 📌 Still learning and improving step by step! #HTML #CSS #FrontendDevelopment #WebDevelopment #LearningJourney #UIUX #Coding

🎮 Mole Smash Game – HTML | CSS | JavaScript 🌐 Live Demo: https://lnkd.in/g5JePc_M 📂 GitHub Repository: https://lnkd.in/gC2y2ngj 🛠️ Built With: 🧩 HTML for structure 🎨 CSS for layout and animations ⚡ JavaScript for game logic and interactivity 💡 What I implemented: 🔹 Dynamic DOM manipulation to show/hide moles 🔹 Randomized game behavior using JavaScript functions 🔹 Score tracking and real-time updates 🔹 Countdown timer with game control logic 🔹 Event handling for user clicks (smash interaction) 🔹 Smooth animations using CSS transitions 🧠 What I learned: 🔹 How to manipulate DOM elements dynamically 🔹 Managing game state using JavaScript 🔹 Using timers (setInterval, setTimeout) effectively 🔹 Handling user interactions and updating UI in real-time 🙏 Special thanks to: 🔹Alakhananda M N(Mentor) for continuous encouragement 🔹Sarath Lal(Trainer) for teaching standard development practices 🔹Luminar Technolab for providing a great learning environment This project helped me understand how JavaScript brings static pages to life by adding logic, interactivity, and user-driven behavior. More interactive projects coming soon 🚀 #JavaScript #WebDevelopment #FrontendDevelopment #DOM #LearningJourney #MERN #GameDevelopment #LuminarTechnolab

🚀 Building a Dynamic Reels UI with Vanilla JavaScript I recently challenged myself to build a fully functional Reels/Shorts section from scratch! This project allowed me to dive deep into how social media platforms manage complex interactions and dynamic content. 🛠️ Key Features: Dynamic Rendering: Generating the entire feed dynamically from an array of objects (simulating a database/API response). Smart Event Delegation: Instead of adding hundreds of listeners, I used a single event listener on the parent container to handle likes, follows, and interactions. Double-Tap to Like: Implemented a custom "lastTap" logic to detect double-clicks on the video, triggering the heart animation and updating the state. Real-time State Updates: Seamlessly toggling "Follow/Unfollow" and "Like" status while updating the UI counters instantly. 🧠 Technical Takeaway: One of the most interesting parts was managing the data-index attributes to ensure that when a user interacts with a specific reel, the logic precisely targets the correct data object and DOM element. Tech Stack: HTML5, CSS3 (Flexbox/Positioning), and Vanilla JavaScript. Check out the demo below! 👇 #WebDevelopment #Javascript #FrontendDeveloper #CodingProject #Programming #HTML #CSS #UIDesign

🔥 Day 1/30 — Master CSS Animations Starting a 30-day series where I break down the best CSS animations every developer should know. Day 1: Neon Text Glow ⚡ No frameworks. No shortcuts. Just pure CSS. HTML <div class="preview-wrapper"> <h1 class="neon-text" data-text="NEON">NEON</h1> </div> If you’re serious about frontend, this series will push your UI skills to the next level. Follow the journey. #CSSAnimation #Frontend #WebDevelopment #ReactJS #UIDesign #LearnInPublic

🚀 Built a Matrix-Style Text Effect using HTML, CSS & JavaScript Ever wondered how those hacker-style scrambling texts work? I tried recreating that exact effect — and here’s what I learned 👇 💻 Project Overview Created a dynamic “Matrix text reveal” effect where random characters gradually transform into the actual message: 👉 "Welcome To The Admin Dashboard, USER!" ⚙️ How it works (simple breakdown): • Split original text into characters • Replace each character with random letters • Gradually reveal correct letters using an iteration logic • Update UI smoothly using setInterval() 🧠 Key Concepts I Practiced: ✔ DOM Manipulation (querySelector, innerText) ✔ Higher-order functions (map, split, join) ✔ Randomization logic (Math.random) ✔ Animation timing & control ✔ Clean UI design with CSS 🎯 What I Learned: This wasn’t just about visuals — it helped me understand: • How animations actually work under the hood • How to think in terms of logic + UI together • How small projects can strengthen core JavaScript 🔥 Next Steps: Planning to level this up by: • Triggering animation on hover/click • Adding sound effects 🎧 • Making it reusable as a component 📌 Takeaway: You don’t need complex frameworks to build something cool. Strong fundamentals = powerful creativity. #JavaScript #WebDevelopment #Frontend #Coding #Projects #LearningInPublic #100DaysOfCode #DeveloperJourney #matadeenyadav #MatadeenYadav

Learning and practicing advanced, modern CSS while upgrading my styling skills 🎯 Built a hover effect using pure HTML & CSS—focusing on writing cleaner, more dynamic styles without JavaScript. As part of this practice, I explored: • Custom CSS properties (variables) – to make styles reusable, scalable, and easier to maintain • @property – to define and control how custom properties behave, enabling smoother and more predictable animations • CSS animations & keyframes – to create structured, step-by-step motion effects • Transition effects – for smooth and responsive hover interactions • Linear + conic gradients – combined creatively to achieve more modern and visually rich UI effects This project helped me better understand how powerful CSS alone can be for building interactive experiences, while also strengthening my fundamentals. Consistent practice and revisiting core concepts really make a difference. 🚀 #CSS #FrontendDevelopment #WebDevelopment #UI #LearningInPublic #CodeNewbie

🚀#Day_Progress_Update_Frontend_Journey Today’s learning was all about making the UI more interactive and dynamic using HTML, CSS, and JavaScript. 🎯 I built a small project where bubbles appear on the screen exactly at the position where the user clicks. 🫧✨ 🔍 What I worked on: • Capturing user click events using JavaScript • Getting exact mouse coordinates (X & Y position) • Dynamically creating elements using DOM manipulation • Styling bubbles with CSS (shape, color, animation) • Positioning elements precisely on the screen 💡 What I learned: This project helped me understand how real-time user interaction works in web applications. I also got more comfortable with event handling and how JavaScript connects with HTML & CSS to create engaging UI effects. ⚡ It may look like a small feature, but it’s a big step toward building interactive web apps and improving my frontend skills. Consistency is key — learning something new every day! 💻🔥 #WebDevelopment #JavaScript #Frontend #CodingJourney #LearningInPublic #100DaysOfCode

✨ How to make stacking cards with only CSS! 🃏 ✨ 🚫 No JavaScript needed! 🚫 👀 Have you ever seen that smooth effect where cards stack on top of each other as you scroll? Here is a simple way to build it using only CSS! 👀 🧩 Step 1: Start with a basic structure using a list and card items! 🧩 📐 Step 2: Use CSS Grid to create vertical space so the page can scroll. Each card sits in its own tall row! 📐 📌 Step 3: Apply position sticky to each card so they stop at the same point while scrolling. Then use a small offset based on their order to create the stacking effect! 📌 🎬 Step 4: Add depth with a scroll-based animation. Scale each card slightly using its index so the front cards feel closer and the back ones feel further away! 🎬 ✅ That is it. A clean stacking card effect using only CSS! ✅ ⚡ No JavaScript. Just modern CSS doing powerful things! ⚡ ⚠️ Make sure to check browser support before using these newer features! ⚠️ 🙏🏻 Animation Courtesy: Utsav M. 🙏🏻 #CSS #WebDevelopment #Frontend #UIDesign #WebDesign #Coding #Developers #100DaysOfCode #Tech #Programming