I Built a Browser Based Image Editor with JavaScript I recently built a simple image editor using vanilla JavaScript and the Canvas API to understand how image manipulation works directly in the browser. Instead of relying on libraries, I wanted to explore how filters and transformations can be applied in real time using JavaScript. 🔗 Live Demo https://lnkd.in/dCjQn4mF 💻 GitHub Repository https://lnkd.in/dh2RYjMK Features • Upload an image from your device • Adjust filters like brightness, contrast, saturation, grayscale, sepia, blur, hue rotate, invert, and opacity • Apply preset filters such as Vintage, Cool, Warm, Dramatic, Black and White, and Soft • Reset filters instantly • Export the edited image directly from the browser How It Works The project uses the HTML Canvas API to render the uploaded image and applies dynamic filters using the canvas filter property. Sliders and preset buttons update the filter values in real time, allowing the image to change instantly. What I Learned • Working with the Canvas API • Real time image manipulation in JavaScript • Managing UI state for filters and presets • Exporting images using canvas data URLs Building small tools like this is a great way to understand how frontend features actually work behind the scenes. Would love to hear your feedback or suggestions for improvements. Daneshwar Verma Ritik Rajput Devendra Dhote Sheryians Coding School #WebDevelopment #JavaScript #FrontendDevelopment #BuildInPublic #LearningInPublic

🎯 Nailed It : Recreated YouTube's UI with Pure HTML & CSS! No Frameworks. No shortcuts. Just the raw fundamentals — and I loved every second of it. 💪 🛠️ Tech Stack: HTML & CSS CSS Grid & Flexbox Git & GitHub for version control 🎬 What I Engineered: A responsive video grid (2 to 4 columns) using CSS Grid! A fixed navbar with a fully styled search bar, buttons & hover tooltip animations! A sticky sidebar replicating YouTube's compact navigation panel! Clean video preview cards with thumbnails, channel info, stats & video duration overlays! Small details like notification badges and voice search buttons that make it feel real! 💡 Key Takeaways: Mastered advanced CSS Grid techniques and responsive design patterns. Built a scalable multi-file CSS architecture from the ground up. Proved that strong UI skills start with mastering the basics — not jumping to frameworks. 🎥 I've attached a screen recording of the full project. 🔗 GitHub Repository : https://lnkd.in/gxP4g2Xm Drop a comment if you have any idea on my UI clone! 🧑💻🔥 #html #css #webdevelopment #frontend #uiclone #youtube #cssgrid #flexbox #coding #softwaredevelopment

🚀 Built a Browser-Based Image Editor using JavaScript & Canvas Excited to share my latest project — a Web-Based Image Editor built with HTML, CSS, and JavaScript using the HTML5 Canvas API. The goal of this project was to understand how image manipulation works directly in the browser and how filters can be applied dynamically. 🔧 Key Features: • Upload and edit images directly in the browser • Adjustable filters using sliders (Brightness, Contrast, Saturation, Blur, Hue-Rotate, Sepia, Grayscale, Opacity, Invert) • Real-time image rendering using the Canvas API • Built-in filter presets like Vintage, Drama, Cool, Warm, Noir • Reset filters instantly • Download the edited image with one click ⚙️ Technologies Used: HTML • CSS • JavaScript • Canvas API 💡 What I Learned: • Working with the HTML Canvas API • Dynamic DOM creation using JavaScript • Managing filter states with objects • Applying CSS filter effects programmatically • Building interactive UI components This project helped me strengthen my JavaScript fundamentals and DOM manipulation skills. I’m currently building more frontend and full-stack projects to improve my development skills. #JavaScript #WebDevelopment #FrontendDevelopment #HTML #CSS #CanvasAPI #Projects #LearningInPublic

Building a Real-Time Image Editor with Vanilla JavaScript & Canvas API 📸✨ I’m excited to share my latest project: a browser-based Image Editor! 🚀 While libraries exist for image processing, I wanted to dive deep into the HTML5 Canvas API to understand how digital image manipulation works under the hood. Key Features: ✅ Dynamic Image Processing:- Real-time adjustments for brightness, contrast, saturation, and more using the canvasCtx.filter property. ✅ Custom Presets:- One-click "Vintage," "Neon Glow," and "Drama" modes achieved through complex filter mapping. ✅ Non-Destructive Editing:- Using a "clear-and-redraw" logic to ensure the original image quality remains intact regardless of how many filters are applied. ✅ Theming:- A sleek dark-mode UI powered by CSS variables for a professional look and feel. Technical Takeaway:- The biggest challenge was syncing the UI state with the Canvas context. By using a data-driven approach, I ensured that moving a slider or clicking a preset triggers a clean redraw of the image data, keeping the performance smooth and the code maintainable. Check out the code here: 🔗 https://lnkd.in/du7_DAcd Check out the live demo here: 🔗 https://lnkd.in/dFuUdJSG #JavaScript #WebDevelopment #Vercel #Portfolio #ImageEditing #FrontEndDeveloper #CanvasAPI

I used to think CSS Grid was already powerful enough. It’s actually one of my favorites. Then I ran into a small problem. The layout worked perfectly… until I added proper HTML structure. Nested elements stopped aligning. Cards calculated widths differently. Rows didn’t match. That’s when I found Subgrid. It lets nested elements share one grid system. Cleaner HTML. Better alignment. Less layout hacks. CSS just got smarter. So I created a small cheat sheet document in Figma to understand it better - sharing it here. (Some IDE images didn’t render correctly. You can check the attached links.) References: 🔗 https://lnkd.in/gUnKPkJd 🔗 https://lnkd.in/g2HV5fWR JavaScript Mastery w3schools.com

Simple Text Size Controller Anyone Can Build #coding #shorts In this beginner‑friendly project, we build a simple font size controller using HTML and JavaScript. With two buttons — Increment and Decrement — you can dynamically increase or decrease the size of text on a webpage. This short tutorial introduces event listeners, DOM manipulation, and inline styling, making it perfect for beginners learning how to interact with elements in real time. Features - Interactive buttons to increase or decrease text size. - Event listeners to detect user clicks. - DOM manipulation using style.fontSize. - Beginner‑friendly code with minimal setup. - Practical introduction to dynamic styling with JavaScript. Connect with me YouTube: https://lnkd.in/gAtk9suf LinkedIn: https://lnkd.in/gu-ZN9dB Facebook: https://lnkd.in/gsV-S_sh Instagram: https://lnkd.in/gEUR34hP TikTok: https://lnkd.in/gQvUEgSq GitHub: https://lnkd.in/gTcg6vFt Subscribe for more creative coding demos, Canvas tutorials, and short projects optimized for social platforms 🚀 #javascript #html #css #coding #shorts #webdevelopment #frontend #dom #codingforbeginners #learnjavascript #interactiveui #frontendproject #htmlcssjavascript #codingtutorial #simpleprojects #jsbasics #textsize #creativecoding #webdesign #dynamicui #webdevproject

Day 16/21 – I Tried Building My Own Mini Figma Using Vanilla JavaScript 🎨 Today I challenged myself to build something different. Instead of a normal UI project, I tried creating a mini Figma-style editor using pure Vanilla JavaScript. The idea was simple: 👉 Create elements and control their design properties dynamically. Features I implemented: 🖱️ Drag & Drop Elements – Move elements anywhere on the canvas 🎨 Color Controls – Change element colors dynamically 📏 Width & Height Controls – Resize elements in real time 🔵 Border Radius Control – Adjust element roundness 🔤 Font Size Control – Change text size instantly 🌙 Dark Mode Toggle – Switch between light & dark UI 📚 Z-Index Control – Manage element layering (bring forward / send backward) This project helped me understand how powerful Vanilla JavaScript + DOM manipulation can be when building interactive tools. It felt amazing to recreate a mini design tool experience directly in the browser. Live Demo 👇 🔗 [https://lnkd.in/dfZJ-FZ8] Learning and building consistently with the #21DaysCodingChallenge by #sheryianscodingschool #Day16 #JavaScript #FrontendDevelopment #WebDevelopment #VanillaJS #BuildInPublic #LearningInPublic

✨Just finished building a modern, glassmorphic calculator using the classic trio: HTML, CSS, and JavaScript! 🧮✨ I wanted to push my front-end skills by combining clean logic with a polished UI. This project helped me dive deeper into: CSS Glassmorphism: Using backdrop-filter and transparency for that "frosted glass" look. JavaScript Logic: Handling calculations, state management for inputs, and DOM manipulation. Responsive Design: Ensuring the UI stays crisp across different screen sizes. There’s something so satisfying about turning lines of code into a functional, tactile tool. Check out the video below to see it in action! Hashtags: #WebDevelopment #Javascript #Frontend #CSS #CodingProject #Portfolio #Glassmorphism #WebDesign

Hi everyone! 🚀 Day 7 of #30DaysCodeChallenge – Element Display using CSS (No JavaScript!) Today I worked on a simple yet interesting mini project – Element Display & Removal using Pure CSS 🌍🌙 🔹 Created two buttons: Display Earth and Display Moon 🔹 Used the CSS sibling selector (~) to control image visibility 🔹 Implemented display: none and display: inline-block for dynamic effect 🔹 Added hover interaction to display respective images 🔹 Styled buttons with box-shadow and custom font 💡 The most interesting part? I achieved this interaction without using JavaScript – only HTML & CSS! This helped me understand: ✔️ CSS selectors deeply ✔️ How sibling combinators work ✔️ UI interaction using hover states ✔️ Clean structuring of elements Small projects like these improve core fundamentals step by step 💻✨ Looking forward to building more interactive UI components in the coming days! #Day7 #30DaysCodeChallenge #HTML #CSS #FrontendDevelopment #WebDesign #LearningInPublic #WomenInTech

“What if you could visually explore who actually owns the companies behind the brands we use every day?” I’ve been experimenting with creative coding and interactive data visualization using p5.js, and built this interactive project to explore how code can turn complex systems into something visual and explorable. This sketch visualizes corporate ownership structures, allowing users to interact with companies and explore how subsidiaries connect under larger parent organizations. The idea behind the project is to make it easier to understand how large corporate ecosystems expand outward and how many brands ultimately trace back to a small number of parent companies. The interface dynamically updates as you explore the hierarchy, turning what would normally be a static dataset into something more like an interactive map. Technologies used: • JavaScript • p5.js • Interactive UI logic • Dynamic data visualization You can try the project here: https://lnkd.in/gXXh_jrn I’ve been really interested in how code, design, and visualization can work together to make complicated systems easier to understand. #CreativeCoding #DataVisualization #p5js #JavaScript #UXDesign #InteractiveDesign