🚀 Recently implemented a Gallery Section with Tab Filtering using JavaScript! I created a gallery where users can easily filter images by clicking different tabs. The filtering happens instantly using JavaScript, which makes the gallery more interactive and user-friendly without reloading the page. ✨ Key Highlights: • Tab-based image filtering using JavaScript • Clean and simple user interaction • Dynamic content display without page refresh • Improved user experience for browsing images Small features like this help build more interactive and engaging websites while improving frontend development skills. #JavaScript #WebDevelopment #FrontendDevelopment #LearningInPublic #Coding #UIUX
More Relevant Posts
-
I recently created a simple yet fun Bulb ON/OFF project using HTML, CSS, and JavaScript — and honestly, it helped me understand DOM manipulation much better. 🔧 What I learned: How to use getElementById() to access elements Handling user interactions with addEventListener() Dynamically changing UI using JavaScript (like switching images) Difference between img src vs background-image ✨ Features: Toggle bulb ON/OFF using buttons Clean UI with centered layout Real-time visual feedback This may look like a small project, but it’s a big step in building strong fundamentals 💪 Would love feedback and suggestions 🚀 Gravity Coding #javascript #Frontend #codingJourney #LearningInPublic #WebDevelopment #JavaScript #Frontend #LearningByDoing #100DaysOfCode #BeginnerProjects
To view or add a comment, sign in
-
Day 16 of my JavaScript journey 🚀 Built a Drag and Drop Interface using HTML, CSS, and JavaScript. Users can drag items and drop them into different containers with smooth interaction. This project helped me practice: • Drag and Drop API • Event handling • DOM manipulation • Building interactive UI 🔗 Live Demo: https://lnkd.in/gvWBT7tJ 💻 GitHub Repo: https://lnkd.in/gJDK4_AP Learning how to create more interactive and user-friendly web experiences. 💻 #JavaScript #WebDevelopment #FrontendDeveloper #100DaysOfCode #CodingJourney
To view or add a comment, sign in
-
Day 20 of My JavaScript Journey Today I built a small interactive JavaScript project called “Spotlight”. In this project, a spotlight effect follows the mouse movement on the screen, creating a dynamic lighting effect as the cursor moves. What I practiced while building this project: • Handling mouse movement events (mousemove) • Updating UI dynamically using JavaScript and DOM manipulation • Understanding how user interaction affects the interface in real time • Improving logic and structure while building a small interactive project This project helped me understand how JavaScript can be used to create interactive UI effects, not just logic or calculations. Small projects like this make learning much more practical and fun. Project Built: Spotlight (Mouse Follow Effect) ✨ Day 20 #JavaScript #SheriyansCodingSchool #FrontendDevelopment #WebDevelopment #CodingJourney #BuildInPublic
To view or add a comment, sign in
-
🚀 Web Development Journey - JavaScript Day 11 Today I focused on something really practical — manipulating element styles with JavaScript. This is where you move from just selecting elements… to actually controlling how they look and behave. Here’s what I worked on: 🔹 Changing styles directly using the style property 🔹 Using cssText to apply multiple styles at once 🔹 Understanding styles better with getComputedStyle() 🔹 Working with className 🔹 And using classList (add, remove, toggle, replace) Honestly, this part made things feel more real, like I’m actually building interactive UI, not just writing code. Didn’t do anything crazy today, but I showed up and made progress. That’s what matters. Next up: JavaScript Events ⚡ #WebDevelopment #JavaScript #100DaysOfCode #FrontendDevelopment #LearningInPublic
To view or add a comment, sign in
-
-
Frontend Development Practice – Light Switch Interaction Web Page 💡 #30daysofcode challenge #day4 Built a simple interactive Light Switch web page using HTML, CSS, Bootstrap, and JavaScript. This project helped me understand how JavaScript can dynamically update elements on a webpage. Also focused on DOM manipulation and event handling to change images, text, and styles in real time. Key Highlights: ✅ Implemented button-based interactions using JavaScript functions ✅ Practiced DOM manipulation using document.getElementById() ✅ Dynamically updated images by changing the src attribute ✅ Updated UI text using textContent ✅ Modified styles dynamically with JavaScript (style.backgroundColor) #NxtWave #30daysoflearning #coding #JavaScript #HTML #CSS #Bootstrap #FrontendDevelopment #WebDevelopment #LearningByDoing #TechBeginners
To view or add a comment, sign in
-
I built a fully functional calculator using HTML, CSS, and JavaScript. You can try it here: https://lnkd.in/eMK35_N9 Features: • Performs basic arithmetic operations • Clean and responsive interface • Interactive button functionality What I learned: - Handling user input with JavaScript - Structuring logic for calculations - Improving UI for better user experience It’s a simple project, but a solid step in my frontend journey. More projects coming 🚀 #frontenddeveloper #javascript #webdevelopment #buildinpublic
To view or add a comment, sign in
-
Built a Spotlight Effect using HTML, CSS & JavaScript ✨ This mini project is part of my DOM revision, where I explored: • Mouse events • CSS variables • setProperty() for dynamic styling A simple yet effective way to practice interactive UI and strengthen core JavaScript concepts. Always fun revisiting the fundamentals and building something visual out of it! 🚀 #WebDevelopment #JavaScript #CSS #DOM #Frontend #LearningInPublic
To view or add a comment, sign in
-
Just built my first real JavaScript project 🚀 I created a Simon Says Game using HTML, CSS, and JavaScript. 🔹 Features: • Dynamic color sequence generation • Real-time user input validation • Progressive difficulty levels 🔹 What I focused on: • DOM manipulation • Event handling • Structuring game logic This project helped me understand how small UI interactions actually work behind the scenes. 👉 Try it here: https://lnkd.in/gVuXbaAq Would appreciate feedback 🙌 #javascript #webdevelopment #100DaysOfCode #learninginpublic
To view or add a comment, sign in
-
-
Practicing and revising my JavaScript concepts by building a Simon Says Game using HTML, CSS, and JavaScript. In this project, the player needs to remember and repeat the sequence generated by the system. Through this, I practiced: • DOM events • Arrays for storing sequences • Game logic implementation • User interaction handling Building small projects is a great way to strengthen concepts. 💻✨ #javascript #webdevelopment #frontend #coding #learningbydoing #project #html #css
To view or add a comment, sign in
-
🚀 Learning JavaScript DOM – Let’s Grow Together! I’ve recently started exploring the DOM (Document Object Model) in JavaScript, and it completely changed how I look at web development. Before this, HTML felt static… but with DOM, it becomes dynamic and interactive. Here’s what I’ve learned so far: ✔ How to select elements from a webpage ✔ How to change content and styles using JavaScript ✔ How to handle user actions like clicks and inputs ✔ How to make webpages respond in real-time Now I’m curious to learn more and improve my skills further 💡 👉 I’d love to hear from you: - How did you master DOM concepts? - Any tips, resources, or projects you recommend? - What should I focus on next? Let’s share knowledge and grow together as developers 🤝 #JavaScript #WebDevelopment #Frontend #Learning #DOM #CodingJourney
To view or add a comment, sign in
More from this author
Explore related topics
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