Building a JavaScript Image Slider: Lessons Learned

I recently built an **infinite Mandelbrot set zoom** using only **vanilla HTML, CSS, and JavaScript** — no libraries or frameworks, just the math behind it. The animation continuously zooms into **Seahorse Valley**, one of the most detailed regions of the Mandelbrot set. As the zoom goes deeper, the renderer automatically increases the iteration depth so the details keep revealing themselves instead of fading out. A few things that made this possible: → Smooth escape-time coloring with logarithmic normalization → Chunk-based async rendering so the browser stays responsive → Iteration depth that scales with the zoom level → A cyclic sine-wave color palette that subtly shifts as the zoom progresses What fascinates me most about the Mandelbrot set is how **infinite complexity can emerge from a single simple equation:** *z = z² + c* You can try the zoom yourself here 👇 https://lnkd.in/d6jPhfT5 #JavaScript #WebDev #Mathematics #CreativeCoding #Fractals

Build smooth accordions. No JavaScript required. The trick lies in the <details> and <summary> elements. They’re semantic, accessible, and work right out of the box. Keyboard support? Built in. Screen readers? Fully supported. So where does the smooth animation come from? CSS Grid. Instead of max-height hacks or JavaScript, you can animate the accordion using grid-template-rows. Here’s the idea. When the accordion is closed, the row height is 0fr. When it opens, it smoothly grows to 1fr. Grid handles that transition perfectly. No timing issues. No clipping. Just fluid motion. The result feels natural, clean, and entirely CSS-driven.

#Hello_Connections #Day14 of #100DaysofCodeChallenge Project Name: Expanding Image Gallery Details:Built an interactive Expanding Image Gallery using HTML, CSS, and JavaScript. When a user clicks on a card, it smoothly expands while the others shrink, creating a dynamic and engaging horizontal scrolling effect. What I Focused On: DOM manipulation using JavaScript Handling click events efficiently Class toggling for dynamic styling Smooth transitions and scaling effects Horizontal scrolling with scrollIntoView() Key Features: Click-to-expand card interaction Smooth scrolling to active card Animated scaling and opacity effects Responsive horizontal layout Hidden scrollbar for cleaner UI Gradient background design Challenges:Ensuring only one card stays active at a time and making the transition smooth without layout breaking. How I Solved It:Used querySelectorAll() to target all cards, removed the active class from the current card, and dynamically added it to the clicked card. Applied CSS transitions and flex adjustments to create the expanding animation effect. This project helped me understand event handling, dynamic class manipulation, and building interactive UI components with JavaScript. Code Of School - Avinash Gour & Ritendra Gour sir #Day14 #100DaysOfCode #FrontendDevelopment #HTML #CSS #JavaScript #WebDevelopment #InteractiveUI #LearningInPublic

🔥 I just built a mesmerising fire embers particle effect using React and pure CSS! 🔥 I wanted to challenge myself to create a highly visual, realistic particle system without relying on Canvas, WebGL, or JavaScript animation loops. The result is a lightweight, responsive component that brings a campfire atmosphere right to the browser. 🛠️ How it works under the hood: • Built with React 19 and Vite 7 • Uses CSS Custom Properties to dynamically generate 50 unique particles with randomised sizes, colours (warm yellows to deep oranges), and speeds. • Powered completely by Pure CSS Keyframes for the rising, erratic drifting, and flickering animations, leaving the main thread completely free! ⚡ I’ve attached a quick 10-second video below to show off the effect, but you can also see it for yourself! 👀 Try the live demo: https://lnkd.in/e3cqHSyJ 💻 Check out the source code: https://lnkd.in/eZ3gfKAx #ReactJS #CSS #WebDevelopment #Frontend #WebAnimation #JavaScript

🥁 Built an Interactive Drum Kit Using JavaScript DOM! I recently built a Drum Kit Web App to strengthen my understanding of DOM manipulation and event handling in JavaScript. You can play the drums by: 🎵 Clicking the buttons ⌨️ Pressing keys on your keyboard Each key triggers a unique sound along with a button animation effect. 💡 What I Practiced: 1.DOM Selection (querySelectorAll) 2.Event Listeners (Click & Keypress) 3.JavaScript Audio Object 4.Switch Statements 5.Class Manipulation 6.setTimeout() for animations 💻 GitHub Repository: 👉 https://lnkd.in/gfRUffKN This project helped me understand how JavaScript interacts with HTML & CSS in real time. Small project. Big learning. 🚀 If you're learning frontend development — build projects. That’s where real understanding happens. 💡 #JavaScript #WebDevelopment #Frontend #DOM #100DaysOfCode #LearningInPublic #FrontendDeveloper

🚀 JavaScript – Flex Panels Image Gallery Built an interactive Image Gallery using HTML, CSS (Flexbox), and Vanilla JavaScript 🎯 This project helped me strengthen my understanding of layout systems and DOM event handling. 🔹 What I Learned- How flex: 1 distributes available space equally across elements Deep understanding of Flexbox behavior Using CSS pseudo-selectors like :first-child and :nth-child(n) Difference between em and rem em → relative to parent rem → relative to root (html) Handling dynamic animations using the transitionend event in JavaScript ⚙️ Challenge : Managing animation timing correctly using the transitionend event and understanding how CSS units (em, rem) behave in nested layouts. 🔗 GitHub Repo: https://lnkd.in/gT3kKbCE #JavaScript #LearningInPublic #WebDevelopment #StudentDeveloper

Happy St. Patrick's Day! ☘️ I built a small interactive web experience for the occasion — a pot of gold you can actually click. What I practiced with this project: • CSS keyframe animations & physics-style coin arcs • Dynamic DOM manipulation with vanilla JS • SVG illustration entirely in code • Deployed via GitHub Pages in under 5 minutes Sometimes the best way to sharpen your skills is to build something fun and ship it. Try it here →[https://lnkd.in/g3jcGzcn] #WebDevelopment #JavaScript #FrontendDev #BuildInPublic #StPatricksDay #100DaysOfCode #OpenSource

#Hello #Connections 👋 #100DaysOfCodeChallenge | #Day28 🚀 Project: HSL Color Generator 📌 What I built Today, I built an interactive HSL Color Generator that allows users to dynamically adjust Hue, Saturation, and Lightness using sliders and instantly preview the generated color. The selected color updates in real-time and can be copied to the clipboard with a single click. 🛠 Technologies Used HTML5 (Structure) CSS3 (Responsive Design, Animations, Transitions) JavaScript (DOM Manipulation, Event Handling, Clipboard API) ⚠ Challenge I faced Synchronizing slider values with real-time UI updates while keeping the background and preview section perfectly in sync. ✅ How I solved it Used input event listeners on all range sliders to trigger a single updateColor() function. Dynamically generated the HSL string and applied it to both the preview box and body background. Implemented navigator.clipboard.writeText() for the copy functionality. 💬 Feedback is always welcome 🙌 🔗 Live project link in comments 👇 🙏 Code Of School Avinash Gour | Ritendra Gour #FrontendDeveloper #JavaScript #CSS3 #HTML5 #WebDevelopment #UIDesign #DeveloperTools #100DaysOfCode #PortfolioProject #LearningJourney

🚀 Project Showcase: Tic Tac Toe Game using HTML, CSS & JavaScript Excited to share one of my recent mini-projects – a Tic Tac Toe Game built using HTML, CSS, and JavaScript! 🎮 This project helped me strengthen my understanding of DOM manipulation, game logic, and responsive UI design. 🔹 Key Features: Interactive 2-player gameplay Dynamic win detection logic Clean and responsive user interface Reset game functionality 🔹 Technologies Used: HTML – Structure of the game board CSS – Styling and layout JavaScript – Game logic and interactivity Building this project was a great way to practice JavaScript fundamentals and problem-solving skills while creating something fun and interactive. Looking forward to building more projects and continuously improving my development skills! 💻✨ Check my GitHub repo : 🔗 https://lnkd.in/gCz98WpX Day 5 of #100DaysOfCode #WebDevelopment #JavaScript #HTML #CSS #FrontendDevelopment #CodingProjects #LearningJourney

Day 62/100 🚀 Built a Rock–Paper–Scissors game using HTML, CSS, and JavaScript. Play against the computer and the score updates dynamically. Next step: adding animations and sound effects to improve the experience. 🔗Live Demo : https://lnkd.in/dEYfa7zd 💻GitHub Code:https://lnkd.in/ddjK3m7P #100DaysOfCode #JavaScript #WebDev #BuildInPublic