Learning and improving by building projects.
Created a basic Image Editor with HTML, CSS, and JavaScript.
Added real-time filters using Canvas API and download feature.
Features:
• Real-time filters (brightness, contrast, blur, etc.)
• Presets (vintage, black & white, warm tone, etc.)
• Reset option
• Download edited image
UI is not fully responsive yet, still working on improving it.
🔗 Live Demo: https://lnkd.in/g9EHkjve
🔗 GitHub Link: https://lnkd.in/gwfEq_j7
Trying to get better with each project.
#WebDevelopment#JavaScript#Frontend#Learning
Day 13 of 30 Of #M4ACELearningChallenge
Today I got introduced to Bootstrap.
Bootstrap is a collection of pre-written HTML, CSS and JavaScript that developers can use to quickly build modern-looking interfaces without starting from zero every time.
Instead of writing this: border-radius: 5px;
padding: 8px 16px;
background-color: blue;
You just write: class="btn btn-primary"
#LearningInPublicMentorship for Acceleration
🚀 Built a Matrix-Style Text Effect using HTML, CSS & JavaScript
Ever wondered how those hacker-style scrambling texts work?
I tried recreating that exact effect — and here’s what I learned 👇
💻 Project Overview
Created a dynamic “Matrix text reveal” effect where random characters gradually transform into the actual message:
👉 "Welcome To The Admin Dashboard, USER!"
⚙️ How it works (simple breakdown):
• Split original text into characters
• Replace each character with random letters
• Gradually reveal correct letters using an iteration logic
• Update UI smoothly using setInterval()
🧠 Key Concepts I Practiced:
✔ DOM Manipulation (querySelector, innerText)
✔ Higher-order functions (map, split, join)
✔ Randomization logic (Math.random)
✔ Animation timing & control
✔ Clean UI design with CSS
🎯 What I Learned:
This wasn’t just about visuals — it helped me understand:
• How animations actually work under the hood
• How to think in terms of logic + UI together
• How small projects can strengthen core JavaScript
🔥 Next Steps:
Planning to level this up by:
• Triggering animation on hover/click
• Adding sound effects 🎧
• Making it reusable as a component
📌 Takeaway:
You don’t need complex frameworks to build something cool.
Strong fundamentals = powerful creativity.
#JavaScript#WebDevelopment#Frontend#Coding#Projects#LearningInPublic#100DaysOfCode#DeveloperJourney#matadeenyadav#MatadeenYadav
🎮 Just built a simple Tic-Tac-Toe game using HTML, CSS, and JavaScript.
Nothing too complex — just wanted to strengthen my fundamentals and understand how things work behind the scenes without using any frameworks.
What I worked on:
• Handling game logic (win conditions, turns)
• Updating UI with DOM manipulation
• Reset functionality
Honestly, small projects like this help a lot in getting comfortable with core concepts.
Thinking of improving it next by adding an AI opponent or better UI.
Open to suggestions 👀
#JavaScript#HTML#CSS#WebDevelopment#Learning
🚀 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
𝗦𝘁𝗼𝗽 𝘄𝗿𝗶𝘁𝗶𝗻𝗴 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗳𝗼𝗿 𝘁𝗵𝗶𝗻𝗴𝘀 𝗖𝗦𝗦 𝗰𝗮𝗻 𝗱𝗼 𝗻𝗮𝘁𝗶𝘃𝗲𝗹𝘆!
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
𝗗𝗼𝗻'𝘁 𝗸𝗻𝗼𝘄 𝘁𝗵𝗶𝘀 𝗨𝗥𝗟 𝘁𝗿𝗶𝗰𝗸 ?
𝗚𝗲𝗻𝗲𝗿𝗮𝘁𝗲 𝗮 𝗧𝗲𝘅𝘁 𝗙𝗿𝗮𝗴𝗺𝗲𝗻𝘁 𝗟𝗶𝗻𝗸
Simply 𝗮𝗽𝗽𝗲𝗻𝗱 #:~:𝘁𝗲𝘅𝘁=𝘆𝗼𝘂𝗿 𝘁𝗲𝘅𝘁 here to a URL and it will navigate straight to the specific sentence without HTML anchor required.
(/#:~:text=Standardforce%20Corporation)
https://lnkd.in/gHG9RMuh
function generateTextFragment(url, text) {
return `${𝘂𝗿𝗹}#:~:𝘁𝗲𝘅𝘁=${𝗲𝗻𝗰𝗼𝗱𝗲𝗨𝗥𝗜𝗖𝗼𝗺𝗽𝗼𝗻𝗲𝗻𝘁(𝘁𝗲𝘅𝘁)}`;
}
It just 𝘄𝗼𝗿𝗸𝘀 𝘄𝗶𝘁𝗵 𝗖𝗵𝗿𝗼𝗺𝗲 𝟴𝟬+ 𝗮𝗻𝗱 𝗠𝗶𝗰𝗿𝗼𝘀𝗼𝗳𝘁 𝗘𝗱𝗴𝗲.
Fantastic solution for making references without even needing to touch the code.
Here are a few considerations:
The 𝘁𝗲𝘅𝘁 𝗺𝘂𝘀𝘁 𝗯𝗲 𝗶𝗱𝗲𝗻𝘁𝗶𝗰𝗮𝗹 including spaces and punctuation
𝗪𝗼𝗻'𝘁 𝘄𝗼𝗿𝗸 𝗳𝗼𝗿 𝗱𝘆𝗻𝗮𝗺𝗶𝗰𝗮𝗹𝗹𝘆 𝗹𝗼𝗮𝗱𝗲𝗱 𝗰𝗼𝗻𝘁𝗲𝗻𝘁 𝗼𝗿 𝗰𝗮𝗻𝘃𝗮𝘀 𝘁𝗲𝘅𝘁
𝗡𝗼𝘁 𝘀𝘂𝗽𝗽𝗼𝗿𝘁𝗲𝗱 𝗯𝘆 𝗦𝗮𝗳𝗮𝗿𝗶 𝗼𝗿 𝗼𝗹𝗱𝗲𝗿 𝘃𝗲𝗿𝘀𝗶𝗼𝗻𝘀 𝗼𝗳 𝗙𝗶𝗿𝗲𝗳𝗼𝘅
May not work properly for common phrases
#WebDevelopment#JavaScript#Frontend#ChromeTips
Exploring the DOM with a Small Dynamic Project
After learning JavaScript basics, I started working with the DOM, and this is where things became more practical and interesting.
Instead of just using the console, I built a small interactive project where I can create, update, and delete elements dynamically.
What is DOM?
The DOM represents HTML as a structure where each element can be accessed and modified using JavaScript.
What I learned:
Selecting elements:
1. Using getElementById() to access elements.
2. Using querySelector() for flexible selection.
DOM Manipulation:
1. Creating elements using createElement().
2. Adding elements using appendChild().
3. Updating content dynamically.
4. Removing elements using removeChild().
Styling using DOM:
1. Changing styles dynamically using element.style.
2. Applying properties like color, font size, background, alignment.
3. Understanding how UI can be controlled directly with JavaScript.
Event Handling:
1. Using addEventListener() to handle user actions.
2. Performing operations like add, update, and delete.
Project I built:
1. Add a new element dynamically.
2. Update existing content.
3. Delete elements from the page.
4. Input-based dynamic list with Edit and Delete options.
Project files:
HTML → dynamic.html
JavaScript → dynamic.js
Challenges I faced:
1. Understanding how dynamically created elements behave.
2. Updating and deleting elements without errors.
3. Managing user input and UI updates.
4. Debugging small logic mistakes.
How I improved:
1. Broke problems into smaller steps.
2. Used console logs to track execution.
3. Practiced multiple times to understand flow.
One important realization:
DOM is not just about selecting elements. It is about dynamically controlling the UI and user interaction.
Still learning and improving step by step.
Would love your feedback.
#JavaScript#WebDevelopment#Frontend#CodingJourney#MERN#Learning
🚀 Mini Project: Dropdown Menu using HTML & CSS
#17-#css-Today I built a simple yet effective dropdown navigation menu using pure HTML and CSS 💻
🔹 What I implemented:
✔️ Created a structured layout using div elements
✔️ Used display: inline-block for horizontal alignment
✔️ Applied position: relative & absolute for dropdown placement
✔️ Built a hover-based dropdown using :hover selector
✔️ Added a transition effect for smoother interaction
🔹 Key Learning:
Understanding how positioning and hover states work together is essential for building interactive UI components without JavaScript.
💡 Small projects like this help strengthen front-end fundamentals and build confidence step by step!
#HTML#CSS#WebDevelopment#Frontend#LearningByDoing#BeginnerProject
📌 10000 Coders
#Day43 of #100DaysOfCode
Today I created an interactive Star Rating System using HTML, CSS, and JavaScript
Features I implemented:
Clickable 1 to 5 star rating system
Dynamic highlighting of selected stars
Live rating display update (e.g., 3/5)
Clean and responsive card UI design
What I learned:
Handling multiple elements using`getElementsByClassName`
Using loops to update UI dynamically
Adding & removing classes with `classList`
Improving user interaction with simple logic
This project helped me understand how rating systems work in real-world applications like reviews and feedback
Building small features like this is boosting my JavaScript confidence
Code Of School - Avinash Gour & Ritendra Gour#Day43#WebDevelopment#JavaScript#HTML#CSS#FrontendDevelopment#100DaysOfCode
Perfect