Built a simple Meme Generator using HTML,CSS,JS 🎭 Features: ->Upload your own image ->Add custom text ->Instant meme preview ->Pre-made meme templates available ->Clean and simple UI This mini project helped me practice HTML structure and basic project building. Trying to stay consistent by building small projects day by day 🚀 #HTML #WebDevelopment #FrontendDevelopment #GitHub #Projects #LearningInPublic Github repo :- https://lnkd.in/gvpRuetV
Simple Meme Generator with HTML CSS JS
More Relevant Posts
-
🚀 GitHub Performance Finder Project Excited to share my latest project — a GitHub Performance Finder built using HTML, CSS, and JavaScript. 🔍 This tool helps analyze a GitHub profile by displaying: • 📦 Repository Count • ⭐ Top Repository • 👥 Followers & Following • 📊 Overall profile insights 💡 This project helped me strengthen my skills in: • API integration • JavaScript DOM manipulation • Responsive UI design 🔗 Live Demo (Vercel): https://lnkd.in/gbu7SjXs 🔗 GitHub Repo: https://lnkd.in/gXpGtijU Would love your feedback and suggestions! 😊 #WebDevelopment #JavaScript #GitHub #FrontendDevelopment #Projects #LearningJourney
-
Ever wondered why this prints in a different order? console.log("Start"); setTimeout(() => { console.log("Timeout"); }, 0); console.log("End"); Output: Start End Timeout Wait… timeout is 0ms, right? So why does it run last? ⸻ 🧠 Welcome to the Event Loop JavaScript is single-threaded, but it handles async tasks using: 👉 Call Stack 👉 Web APIs 👉 Callback Queue 👉 Event Loop ⸻ ⚙️ What’s happening behind the scenes? 1️⃣ "Start" → goes to Call Stack → executed 2️⃣ setTimeout → sent to Web APIs 3️⃣ "End" → executed immediately 4️⃣ Callback enters queue 5️⃣ Event Loop pushes it back to stack 👉 That’s why "Timeout" runs last ⸻ 🔥 Key Insight: setTimeout(fn, 0) does NOT mean “run immediately” It means → “run after current execution is done” ⸻ 💬 Lesson learned: JavaScript isn’t just about syntax… It’s about understanding how it executes code ⸻ #JavaScript #WebDevelopment #Frontend #EventLoop #AsyncJavaScript #CodingJourney
-
-
🎨 Just shipped: Pure HTML Starter — a minimal creative coding playground** Tired of boilerplate setup when you just want to experiment with an idea? I built this starter kit for rapid prototyping with creative coding tools: → p5.js sketches → Three.js 3D experiments → GSAP animations → WebAudio API & WebChucK audio programming → Or just vanilla JS/CSS ideas **What's inside:** ✅ SCSS 7-1 architecture (organized, scalable styles) ✅ Webpack with live reload ✅ Zero config — clone, npm install, start coding ✅ Production build with minification No React. No frameworks. Just HTML, SCSS, and JavaScript — the way creative coding should be. Perfect for: • Testing ideas before committing to a larger project • Learning creative coding libraries • Building quick demos and prototypes • Audio-visual experiments 🔗 GitHub: https://lnkd.in/dCePyA9q Star it if you find it useful! What creative tools would you add? #CreativeCoding #WebDevelopment #JavaScript #p5js #ThreeJS #GSAP #WebAudio #OpenSource #GenerativeArt
-
Day 15/100 of JavaScript 🚀 Today’s topic : DOM Structure The DOM represents a web page as a tree structure where each element is a node ❕Types of nodes - Document → root of the page - Element → HTML tags ("div", "p", etc.) - Text → content inside elements - Attribute → properties like "id", "class" ❕Tree relationships - Parent → element containing another element - Child → element inside another - Siblings → elements at the same level ➡️ Example <body> <div id="parent"> <p>Child 1</p> <p>Child 2</p> </div> </body> const parent = document.getElementById("parent"); console.log(parent.children); -> HTMLCollection of children console.log(parent.firstElementChild); console.log(parent.lastElementChild); ❕Traversing DOM parent.parentElement; -> access parent parent.children; -> access children parent.nextElementSibling; ->next sibling Understanding DOM structure helps in navigating and manipulating elements efficiently #Day15 #JavaScript #100DaysOfCode
-
🚀 Just Built My First Dynamic Quote Generator! Excited to share a small project I’ve been working on using JavaScript DOM manipulation 🎯 💡 Features: ✔️ Generates random quotes ✔️ Changes background colors dynamically 🎨 ✔️ Uses concepts like textContent, setInterval, and DOM methods This project helped me understand: 👉 How to manipulate the DOM 👉 How to use arrays and random functions 👉 Difference between innerHTML and textContent 👉 Real-time UI updates 🔧 Tech Used: HTML | CSS | JavaScript Small steps, but moving forward consistently 💪 Next step: Adding animations and user input features 🚀 Would love your feedback and suggestions 🙌 #WebDevelopment #JavaScript #Frontend #Learning #CodingJourney #100DaysOfCode
-
Most developers get confused by the JavaScript Event Loop 🤯 Here’s the simplest way to understand it: JavaScript is single-threaded — it runs one task at a time. But async tasks (setTimeout, API calls, promises) don’t block the code. 👉 They go to Web APIs (handled by browser) 👉 Then move to a Queue 👉 Event Loop pushes them back when the stack is empty Example: console.log("Start") setTimeout(() => console.log("Timeout"), 0) console.log("End") Output: Start End Timeout Even 0ms delay runs last 😲 Bonus: Promises run before setTimeout because they use Microtask Queue ⚡ Have you struggled with Event Loop before?
-
-
🚀 Day Progress Update: Building My Own Design System with Vanilla JavaScript Today was a solid step forward in my journey of creating a Design System from scratch (without frameworks). Instead of jumping directly into React libraries, I focused on understanding how systems like Bootstrap actually work under the hood. 🔹 What I implemented today: ✅ Advanced Button Component Solid variants → Primary, Secondary, Success, Danger, Warning, Info, Light, Dark Outline variants → .btn-outline-* (fully token-driven) Sizes → Small, Medium, Large States → Hover, Active, Focus, Disabled ✅ Design Tokens Upgrade Added active state tokens for all variants Introduced focus ring tokens (for accessibility) Improved consistency across components ✅ Better Component Architecture Tokens → Base → Utilities → Components separation Scalable and reusable CSS structure ✅ Interactive Behavior Added onClick support for buttons Proper disabled handling (pointer-events: none) Clean API-like function: createButton({ variant, size, disabled, onClick }) ✅ Component Documentation Page Sidebar navigation (with active state) Dynamic rendering of components Sections for: Solid Buttons Outline Buttons Sizes 💡 Key Learnings: Design systems are driven by tokens + states, not just styles Proper handling of hover, active, focus, disabled is critical Even with Vanilla JS, you can build a scalable component system Thinking in terms of APIs (like createButton) changes everything 🎯 What’s next: Loading buttons (spinner + async state) Input component (validation + error states) Dropdown, Modal components Eventually wrapping everything in React + TypeScript + Storybook 🔗 GitHub: https://lnkd.in/gUcdf7QW This process is helping me move from just building UI → to engineering reusable design systems. #JavaScript #FrontendDevelopment #DesignSystem #UIUX #WebDevelopment #VanillaJS #LearningInPublic #ReactJS
-
🚀 Day 9 of #100DaysOfFrontend Built a Random Quote Generator using HTML, CSS, and JavaScript 💬 This project helped me understand how to work with arrays, generate random data, and update the UI dynamically using DOM manipulation. Small steps every day, but consistent progress 💪 Learning, building, and improving one project at a time 🔥 🔗 Live Demo: https://lnkd.in/gmYjmihf 💻 GitHub:https://lnkd.in/gNyMr8Ys #JavaScript #FrontendDevelopment #WebDevelopment #BuildInPublic #Consistency
-
-
🚀 Day 7 of #100DaysOfFrontend Built a Weather Application using HTML, CSS, and JavaScript 🌦️ This project helped me understand how to work with APIs, fetch real-time data, and display it dynamically on the UI. I used an external weather API to get live temperature and weather conditions based on user input. Learning something new every day and getting more confident with JavaScript 💪 🔗 Live Demo: https://lnkd.in/ga7xE9cG 💻 GitHub: https://lnkd.in/gSFhiRbA #JavaScript #API #FrontendDevelopment #WebDevelopment #BuildInPublic #Consistency
-
-
🚀 Day 6 of #100DaysOfFrontend Built a Quiz Application using HTML, CSS, and JavaScript 🧠 This project helped me understand how to handle dynamic data, manage user interactions, and build logic for real-world applications like tracking scores and navigating between questions. Each day I’m getting more comfortable with JavaScript and improving my problem-solving skills 💪 🔗 Live Demo: https://lnkd.in/gfSr2uCu 💻 GitHub: https://lnkd.in/gfNJN2Qz #JavaScript #FrontendDevelopment #WebDevelopment #BuildInPublic #Consistency
-
Explore content categories
- Career
- Productivity
- Finance
- Soft Skills & Emotional Intelligence
- Project Management
- Education
- Technology
- Leadership
- Ecommerce
- User Experience
- Recruitment & HR
- Customer Experience
- Real Estate
- Marketing
- Sales
- Retail & Merchandising
- Science
- Supply Chain Management
- Future Of Work
- Consulting
- Writing
- Economics
- Artificial Intelligence
- Employee Experience
- Workplace Trends
- Fundraising
- Networking
- Corporate Social Responsibility
- Negotiation
- Communication
- Engineering
- Hospitality & Tourism
- Business Strategy
- Change Management
- Organizational Culture
- Design
- Innovation
- Event Planning
- Training & Development