Random Learning WebDev 🌱

My personal sandbox for learning web development — a collection of small HTML/CSS/JS exercises I've built while studying IT/Computer Science, plus one bigger prototype tied to my thesis work.

This isn't a polished product repo. It's closer to a lab notebook: each file (or small file group) is one concept I wanted to understand by actually building it, rather than just reading about it.

🎯 Why this repo exists

As a student, I wanted a place to:

• Practice core HTML/CSS/JS concepts outside of class assignments
• Try out UI patterns and effects I see online and figure out how they work
• Keep a visible record of how my skills have progressed over time
• Build toward bigger, more "real" projects (like the café POS prototype below)

🗂️ What's in here

UI Components & Interactions

Small, focused exercises on common interface patterns.

Exercise	Files	Concept practiced
Dropdown Menu	Dropdown Menu.html, Dropdown.css	Toggleable menus
AutoSuggest	AutoSuggest.html/css	Input suggestions/autocomplete
Floating Input Animation	Floating Input Ani.html/css	Animated form labels
OTP UI	OTP-UI.html/css/js	One-time-password style input boxes
Upload System	Upload System.html/css, Upload system.js	File upload UI/logic
Password Generator	Password Generator.html/css	Randomized string generation
Smooth Animated NavBar	Smooth Ani NavBar.html/css	Navigation bar animation
Nav (TSX)	Nav.tsx	Navigation component in a React/TS context

Visual Effects & Animation

Exercises focused on CSS/JS-driven visuals.

Exercise	Files	Concept practiced
Animated Background	Animated BG.html/css	Background animation
Animated Progress Bar	Animated Progress bar.html/css	Progress indicators
Gradient Background	Gradrient Background.html/css	CSS gradients
GlassMorphism	GlassMorphism.html/css/js	Frosted-glass UI style
GlowCard	GlowCard.html/css	Glow/hover lighting effects
Hover Cards / Hover	Hover Cards.html/css, Hover.html/css	Hover interactions
RainbowTxt	RainbowTxt.html/css	Animated text color effects
Dynamic Text	DynamicText.html/css	Text animation
GSAP Cursor Trail	GSAP cursor trail.html/css/js	Using the GSAP animation library
Overlapping Scroll	OverlappingScroll.css, OverlappingScroll copy.html	Scroll-based layout effects
Box	Box.html/css	Layout/box model practice

Logic & Data Handling

Exercises focused more on JavaScript logic than visuals.

Exercise	Files	Concept practiced
Dark Mode + Local Storage	DarkMode and Local Storage.html/css/js	Theme toggling + persisting state with localStorage
Color	Color.html/css/js	Color manipulation/generation
QR Code	QR Code.html/js	Generating QR codes with JS
Realtime	Realtime.html/css/js	Real-time updating UI

Misc / Reference

File	Purpose
Html shortcuts.html	Personal reference notes for HTML shortcuts
Test Exercises 2hrs random codes.html	Timed practice session
Testing.css, test.html	Scratch files for quick testing
index.html, style.css, script.js	Base scaffold files

🏆 Featured Project: Café POS System Prototype

houtarou_pos.html — a single-file Point-of-Sale prototype for a café, built as part of my thesis exploration (POS and Inventory Management System for Beanne's Café). It includes:

• A themed menu with categories and pricing (PHP currency)
• A working cart with live totals and 12% VAT calculation
• Receipt generation
• A custom warm, minimalist café aesthetic (Playfair Display + Inter fonts)
• A login screen (demo credentials only — not production-ready)

This is the most "complete" piece in the repo and represents where my smaller exercises above are heading: real, usable interfaces rather than isolated demos.

📈 Progress notes

• Started with basic HTML/CSS layout and hover effects
• Moved into JavaScript-driven interactivity (local storage, real-time updates, file uploads)
• Started incorporating external libraries (GSAP) and typed component syntax (TSX)
• Currently applying these skills toward a larger, thesis-related prototype (café POS system)

⚠️ Notes

• These are learning exercises, not production code — expect hardcoded demo values, inline styles/scripts, and no build tooling.
• houtarou_pos.html uses hardcoded demo login credentials for prototyping only.
• Most exercises can be run by simply opening the .html file in a browser.

🔮 Next steps

• Add a proper README-style comment header to each exercise file
• Split houtarou_pos.html into separate CSS/JS files
• Standardize file naming (remove spaces, use kebab-case)
• Continue building out the POS/Inventory system as part of thesis work