Day 32/100 – Built a Mini Figma-Style Canvas Editor (Vanilla JS) 🎨 A few days ago, I built this project in a challenge using pure HTML, CSS, and JavaScript (no frameworks) — and today I’m sharing it properly. This is a mini canvas editor where you can: 🟦 Create rectangles 🖱 Drag & reposition elements 📐 Resize using corner handles 🔄 Rotate with keyboard shortcuts ⌨ Move with arrow keys 🗑 Delete selected elements 🎛 Edit properties from a sidebar 🗂 Manage layers using z-index 💾 Auto-save using localStorage 📤 Export design as JSON 📄 Export as standalone HTML The goal was to deeply understand: • DOM manipulation • State management without React • Event handling (mouse + keyboard) • Dynamic element creation • Manual sync between state & UI • Basic editor architecture Building this without a framework made me appreciate how much abstraction tools like React provide. But it also helped me understand what’s happening underneath. 🔗 GitHub: https://lnkd.in/gnia2RvH 🌐 Live Demo: https://lnkd.in/g6JcvpQP Going deeper into fundamentals while continuing backend and full-stack learning. Learning in public. Building consistency 💪 #100DaysOfCode #JavaScript #DOM #FrontendDevelopment #WebDevelopment #LearningInPublic

💼 Portfolio Website – UI & JavaScript Project This project focuses on building an interactive and customizable portfolio-style website using HTML, CSS, JavaScript, and Tailwind CSS. ✨ Key features: -Dark & Light mode with localStorage -Theme color switcher (dynamic CSS variables) -Font customization with saved preferences -Portfolio filtering (tabs & categories) -Responsive testimonials carousel -Scroll-to-top interaction -Fully responsive UI across different screen sizes The main goal was to practice JavaScript logic, DOM manipulation, UI interactions, and user experience details, rather than building a personal portfolio. 🔗 Live Demo: https://lnkd.in/dGs6tcte 📂 GitHub Repository: https://lnkd.in/dF32H6aP More projects coming soon 🚀 #FrontendDevelopment #JavaScript #WebDevelopment #UIUX #TailwindCSS #HTML #CSS #Projects #Route

🚀 What if you could create depth and motion on a website — without using JavaScript? I recently built a parallax scrolling website using only HTML and CSS to strengthen my core front-end fundamentals. This project focused on: • Creating smooth parallax effects using pure CSS • Mastering positioning, layering, and background properties • Building a clean, responsive layout • Enhancing user experience through visual storytelling Working without JavaScript pushed me to think critically about structure, performance, and maintainability. It reinforced how powerful well-written HTML and CSS can be when used effectively. 🔎 You can explore the project here: 👉 https://lnkd.in/gS6Yca_i I welcome feedback and suggestions — always looking to improve and collaborate. #WebDevelopment #FrontendDevelopment #HTML #CSS #OpenToFeedback #GitHub

⏰ Digital Clock Project – Real-Time with JavaScript I built a responsive Digital Clock using HTML, CSS, and Vanilla JavaScript that shows live time, day, and date with a modern glowing UI. 💡 This project helped me apply several core JavaScript concepts in a real-world example: 🧠 Concepts Used: • Date() object for real-time time & date • setInterval() for updating the UI every second • DOM Manipulation using getElementById() • Template literals for clean string formatting • Conditional (ternary) operator for leading zeros • 12-hour time conversion with AM/PM logic • Array usage to map numeric day → day name • Modulo operator (%) for hour formatting • padStart() for consistent time display 🚀 Features: • Live time update every second • 12-hour format with AM/PM • Current day & full date display • Responsive and centered layout • Orbitron font with neon glow effect This project strengthened my understanding of real-time UI updates, date handling, and clean formatting logic. To view my code visit my github:https://lnkd.in/dr_qam5F #JavaScript #FrontendDevelopment #WebProjects #100DaysOfCode #LearningByBuilding

This Progress Bar Actually Works 🔥 #webdev #shorts In this short project, we create a dynamic progress bar using Semantic UI, jQuery, and Vanilla JavaScript. The bar starts at 0% and updates smoothly when clicking + or – buttons, showing live percentage changes. This is a beginner‑friendly project to learn Semantic UI components, DOM manipulation, and interactive UI design. Features - Semantic UI progress bar with indicating style. - jQuery + JavaScript for dynamic updates. - Increment (+) and Decrement (–) buttons to control progress. - Live percentage label update. - Centered, responsive design with clean layout. - Beginner‑friendly project for learning Semantic UI + JS integration. Connect with me YouTube: https://lnkd.in/gAtk9suf LinkedIn: https://lnkd.in/gu-ZN9dB Facebook: https://lnkd.in/gZNu3sb3 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 🚀 #semanticui #javascript #jquery #progressbar #webdevelopment #frontenddevelopment #semanticuitutorial #codingforbeginners #htmlcssjavascript #dommanipulation #interactiveui #webdesign #frontendproject #semanticuiprogress #javascriptproject #learnjavascript #codingtutorial #semanticuidemo #webdevelopmentproject #uiuxdesign

🚀 Built an Interactive CSS Positioning Playground Understanding CSS positioning is one of the most confusing parts for beginners, especially concepts like: ▶️ absolute vs relative ▶️ containing block ▶️ stacking context ▶️ z-index behavior ▶️ left/right & top/bottom conflicts So I decided to build something that makes it visual and interactive. Introducing Css-PositionLab , an interactive CSS Positioning Playground built using: ⚡ Vite ⚛️ React + TypeScript 🎨 Tailwind CSS Live 🔗 : https://lnkd.in/g6JZR7Ec Github 🔗: https://lnkd.in/gg5kfMxA 🔍 What it does: ✅ Visual Parent–Child positioning simulation ✅ Real-time adjustment of position properties ✅ Anchor-based control (left/right & top/bottom) ✅ Stacking context & z-index testing ✅ Live CSS code generation ✅ Visual origin indicator (0,0 reference) Instead of just reading documentation, learners can experiment and see how positioning actually behaves. This project helped me explore: ▶️ UI-driven learning experiences ▶️State-driven layout visualization ▶️CSS stacking context behavior ▶️Multi-element interactive control architecture ▶️Clean component structuring in React #React #TypeScript #Vite #TailwindCSS #FrontendDevelopment #WebDevelopment #CSS #OpenSource #LearningByBuilding

 Deep Dive into HTML's new <dialog> Element The native <dialog> element is a game-changer for creating accessible modals and dialog boxes without heavy JavaScript frameworks. Key Features:  • Two modes: Modal (.showModal()) blocks page interaction; non-modal (.show()) allows it • Built-in accessibility: Automatic focus management, ARIA attributes, and keyboard support (ESC to close) • Easy to close: Via .close() method, form submission, or ESC key • Animatable: Supports CSS transitions and keyframe animations with display and overlay properties #Best_Practices:  Always provide an explicit close button ✅ Use .showModal() instead of the open attribute ✅ Consider initial focus placement with autofocus ✅ The closedby attribute controls dismissal methods #Why_it_matters: Native browser support means better performance, automatic accessibility features, and less code to maintain compared to custom implementations. No more reinventing the wheel for dialog boxes! Documentation: https://lnkd.in/efhVdFjr

🚀 Mini Frontend Project: Interactive Like Button (HTML • CSS • JavaScript) Just built a small yet powerful UI interaction to strengthen my JavaScript fundamentals 💡 ✨ What this project demonstrates: DOM manipulation using vanilla JavaScript State management using a boolean flag Dynamic image & style updates on user interaction Clean UI built with HTML, CSS, Bootstrap & Font Awesome 👍 Clicking the Like button updates the image, icon color, and button style in real time—just like a real social media interaction. 🛠 Tech Stack: HTML | CSS | JavaScript | Bootstrap | Font Awesome 📈 Projects like these help me deeply understand how user actions connect with UI behavior and logic behind the scenes. Always learning, always building 💻✨ 🔗 https://lnkd.in/gU74UcdP #FrontendDevelopment #JavaScript #WebDevelopment #DOMManipulation #LearningByBuilding #MiniProject #HTML #CSS

🔹Title : Built a Smart Interactive Calculator Using Pure JavaScript | Turning User Input into Real-Time Logic 🔹Description : I recently developed a fully functional and user-interactive calculator using HTML, CSS, and JavaScript that focuses on real-time logic building and input handling. This project is not just about performing basic arithmetic operations — it's about understanding how user input can be dynamically processed, validated, and converted into executable logic using core JavaScript concepts like: 🔹 Event Handling (Keyboard & Button Input) 🔹 DOM Manipulation 🔹 String Processing 🔹 Conditional Logic 🔹 Error Handling using Try-Catch 🔹 Backspace Functionality 🔹 Expression Evaluation One of the key challenges was converting user-friendly mathematical symbols (like "x") into valid JavaScript operators ("*") and safely evaluating the expression to produce accurate results. Through this project, I explored how interactive UI connects with logical problem-solving on the backend — making it a great exercise in building a logic-driven mindset for real-world applications. Looking forward to your feedback and suggestions! live Demo : huzaifaproject1.surge.sh #JavaScript #WebDevelopment #FrontendDevelopment #100DaysOfCode #LearningByDoing #LogicBuilding #Projects

Built a Browser-based Image Editor using HTML, CSS & Vanilla JavaScript 🎨 Upload an image, apply real-time filters (brightness, contrast, blur, hue-rotate, etc.), reset, and download — all powered by Canvas API. This project helped me deeply understand canvas rendering, dynamic UI generation, and state handling without frameworks. Feedback is welcome 🚀 #JavaScript #WebDevelopment #Frontend #CanvasAPI #BuildInPublic