Mini Web Projects

A toggle switch: click it and the knob slides across while the background fades between light grey and green.

A tooltip made with CSS only, fading in above the text on hover.

An animated logo page: the picture grows inside spinning rings above "Hi, I'm Mohammad."

The web version of the Four Plus number-guessing game in a console-style window.

A simple calculator with digits, brackets and the four basic operations.

A table whose rows and cells are built by JavaScript.

A login form whose icons come from one CSS sprite image.

A small JavaScript library that draws an SVG progress ring with a start angle, percentage, colour and direction.

Six UI controls styled after Microsoft's Fluent Design: buttons, checkboxes, links, progress bars, radio buttons and toggle switches.

A timeline of projects and technologies over years and months, drawn by a small JavaScript class from data.json, a page at a time.

Three SVG icons drawn as a sprite of symbols, with live stroke and fill colours.