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

𝐏𝐫𝐨𝐣𝐞𝐜𝐭 𝐔𝐩𝐝𝐚𝐭𝐞: 𝐇𝐓𝐌𝐋, 𝐂𝐒𝐒 & 𝐉𝐚𝐯𝐚𝐒𝐜𝐫𝐢𝐩𝐭 𝐈𝐧𝐭𝐞𝐫𝐚𝐜𝐭𝐢𝐯𝐞 𝐁𝐮𝐭𝐭𝐨𝐧 After working on my JavaScript skills, I built a simple yet engaging project -an animated download button using HTML, CSS, and JavaScript. This project focuses on creating a smooth user experience. When the button is clicked, it triggers an animation that visually represents a download process. The button expands, a progress-like effect runs using CSS animations, and after a few seconds, it changes into a “Completed” state with an updated icon. Through this project, I practiced: • DOM manipulation in JavaScript • Event handling • Using setTimeout for timed actions • CSS animations and transitions • Creating interactive UI elements It’s a small project, but it helped me understand how frontend technologies work together to create dynamic and user-friendly interfaces. Below is the link of the project: https://lnkd.in/dGkNSnqW #WebDevelopment #JavaScript #CSS #HTML #CodingJourney #LearnToCode #Programming #DeveloperLife

🚀 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

🚀 Built a Background Changer using HTML, CSS & JavaScript Excited to share my latest mini project where I created a Background Color Changer 🎨 💡 With just a click, the entire background changes — simple idea, but a great way to strengthen core concepts! 🔹 What I used: • HTML for structure • CSS for styling • JavaScript for interactivity 🔹 Key Learnings: • DOM manipulation in JavaScript • Handling events like clicks • Writing clean and interactive UI logic • Improving user experience with small features 🔗 Live Demo: https://lnkd.in/eSmF8Qdw 💻 GitHub Repo: https://lnkd.in/eU-N3P2J This project reminded me that even small builds can teach big concepts 💯 I’m focusing on building consistently and improving step by step 🚀 💬 What was the first JavaScript project you built? #WebDevelopment #JavaScript #HTML #CSS #Frontend #CodingJourney #BuildInPublic

Day 6/30 — JavaScript Journey JavaScript DOM Manipulation ⚡ Turn static pages into interactive systems. 🧠 Core Idea DOM = your webpage as a live structure you can control 🔥 The 4 Powers Select → target elements Change → update text, style, classes Listen → react to user actions Create/Delete → add or remove UI dynamically ⚡ Real Flow User action → Event → JavaScript → DOM update → Instant UI change 🧩 Mental Model HTML = Structure CSS = Design JS (DOM) = Control Brain 🧠 🚀 Why it matters Makes apps interactive Foundation of all frontend frameworks Critical for interviews + real projects ⚠️ Common Mistakes Over-updating DOM (slow performance) Ignoring event handling Treating DOM like static HTML 💥 Power Insight Master DOM = You control what users see, feel, and click.

Day 24 of my JavaScript journey 🚀 Built a Team Members Showcase with an interactive UI using HTML, CSS, and JavaScript. Features: 👥 Display team member profiles 🌙 Dark mode toggle for better user experience ✨ Interactive and responsive design This project helped me combine design with functionality, focusing on creating user-friendly and dynamic interfaces. 🔗 Live Demo: https://lnkd.in/gXESdSkX 💻 GitHub Repo: https://lnkd.in/ghWnBgkW Continuing to improve both UI design and JavaScript logic step by step. 💻 #JavaScript #WebDevelopment #FrontendDeveloper #100DaysOfCode #CodingJourney

🚀 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

This modern countdown timer UI was built using pure HTML, CSS, and JavaScript — without relying on any frameworks or libraries. ✨ Features: Live countdown (Days, Hours, Minutes, Seconds) Real-time updates every second Clean and modern UI design Smooth user experience 🛠 Tech Stack: HTML CSS JavaScript (Vanilla JS) 💡 What I learned: Working with Date & Time in JavaScript DOM manipulation Event handling & intervals Building dynamic UI updates from scratch Improving UI/UX design skills This project helped me strengthen my core JavaScript fundamentals and better understand how real-time applications work. 📸 (Check out the UI in the image below 👇) 💻 GitHub: https://lnkd.in/d9Aj_Vct I’d really appreciate your feedback! #JavaScript #FrontendDevelopment #WebDevelopment #Coding #Projects #Learning

For 25 years, the <select> element has been impossible to style. Every project ends the same way -- you reach for React Select, Headless UI, or some custom div-based dropdown. 30KB of JavaScript just to make a dropdown look good. That era is ending. With appearance: base-select (Chrome 134+), you can now fully customise the native <select> using pure CSS: -- Style the dropdown panel with ::picker(select) -- Replace the arrow with ::picker-icon -- Put images, icons, and descriptions inside <option> -- Animate open/close with @starting-style -- Full keyboard and screen reader accessibility -- built in Zero JavaScript. ~20 lines of CSS. And browsers that don't support it still get a working native select. I wrote about the new elements, real code examples, and when you still need a JS library: https://lnkd.in/eT5i3VTC #CSS #HTML #WebDevelopment #FrontEnd #DesignSystems #Accessibility

🚀 Just Built a Live Code Editor in the Browser! Share my latest mini project — a Live HTML, CSS & JavaScript Editor 💻✨ 🔹 Real-time preview using iframe 🔹 Clean dark/light theme toggle 🌗 🔹 One-click copy & download 🔹 Fully responsive layout 📱 🔹 Preloaded landing page template to get started instantly This project helped me sharpen my skills in: ✔️ DOM manipulation ✔️ UI/UX design ✔️ JavaScript event handling ✔️ Responsive layouts 💡 It’s amazing how powerful pure HTML, CSS, and JavaScript can be without any frameworks! Would love your feedback and suggestions 🙌 What feature should I add next? 🤔 #WebDevelopment #JavaScript #Frontend #Coding #BuildInPublic #Developer #HTML #CSS #Editor #LiveEditor #MiniProject #VEDESH