StudyTrack is a web-based tool I built to track study time, sessions, and overall learning consistency. While building it, I worked with HTML, CSS, and JavaScript to create an interactive interface and manage user inputs dynamically. The biggest learning came from handling real project issues—like fixing layout inconsistencies and improving UI structure. It taught me that building features is easy, but refining and polishing them is where real development happens.
The core worked, but cracks showed up in the UI and styling. Some parts felt unfinished, almost rushed. Instead of ignoring it, I’m now revisiting those weak spots, refining the design, and pushing it closer to the standard I actually expect from my work.
Log in to leave a comment
I built StudyTrack, a simple web app to track YouTube courses and organize learning in one place. Users can create course entries, add videos, and track their progress through a clean library and study mode interface.
One challenging part was structuring the UI so multiple views (library, course detail, study mode) felt connected and consistent. I solved it by organizing the HTML layout clearly and using a shared CSS design system with variables.
I’m most proud of the polished interface and the overall structure of the app. It now feels like a real product rather than just a static webpage.
N.B: This mockup is built from an external website which is mainly for the decoration purpose(Please ignore this)
Wrapped up the final stage of the project today.the main UI, including the landing page,library view,course deatil view,and study mode structure,is now fully implemented. Completed the remaininbg styling,layout adjustments, and small interface fixes to keep everything consistent with the light mode design system.The core features for tracking courses, organizing videos, and adding course details are all working,With the structure ,styling,and interface ccomplete,the first full version of StudyTrack is now Finished.
21:23 IST,Saturday,14-03-26
Log in to leave a comment
Completed the full HTML structure for the entire website today, setting up the base layout for all major sections of the app. Along with that, I finished writing the CSS for the main landing page and the library page where users will see the courses or videos they have scheduled to study. I focused on keeping the layout clean, readable, and consistent with the light-mode design system. I also implemented a popup form where users can add course details such as category, title, and description. With this done, the main UI structure and core styling of the platform are now ready.
15:56 IST, Saturday, 13-03-26
Log in to leave a comment
Finished styling the navigation bar today. Added the CSS for the header layout, logo, and navigation buttons. Focused on alignment, spacing, and making sure the active state for buttons is clear. The navbar now matches the overall light-mode design and works as the main navigation for Library and Study Mode
Log in to leave a comment
Started building the main structure for the CourseShelf interface today. Set up the base HTML layout including the header, navigation, home view, course detail view, and video list sections. Also defined the root color variables and typography system to keep the design consistent across the UI. The basic app structure is now ready.
11:13 IST, Saturday, 14-03-26
Log in to leave a comment
Completed the FAQ section today. Built the full HTML structure and added the CSS styling to keep it consistent with the light-mode design used across the page. Focused on clear layout, readable text, and proper spacing so users can quickly find answers.
21:28 IST ,Friday,13-03-26
Log in to leave a comment
After finishing the hero section, I moved straight to the testimonials section. Built the full HTML structure and completed the CSS styling for it. Focused on keeping the layout consistent with the light-mode design and maintaining clean spacing and readability. The section structure and styling are now done.
20:32 IST,Friday,13-03-26
Log in to leave a comment
Finished building the hero section. Adjusted the layout, spacing, and typography to match the new light-mode color preference. Removed the older neon/SaaS style elements and kept the design minimal and clean. Focused mainly on readability and structure so the first section of the page looks simple, and clear
17:46 IST, Friday, 13-03-26
Log in to leave a comment
Refactored the UI today. I removed the previous styling and rebuilt the interface around a light-mode color preference to create a cleaner, more refined look. Instead of the usual SaaS neon palette, I focused on softer tones, better contrast, and consistency.
also my previous CSS was embedded in a single file as per my previous vote feedback today i moved that to different file.
17:08 IST,Friday,13-03-26
Log in to leave a comment
Finished the html structures, now i worked on the CSS and finished my navbar! worked on the background mainly to give it a polished look with a gradient background, worked on the left side and finished that upto some part,but yeah the right side is still left for styling.Actually i am a bit perfectionist so might be i need to work more hard on the ui to make it look more polished ,in mean time i watched a tutorial on YT to learn about the gradient background in CSS and some other elements!!
20:55 IST,Thursday,12/03/26,
Log in to leave a comment
Day 1
Finished some parts of the landing page html and going to start styling with css
Log in to leave a comment
I built a Sport-Focused Fitness Tracker that helps users assess their fitness, choose a sport, and follow sport-specific workout plans with exercise GIFs, live timers, and smart recovery tips during rest breaks.
The hardest part was designing athletic logic without a backend—especially tracking performance metrics and triggering recovery pop-ups at the right moments. I solved this using JavaScript logic, LocalStorage, and careful UX planning to keep everything fast and realistic.
I’m most proud of making it feel like a real fitness-tech startup product, not just a static website. This project taught me product thinking, user-first design, and how powerful front-end logic can be when used creatively 💪
Finally finished the whole project and added the final polishing hope athletes are gonna love it!
Log in to leave a comment
Integrated clerk in my application for the auth purposes by removing my previous auth system
Log in to leave a comment
Today I worked on the SearchExercises component using React + MUI. I implemented state handling with useState, built a clean search UI using Stack, TextField, and Button, and connected user input to live state updates. I also set up a basic handleSearch function to prepare for fetching exercise data next. Still rough, but the structure is getting real and professional.
Log in to leave a comment
Finally finished designing the landing page! it took a lit bit more than usual for some bugs that appeared out of no where and I had to use chatgpt for solving the bugs.
Log in to leave a comment
I’ve been working on building the authentication flow from scratch. The focus so far has been on setting up a clean and flexible Login / Signup UI using React state management.
Log in to leave a comment
Updated css logics as it was causing some bugs
Log in to leave a comment
I’m hyped to finally drop this! We’ve all been there—you find a quote that hits deep, but by the time you open a clunky design app and fight with the alignment, the “vibe” is dead. I wanted to build something that turns inspiration into a polished post before the spark fades.
The biggest takeaway? Constraint is a feature. I spent a lot of time stripping things out. I realized that giving users 1,000 fonts is a burden, but giving them 10 perfect fonts is a gift. I learned how to balance “pro-level” output with a “single-click” user experience. Designing for speed taught me more about UI than any complex project ever has.
finished most part of our website and landing look something like this
Log in to leave a comment
I built VerdantAI, a virtual plant website that reacts(gives compliment) to weather conditions entered by the user. Based on the weather, the environment changes colors, animations (like raining) kick in, and the plant responds with calming, motivational compliments.
While building this, I learned a lot about state-driven UI, CSS animations, responsive design, and how to create an emotional user experience using just HTML, CSS, and JavaScript (no frameworks). It was challenging but rewarding to combine logic, visuals, and UX into one cohesive project.
Overall, this project helped me level up my front-end fundamentals and think more like a product designer + developer, not just a coder
Finished the landing page styling
Log in to leave a comment
