The latest articles on DEV Community by Yash Soundane (@yash_soundane_5c8b7fc4a20). https://dev.to/yash_soundane_5c8b7fc4a20 https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3372637%2F9350aa17-bffa-447c-8be8-211e6c3bd670.jpg https://dev.to/yash_soundane_5c8b7fc4a20 en Yash Soundane Sun, 20 Jul 2025 21:10:45 +0000 https://dev.to/yash_soundane_5c8b7fc4a20/i-built-a-pomodoro-timer-web-app-my-first-mini-product-with-html-css-js-53dk https://dev.to/yash_soundane_5c8b7fc4a20/i-built-a-pomodoro-timer-web-app-my-first-mini-product-with-html-css-js-53dk <p>Hey devs 👋</p> <p>I've been learning and practicing frontend development, and I just completed my <strong>first real-world project</strong>: a clean and customizable <strong>Pomodoro Timer web app</strong>! 🕒🍅</p> <h2> 🔧 What I Built </h2> <p>It's a <strong>simple productivity tool</strong> that helps you stay focused during work or study sprints. I wanted to build something functional, good-looking, and useful — and it really helped sharpen my JS skills.</p> <h2> 🚀 Features: </h2> <ul> <li>⏳ Custom Pomodoro session length</li> <li>🔊 Beep sound alert when time's up</li> <li>🖱️ Start, Stop, and Reset controls</li> <li>🧼 Clean UI with the Poppins font</li> <li>🎯 No ads, no fluff — just focus</li> </ul> <h2> 🛠️ Tech Stack: </h2> <ul> <li>HTML5</li> <li>CSS3</li> <li>Vanilla JavaScript</li> </ul> <h2> 🌐 Try It Out: </h2> <p>Live Demo: [<a href="https://pomodoro-by-yash.netlify.app" rel="noopener noreferrer">https://pomodoro-by-yash.netlify.app</a>]</p> <h2> Gumroad (support me ❤️): [<a href="https://codewithyash.gumroad.com/l/pomodoro-timer-by-Yash" rel="noopener noreferrer">https://codewithyash.gumroad.com/l/pomodoro-timer-by-Yash</a>] </h2> <h2> 🧠 What I Learned: </h2> <ul> <li>DOM manipulation using JS</li> <li>Handling user input and timer logic</li> <li>Creating dynamic UI updates</li> <li>Hosting with Netlify</li> <li>Publishing a mini-product on Gumroad</li> </ul> <h2> 🙏 I'd Love Your Feedback: </h2> <p>Let me know what you think about the app — design, features, or anything I can improve.</p> <p>This is just my first launch — more mini products coming soon!</p> <p>Thanks for reading! ✨</p> <h3> 🔗 Follow me on: </h3> <ul> <li><a href="https://www.instagram.com/code.with.yash" rel="noopener noreferrer">Instagram</a></li> <li><a href="https://github.com/Yashsoundane" rel="noopener noreferrer">GitHub</a></li> <li><a href="https://www.linkedin.com/in/yash-soundane-b75070278" rel="noopener noreferrer">LinkedIn</a></li> </ul> <h1> showdev #productivity #javascript #webdev #indiehackers #buildinpublic </h1>