#Hello #Connections 👋 #100DaysOfCodeChallenge | #Day48 Project: Dynamic Profile Card Generator What I built Today I created an interactive Profile Card Generator where users can enter their details and instantly generate a stylish profile card with image, bio, and Instagram link. It dynamically creates multiple cards in real time using JavaScript. Technologies Used HTML5 CSS3 (Flexbox, Glow Effects, Overlay Design) JavaScript (DOM Manipulation, Event Handling, File API) Challenge I faced Handling image upload preview and dynamically creating multiple cards without breaking layout. How I solved it Used URL.createObjectURL() for instant image preview and structured DOM creation properly to manage multiple cards efficiently. Live Demo: https://lnkd.in/dQujcG8j Open to feedback and suggestions Code Of School Avinash Gour | Ritendra Gour #FrontendDeveloper #JavaScript #HTML5 #CSS3 #WebDevelopment #100DaysOfCode #DeveloperJourney #UIUX

🚀 Temperature Converter Website | Mini Project I’m excited to share my latest mini project — a Temperature Converter Website 🌡️ This project allows users to easily convert temperatures between Celsius and Fahrenheit, with an additional option for Kelvin conversion. ✨ Key Features: ✔️ User-friendly input field with validation ✔️ Option to select temperature unit (Celsius / Fahrenheit / Kelvin) 💡 This project helped me strengthen my skills in HTML, CSS, and JavaScript, especially in handling user input, DOM manipulation, and basic logic building. 🔧 Looking forward to adding more advanced features and improving UI/UX in upcoming projects! #WebDevelopment #JavaScript #FrontendDevelopment #MiniProject #Coding #StudentDeveloper #100DaysOfCode

Built a Pac-Man from scratch. No libraries. No frameworks. Just vanilla JavaScript, HTML5 Canvas, and CSS. 👾 The result? Pac-Man Neon Arcade — a fully functional, neon-themed recreation of the classic game, running entirely in the browser. Here's what's under the hood: 🕹️ Game logic built with ES6 Modules — character movement, collision detection, and a full state machine 🎨 HTML5 Canvas for rendering the maze, Pac-Man, and ghost animations 👻 Individual AI written for each ghost — they don't all behave the same 🔊 Sound effects, high score tracking, multiple difficulty levels, and pause/resume The most challenging part? Writing the ghost AI from scratch. Each ghost has its own targeting logic, which is what makes the original game feel alive — and replicating that without any game engine was a great exercise in thinking algorithmically. No npm install. No build step. Just clone and open index.html. 🔗 GitHub: https://lnkd.in/gg7ybRS5 🔗 Live Link: https://lnkd.in/gYYxsmaQ Would love feedback from fellow devs — especially on the architecture and AI logic! #JavaScript #HTML5Canvas #GameDev #VanillaJS #BuildInPublic #WebDevelopment #OpenSource

Your code is only as fast as your fingers. Built a typing speed trainer that tracks WPM and accuracy in real-time — with high scores, celebratory animations, and a deliberately simple UI that gets out of your way. • React 19 + Vite 6 for a snappy, modern build pipeline • Canvas Confetti + Framer Motion for feedback that actually feels rewarding • Vitest + React Testing Library for solid unit coverage • Tailwind CSS v4 for responsive layout that works on any screen Adding high score persistence was the feature that changed everything. Suddenly it wasn't just a utility — it was a game. Small state decisions can completely shift how users engage with a tool. What's your current WPM? And what are you targeting? #Frontend #React #WebDev #OpenSource #Hacktoberfest

Interactive Form I’ve just implemented a dynamic "Get In Touch" section that prioritizes seamless user interaction and instant feedback. No page reloads—just smooth, intelligent form handling. ✈️ ✨ Key Features: 🔺 Real-Time Validation: Instant checks for name length, email formatting, and phone number accuracy as the user types. 🔺 Dynamic Feedback: Error messages appear and disappear automatically without refreshing the page. 🔺 Success Confirmations: Immediate confirmation once a message is successfully sent. 🔺 State-Driven UI: Custom CSS transitions that highlight invalid fields and provide clear status updates. Built with Vanilla JavaScript, HTML, and CSS. #WebDevelopment #JavaScript #UIUX #Frontend #Coding #CodvedaJourney #CodvedaExperience #FutureWithCodveda

🚀 Day 25 of #30DaysOfJavaScript Just built a ✊ Rock Paper Scissors Game using HTML, CSS & JavaScript! 🎮 It’s a simple game but helped me strengthen my core JavaScript concepts like logic building, DOM manipulation, and event handling. 🔥 Features: ✅ Player vs Computer gameplay ✅ Random AI moves ✅ Live score tracking ✅ Win / Lose / Draw logic ✅ Dark / Light mode toggle 🌙☀️ ✅ Fully responsive UI 📱 🌐 Live Demo: https://lnkd.in/gGdkuZaT 💻 GitHub Code: https://lnkd.in/g5JkVdx3 📚 What I learned: - Writing clean game logic - Handling user interactions - Updating UI dynamically - Improving UI/UX with simple features Consistency is the key 🔑 — 25 days strong and still going 💪 #JavaScript #WebDevelopment #FrontendDeveloper #100DaysOfCode #CodingJourney #HTML #CSS #Projects

This is one of the most fun and challenging projects I’ve built recently 🎯 I built a modern Aim Trainer using pure JavaScript 🎯 A browser-based interactive tool to test reaction time, accuracy, and precision — with real-time analytics and a clean UI. Key features: Dynamic difficulty scaling Reaction time tracking Click heatmap visualization Local leaderboard system Tech: HTML5 Canvas Vanilla JavaScript Custom game architecture Live demo: https://lnkd.in/dzvvdD9g Source code: https://lnkd.in/dAMqyZa4 Let me know what you think 👇 #javascript #frontend #gamedev #webdevelopment

While I’ve been enjoying making JS and 3D stuff (WebGL) lately, returning to pure CSS (mainly for performance) reminds me of the amazing interactive effects you can achieve without JavaScript. For this effect, the "main characters" making it all possible are CSS variables and the :has() pseudo-class. Design courtesy of Cherry Bomb Creative Co. I’m collaborating with them on a very special upcoming project—stay tuned for more in the coming weeks! #css #webdesign #creativecoding #csstricks #webanimation #interactive #csspseudoclass #csslayout #csseffects

My Lighthouse Audit Checklist Before any release on Cloudshot, I run this. Every time. 👉 Images: → All images use next/image → WebP format served where supported sizes prop set correctly → Above-fold images NOT lazy loaded 👉 JavaScript: → Route-based code splitting active → No full-library imports (lodash, moment, etc.) → Dynamic imports for heavy components (charts, editors) → No unused dependencies in bundle 👉 CSS: → No render-blocking stylesheets → Critical CSS inlined → Tailwind purge configured correctly 👉 Fonts: → font-display: swap set →Fonts self-hosted or preloaded → No flash of unstyled text (FOUT) 👉 Runtime → No layout shifts on load (CLS < 0.1) → Interaction response under 200ms (INP) → No long tasks blocking main thread This checklist took us from Lighthouse 61 → 94. Save it. Run it before every deploy. #WebPerformance #NextJS #ReactJS #CoreWebVitals #FrontendEngineering #Uber

Welcome to Gradia — my new web tool built to simplify creating linear gradients in CSS. Repo-Link -> https://lnkd.in/guEF--YZ Project-Link -> https://lnkd.in/gAgfsKTj While working on frontend projects, I often found it time-consuming to experiment with gradient color combinations and repeatedly test them in code. Gradia solves this by allowing you to generate visually appealing linear gradients instantly with just a few clicks. The tool dynamically generates color combinations using JavaScript and updates the UI in real time. With a simple “Tap to Copy” feature powered by clipboard event handling, you can directly copy the complete CSS linear-gradient code and use it in your projects without any extra effort. This project also helped me strengthen my understanding of DOM manipulation, event listeners, and working with random color generation logic in JavaScript. Built with a focus on simplicity and usability for developers. Mirai School of Technology #WebDevelopment #FrontendDevelopment #CSS #JavaScript #UIUX #DeveloperTools #Frontend #Coding #BuildInPublic #WebDev #LearningByBuilding #Projects #HTML #CSS3 #JavaScriptProjects