▍Projects
Projects
Real things you build from a starter to a working app — one milestone at a time.
Personal Portfolio Page
Build a polished, responsive personal landing page with a hero, about section, projects grid and contact links — using only HTML and CSS.
Outcome · A one-page portfolio you can actually publish: a bold hero, a short story about you, a grid of project cards that reflows from one to three columns, and working contact links.
Tip & Bill Splitter
Build a calculator that splits a restaurant bill: bill + tip % + people → tip and total per person in RM, with validation and proper rounding.
Outcome · A working form that shows “Tip per person” and “Total per person” in RM with two decimals, refuses bad input with a friendly message, and resets cleanly.
To-do App That Remembers
Build a classic to-do app the right way: state in an array, a render function, events for add/complete/delete/filter, and localStorage so it survives a refresh.
Outcome · A to-do list where you can add tasks, tick them off, delete them, filter All / Active / Completed, see how many are left — and find everything still there after reloading the page.
Monthly Expense Tracker
Track where your ringgit goes: add expenses with a category, see totals per category, your balance against a budget, delete mistakes — and keep it all in browser storage.
Outcome · A budgeting app with a live summary (spent, balance that turns red when you overspend), category totals with bars, a deletable expense list, and data that survives a refresh.
Weather Dashboard (with Sample Data)
Use fetch, async/await and error handling to build a weather dashboard for Malaysian cities — powered by a clearly labelled sample data file.
Outcome · A dashboard where you search “Kuching” and get current conditions plus a 3-day forecast — with a loading message, a friendly “city not found”, and graceful recovery from network errors.
Animated Landing Page
Bring a landing page to life with CSS transitions, hover and focus states, @keyframes entrances and a staggered reveal — while respecting users who prefer reduced motion.
Outcome · A polished landing page whose buttons and cards respond smoothly to hover and keyboard focus, whose hero and features glide in on load, that calms down completely for `prefers-reduced-motion`, and that reflows on any screen.