#day48 of #100DaysCodingChallenge 🕒 Built an Analog Clock using HTML, CSS & JavaScript I created a fully functional analog clock that dynamically updates in real-time using JavaScript. ✨ Key Highlights: • Real-time clock using Date object • Smooth rotation of hour, minute, and second hands • Accurate angle calculations (360° logic) • Clean and responsive UI design • Custom styled clock with numbers (1–12) 💡 Concepts Used: • DOM Manipulation • setInterval() • CSS Transform (rotate) • Positioning & Layout 🚀 Future Improvements: • Smooth sweeping second hand • Dark/Light mode toggle • Dynamic number generation using JavaScript • Add digital clock support 🔗Github Link :https://lnkd.in/dBuyP46D Code Of School || Ritendra Gour || Avinash Gour #JavaScript #WebDevelopment #Frontend #Projects #Coding

🖐️ Built something I'm really excited about — a real-time Hand Gesture Network System! Using MediaPipe + HTML5 Canvas, this browser-based project tracks both hands live via webcam, detects all 10 fingertips, and connects them into a dynamic glowing network — no backend, no installs, just open and go. ✨ What it does: → Dual hand detection in real time → Fingertip nodes connected by animated neon edges → Cross-hand network formation → Auto pattern switching (Normal ↔ Pulse mode) → 100% browser-based using MediaPipe + Vanilla JS This was a fun deep dive into computer vision on the web — and proof that you don't need Python or a GPU to do cool CV stuff. Just a browser. 🔗 Live Demo → https://lnkd.in/gc_ZWTGX 📂 GitHub → https://lnkd.in/gFAPiuve #ComputerVision #MediaPipe #JavaScript #WebDev #HandTracking

The time I stopped just watching content… and started rendering it differently. Built a simple yet powerful web app using HTML, CSS, and JavaScript that converts live video streams and images into ASCII art in real time. Yeah, not just static conversion → You can upload an image and download its ASCII version → Or go live with your camera and watch yourself turn into a matrix-style render → Full control over density, contrast, brightness, color modes, and more What started as curiosity around “how images are actually represented” turned into this: A system that breaks visuals into raw pixel data → maps intensity → converts it into characters → and renders frames continuously Basically turning reality into characters, frame by frame Still optimizing performance and experimenting with better mapping algorithms and styling, but this has been one of those projects where you actually see how computers interpret visuals Would love feedback, ideas, or ways to push this further #webdevelopment #javascript #creativecoding #asciiart #frontend #buildinpublic #devprojects #computervision #innovation #coding

🚀 Day 4 / 21 — Frontend Challenge Today I built: 👉 Fullscreen Infinite Image Slider (Carousel) 🧠 Flow I designed before coding: Planned the slider structure (container → slides → images) Implemented navigation logic (Next / Previous buttons) Designed smooth infinite looping using cloned slides 🛠 Tech Used: HTML | CSS | JavaScript ✨ Features: Fullscreen responsive slider Smooth infinite loop (no visible jump) Auto-slide with pause on hover Manual navigation with buttons 🚧 Challenges Faced: Images were appearing half-cut during sliding due to incorrect flex behavior and width handling. Fixed it using flex-shrink: 0 and proper width calculation, ensuring smooth transitions without glitches. 💡 Key Learning: Planning before coding makes development faster and cleaner 🙏 Guidance by: Keyur Gohil 🏫 Learning at: Red & White Skill Education Official 📂 GitHub Repo: https://lnkd.in/dXZbRGBn #21DaysJSWithKeyur #RedandWhite #Skill #JavaScript #FrontendDevelopment #BuildInPublic #WebDevelopment 🚀

𝗦𝘁𝗼𝗽 𝘄𝗿𝗶𝘁𝗶𝗻𝗴 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗳𝗼𝗿 𝘁𝗵𝗶𝗻𝗴𝘀 𝗖𝗦𝗦 𝗰𝗮𝗻 𝗱𝗼 𝗻𝗮𝘁𝗶𝘃𝗲𝗹𝘆! I’ve just published a deep-dive article into the 10 most transformative HTML and CSS features hitting our browsers in 2026. If you are still using heavy libraries for Masonry layouts, fighting z-index for modals, or writing scroll listeners for animations, your codebase is likely heavier than it needs to be. Highlights include: - Native CSS Masonry: No more JS height calculations. - The Popover API: The "Top Layer" is finally here. - Scroll-Driven Animations: Compositor-thread performance for UI polish. - The random() function: Generative CSS is becoming a reality. Whether you're a Principal Engineer or a student, understanding these native APIs will significantly improve your site's performance and accessibility. Read the full breakdown here: https://lnkd.in/gYqhHADS #FrontendDevelopment #WebPerf #CSS #Javascript #WebDevelopment #Programming

🚀 Day 2 / 21 — Frontend Challenge Today I built: 👉 Theme Toggle 🧠 Flow I designed before coding: • Step 1: Identified all required UI elements (clock display, date, AM/PM badge, seconds ring, theme toggle) and planned centered glassmorphism layout • Step 2: Designed logic to fetch real-time data using JavaScript Date() and extract hours, minutes, seconds, day, and date • Step 3: Created formatting logic to ensure 2-digit time (e.g., 09:05:03) and convert 24-hour format to 12-hour with AM/PM • Step 4: Planned continuous updates using setInterval() to refresh time every second • Step 5: Ensured instant display on page load by calling the function once before interval starts • Step 6: Implemented theme toggle logic using classList.toggle() and stored user preference with localStorage • Step 7: Added seconds progress ring animation using SVG stroke-dashoffset calculation 🛠 Tech Used: HTML | CSS | JavaScript ✨ Features: • ⏰ Real-time clock updating every second • 🌗 Dark / Light mode toggle with persistence • 🔢 Proper 2-digit time formatting • 📅 Live date + AM/PM indicator • 🟢 Animated seconds progress ring • 🎨 Modern glassmorphism UI with neon glow effects 🚧 Challenges Faced: Ensuring smooth real-time updates without delay was tricky initially. The clock showed a slight lag on first render, which I fixed by calling the update function before setInterval(). Another challenge was synchronizing the SVG progress ring with seconds accurately. Implementing theme persistence using localStorage while keeping UI transitions smooth also required careful handling. 💡 Key Learning: Breaking the project into layers (UI → logic → animation → persistence) makes complex features easier to build and manage 🙏 Guidance by: Keyur Gohil 🏫 Learning at: Red & White Skill Education Official 📂 GitHub Repo: https://lnkd.in/dsQ-__Zj #21DaysJSWithKeyur #JavaScript #FrontendDevelopment #BuildInPublic #WebDevelopment

I got humbled by a “Holy Grail” layout in React the other day. Header. Sidebar. Main. Footer. Nothing fancy. Until it was. I’ve been living comfortably in Tailwind land for a while. Sprinkling Tailwind utility classes without thinking twice. But this time I had to use plain CSS. Suddenly, I had to remember what 𝘧𝘭𝘦𝘹: 1 𝘢𝘯𝘥 𝘧𝘭𝘦𝘹-𝘤𝘰𝘭 translate to syntax-wise! It was a good reminder: Those nice utility classes? They’re just CSS. In the age of AI, there’s this temptation to offload small layout problems. But doing it yourself keeps you sharp. Sometimes the realization how abstracted we have become from foundational blocks of the web is humbling and rewarding. The Holy Grail layout ends up jogging your memory and shaking your skills more than any tutorial ever will. Onwards!

#Day48 of #100DaysOfCode Today I built a Dynamic Random Image Generator with Text Styling features using HTML, CSS, and JavaScript Features I implemented: * Generate random images using user input number * Fetch images dynamically using Picsum API * Input validation for better user experience * Change font style dynamically from multiple fonts * Clean UI with gradient background and styled elements What I learned: * Using template literals to generate dynamic URLs * Working with external image APIs * Handling user input and validation * Changing styles dynamically using JavaScript * Using arrays to randomize font styles This project helped me combine multiple JavaScript concepts into one interactive mini application Consistently improving and building creative projects step by step Code Of School - Avinash Gour Ritendra Gour #Day48 #WebDevelopment #JavaScript #HTML #CSS #FrontendDevelopment #100DaysOfCode

✨𝗗𝗮𝘆 𝟱𝟱 - 𝗜𝗻𝘁𝗲𝗿𝗮𝗰𝘁𝗶𝘃𝗲 𝗖𝗮𝗿𝗱 𝗖𝗮𝗿𝗼𝘂𝘀𝗲𝗹 (𝗣𝘂𝗿𝗲 𝗖𝗦𝗦)🚀 What if a carousel could feel interactive… without JavaScript? 👀 Today I built one using HTML & CSS only. The project is a horizontally scrolling card layout. Each card has: • image • title • meta info But the interesting part is the interaction. When you hover on a card: • it stays in focus • other cards blur • and slightly shrink All of this is done using: 👉 :has() selector No JS. Just CSS. I also added auto-scroll. It runs infinitely. And pauses as soon as you hover on any card. ✅ Today's learnings: 🔸Using :has() for parent-based interactions 🔸Creating infinite auto-scroll using CSS animations 🔸Handling seamless looping without glitches 🔸Combining transform + filter for smooth UI effects Project Working:  1. Cards are placed inside a moving track  2. Track animates using translateX  3. Duplicate cards create an infinite loop  4. :has() detects hover → applies blur/scale to others  5. Animation pauses on hover Live Link: https://lnkd.in/e4TdWJCD Github Repo: https://lnkd.in/eEuc87NQ Github Profile: https://lnkd.in/dZNGV9UM Still learning. Still building 🚀 What should I build next? #webdevelopment #css #frontend #webdev #frontenddeveloper #learninpublic #buildinpublic #cssanimation #creativecoding #ui #coding #programming #day55 #challenge Mentors: Ankur Prajapati, Harsh Vandana Sharma, Sarthak Sharma, Sheryians Coding School, Dhanesh Parwati Malviya, Satwik Raj, MOHD ALI ANSARI

💻 Day 12 of Coding Built a Neumorphic Calculator using HTML, CSS, and JavaScript 🧮 This project focuses on both design and functionality, combining a modern soft UI with real JavaScript logic. 🚀 Features: • Neumorphic (soft UI) design • Light/Dark mode toggle 🌗 • Responsive layout • Interactive elements (like button ❤️ with animation) • Fully functional calculator logic 🛠️ Tech Stack: HTML • CSS • JavaScript 🌐 Live Demo: https://lnkd.in/dfKz3iTD 💻 GitHub: https://lnkd.in/devqFjUb ⚡ Challenges I faced: • Designing layout using CSS Grid (especially = button placement) • Handling operator logic (avoiding multiple operators, managing symbols like × ÷) • Making the UI responsive without breaking design 📚 What I learned: Using CSS Grid for complex layouts Writing cleaner event-driven JavaScript Handling user input and edge cases Building responsive UI Debugging real project issues 🎉 Fun part: Designing the neumorphic UI, adding animations ❤️, and implementing dark/light mode 🌗 This project helped me understand how design and logic come together in real applications. More improvements coming soon 🚀 #JavaScript #WebDevelopment #Projects #Frontend #100DaysOfCode