In this update, we took a simple AI tools directory and gave it a complete overhaul. First, we ensured all logos load reliably by adding fallback images for broken links. Next, we added a paid tool for every category, ensuring a balanced mix of free and premium offerings. We also kept the entire structure clean by organizing categories and tools dynamically. Lastly, we improved user interactivity: clicking a category filters tools smoothly, and a live search refines results in real time. With these fixes, the hub is now more user-friendly, visually consistent, and balanced in its offerings.

Of course! In this vlog, we added a live search feature to our AI Tools Hub. After we set up our tool cards, we listened for every keystroke in the search input. As soon as the user types, we capture the text, convert it to lowercase, and compare it to each tool’s name. If the name includes the search term, we keep it visible; if not, we hide it. This makes it easy for users to quickly find the exact AI tool they need, without reloading the page. What do you think about this feature? Would you suggest any adjustments, or is this functionality enough for you? Let me know your thoughts!

This JavaScript code is doing a lot of the heavy lifting for your AI Tools Hub site. It selects key elements like the navbar, filter buttons, search input, and tools grids. Then, it populates categories and tools using predefined data arrays. It also adds interactivity like smooth scrolling, mobile menu toggling, filtering by category or search, and animations on scroll. If you’d like, I can help you fine-tune any part of it or explain a specific function!

Of course! In this second vlog, I’ll walk you through how we added interactivity to the site using CSS and subtle animations. First, I’ll show you snapshots of the card design, where we applied hover effects to lift the card. Then, I’ll explain how we styled buttons and transitions to give them a smooth, professional feel. This will help users feel a natural, responsive interaction when browsing the tools.

I’m going to walk you through how we began building the AI Tools Hub website from scratch. We started by structuring the page with clean, semantic HTML elements—using a header, sections, and a footer. Once we had that foundation, we focused on the CSS, ensuring a minimal, modern design. I’ll explain how we chose colors, spacing, and made the layout fully responsive. Stay with me as we dive into how we created the navigation bar and added interactivity with JavaScript.

Today, I want to take you behind the scenes of building AI Tools Hub—my latest project aimed at helping users navigate the booming world of AI. When I first had the idea, I was overwhelmed by how many AI tools were out there—so I wanted to create a clean, professional hub. In this vlog, I walk you through the design process, from choosing a minimalist layout to selecting color palettes that exude a premium feel. I talk about how I split the site into free and paid AI tools, each category carefully curated. I also dive into the technical side—how I used semantic HTML, CSS grids, and vanilla JavaScript to make the site responsive and interactive. If you’re curious about how AI tools can transform your workflow, stick around—this is just the beginning!

In this update I worked on improving the interaction with the Register and Choose Plan buttons in the FitnessFirst Gym website. Before this change, clicking some buttons didn’t give the user any clear feedback, so I wanted to make the experience feel more complete.

I added a small confirmation message that appears at the top of the page when the user presses the Register Now button. The message appears in a green notification style to show that the registration was successful. This makes it clear that the action actually worked.

I also added a similar behavior to the Choose Plan buttons in the membership section. When a user selects a plan, a message appears confirming which plan they chose. If the user clicks the Starter plan it shows a message for the Starter pack, and if they click the Elite plan it confirms the Elite pack.

While implementing this, I discovered a small issue where the Start Now button in the navigation bar was triggering the same behavior as the Register button. The problem happened because both buttons were being selected in the same way in JavaScript. I fixed it by targeting the correct button inside the contact section instead.

This update mainly focuses on improving user feedback and making the site feel more interactive.

I’m thinking about improving this further later by maybe adding icons to the message or making it disappear automatically after a few seconds. I’d also like to know if it would be better to redirect users to another page after choosing a plan.

In this devlog, we implemented dynamic enhancements to the user experience using JavaScript. First, we added smooth scrolling to the navigation links, allowing the page to scroll seamlessly to the target sections when clicked. Next, we introduced a subtle parallax effect in the hero section, where the background moves at a different speed as the user scrolls. We also refined button interactions, adding a subtle scale and glow on click, giving a premium feel. Additionally, we ensured that number counters animate only when they come into the viewport, creating a sense of excitement as stats build up. After testing on various devices, these changes made the site feel more polished, fluid, and professional, guiding users effortlessly through the FitnessFirst Gym offerings.

In this devlog, I focused on enhancing the user experience by implementing advanced CSS and JavaScript interactions. I added a parallax effect to the hero section, creating a dynamic background that subtly shifts as users scroll. I also refined button animations, so each click gives a premium, responsive feel. Furthermore, I implemented number counters that animate when they come into view, adding a sense of excitement. After thoroughly testing these changes on different devices, the site now feels more luxurious, smooth, and professional, guiding users effortlessly through FitnessFirst Gym’s offerings.

In this devlog, I focused on enhancing the user experience by implementing the visual and interactive improvements we planned. After adding golden gradients, subtle hover animations, and a refined layout, I tested each section to ensure smooth transitions. I also adjusted spacing between sections to create a balanced, elegant flow. Additionally, I fine-tuned the navigation bar so that it remains visible and sleek as users scroll. After implementing these changes, I tested the site on multiple devices to ensure responsiveness. By the end, the website felt more premium, and users could navigate seamlessly, making the entire journey through FitnessFirst Gym’s offerings feel both luxurious and effortless.

After finalizing the design for Fitnessfirst Gym, I moved on to the development phase, focusing on interactivity and user experience. My priority was ensuring that each user interaction felt smooth and natural, enhancing the overall engagement on the site.

I began by implementing smooth scrolling for the navigation links. Using JavaScript, I captured click events on the navbar links and smoothly scrolled to the corresponding sections. This made the navigation feel much more professional and fluid.

Next, I tackled the statistics section. Each counter, such as active members and years of experience, was designed to start at zero and count up to its target number when the user scrolled to that section. I used JavaScript to calculate incremental updates until the final number was reached, which added a dynamic and exciting element to the stats.

In addition, I implemented interactive buttons for both the hero section and membership plans. By adding subtle click effects, like scaling down and a golden glow, the buttons felt more responsive and engaging. These small details helped the site feel premium and polished.

One of the most rewarding parts was integrating a smooth scroll reveal effect on each section. I used a scroll event listener so that as the user scrolled down, each section would fade in from below. This gave the entire page a sense of flow and progression, making the experience feel immersive.

Throughout this development process, I faced challenges with layout adjustments, ensuring responsiveness, and debugging minor interaction issues. After several iterations and testing on multiple devices, every component worked seamlessly together. The result was a professional, interactive website that not only looks premium but also feels intuitive and engaging to users.

For my Flavortown project, I decided to build a professional gym website called Fitnessfirst Gym. I wanted to create something that feels like a real commercial fitness brand instead of just a simple practice website. My goal was to design a modern, premium-looking platform that represents strength, discipline, and high performance. Before starting development, I carefully planned the structure and purpose of the website. I defined the target audience as beginners starting their fitness journey, athletes aiming to improve performance, and busy professionals who need structured and efficient training plans. I organized the main sections to include a strong hero section with a motivational headline, an about section explaining the gym’s mission, a membership section presenting clear package options, and a contact section. I also chose a black and gold color theme to create a powerful and premium identity that matches the fitness industry. This planning stage helped me think more professionally about website structure and user experience before writing any code.

Devlog 1 – Project Setup

Date: 14 Feb 2026

• Created a new project named Panda Restaurant.
• Set up basic HTML and CSS files.
• Defined the main page structure: header, home, about, menu, gallery, contact, footer.

Built a responsive restaurant website using HTML & CSS.

– Designed the full layout (header, sections, footer)
– Styled the website with clean, modern CSS
– Added hover effects and smooth transitions
– Focused on clean structure and readability

Time spent: ~4.24 hours

I’m working on my first project! This is so exciting. I can’t wait to share more updates as I build.