Stop losing track of educational videos scattered across playlists, tabs, and history. StudyFlow organises them into real courses with progress tracking you can actually see.
Used Gemini to debug parts of the code, refine the UI structure, and improve CSS organization.
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