# html-css-examples: 57 numbered folders of CSS effects to read and copy

> html-css-examples is an MIT licensed collection of standalone HTML and CSS demos, from SVG animation to container queries, each in its own numbered folder and published as a live demo page. It is teaching material for a video series rather than a library with a release cadence, and the last push to the repository was on 2026-04-09.

**zxuqian/html-css-examples** — A collection of HTML and CSS examples, including effects and UIs.

- Repository: https://github.com/zxuqian/html-css-examples
- Website: https://zxuqian.github.io/html-css-examples/
- Stars: 993 · Forks: 373
- Language: HTML
- License: MIT
- Published: 2026-10-20 · Updated: 2026-10-20 · Language: en
- Canonical page: https://hysenlabs.com/projects/zxuqian-html-css-examples

## One folder per effect, numbered from 01 upward

The repository is a directory of small self contained projects rather than a library. Each folder holds the source of one example, and the folders are numbered so the newest one is obvious: the listing starts at 01-social-icon-hover-glow-effect, runs through 02-login-form-glass-effect, 03-chatting-ui, 07-3d-cubic-images, 08-parallax-scrolling and 11-canvas-bar-chart, and continues to 57-login-form-glass-2. The categories the author lists are CSS and SVG animation, shadows, glowing and glass effects, responsive layout, a type-writer effect, face recognition, 3D transformations and native canvas, along with the phrase and more. The stated purpose is inspiration and cheat sheets, and where the files come from is explained in the first line: the repository contains the source code for the author's videos on Bilibili under his own channel name. The author is explicit that the text in the videos and the code is primarily Chinese, while also stating that the repository can be used without knowing Chinese by reading the critical part, which is the code.

## The demo page is generated from a Babel compiled index file

The only build step in the repository exists to produce the online demo page. The package manifest defines a single script:

```json
  "scripts": {
    "watch": "babel --watch src/index.js --out-dir ."
  },
```

The watch script monitors changes in src/index.js and compiles it to /index.js, and that compiled file is what the demo page uses to display the React components for each example. The entry point of the package is index.js, and the devDependencies are Babel CLI, Babel core and the React preset, which is what the compile step needs. In other words the individual example folders are not built, they are plain HTML and CSS that you open directly, and the only React involvement is the index that lists and links to them. That split is the practical shape of the repository: fifty plus independent samples that need no tooling, and one small index file that ties them into a browsable page.

## Running the demo page locally, one watch command

Because the published demo lives at the project's GitHub Pages address, the quickest first look needs no setup at all: open the online demo and click through the list. To work on the index locally you need the watch command from the contributing guide, which runs either package manager:

```bash
yarn run watch
npm run watch
```

Run it from the repository root and Babel will watch src/index.js and write the compiled output to /index.js in the same place. What you should see is the compile running once, then again each time you save the source file. The examples themselves need nothing from this step, since each folder is standalone HTML and CSS. A contributor therefore has two different workflows, and confusing them wastes time: touching an example folder is a plain file edit with a browser refresh, while touching the index is a source edit that needs the watcher running to regenerate the file the demo page loads. The project also links a Chinese version of the README and a personal blog at the author's own domain, along with a Bilibili space and a QR code image in the repository.

## Contributing means a numbered folder, a branch and an entry in the index

The contributing guide is unusually prescriptive, which is helpful because the repository has a shape that contributors must respect. The steps are: fork the repository; create a new branch starting with feature/; structure the project according to the existing ones, noting the latest numbering; run the watch command so the index compiles; update src/index.js by adding the example name and link at the top of the uis array, setting newItem to true and removing the newItem property from the previous item; test and open a pull request; and make sure the examples are aesthetically pleasing, in the wording of the guide. The newItem flag is a highlight marker for the newest example, which means the previous entry has to be cleared or two items end up flagged. The numbering instruction has a wrinkle, because the directory listing contains two folders numbered 31, 31-05-wechat-emoji-effect and 31-webcomponent-get-started, so the latest number to follow is the highest one, not the count of folders. One clause in the guide deserves a second read before you contribute: by contributing you agree that your code may be used for demonstration in the author's videos.

## Several of the examples are about JavaScript APIs, not only CSS

The topic list makes the repository look like a CSS gallery, but the folder names show a wider scope. Among the numbered directories are 24-fetch-get-data, 34-drag-drop-api, 35-collision-physics, 42-clipboard-api, 44-css-pointer-events, 45-URLSearchParams, 49-html-buit-in-dialog, 51-css-scroll-based-animation and 53-screenshot-html2-canvas. 22-face-reco-mask and 09-japanese-pronunciation are demo pieces built around recognition or media rather than styling. 37-container-queries, 40-multi-column-layout, 41-css-scroll-snap, 46-css-aspect-ratio, 47-css-custom-scrollbar and 50-css-grid-irregular-layout are layout and platform features, and 31-webcomponent-get-started and 39-web-animations are platform APIs. The repository topics confirm the mix, listing css, css3, effect, html, javascript and ui. So the useful mental model is a browser technique notebook organised by demo, where the CSS examples are the most numerous but not the only content.

## What this repository is not, and the state of the tree

Two limits are worth stating plainly before anyone builds on this. First, it is a teaching collection, not a dependency. There is no exported API, no versioned releases and no test suite, and the licence is the permissive MIT form, so the practical pattern is copy the file, read it, adapt it. The maintenance record is thin as well: the repository publishes no GitHub releases, the last push was on 2026-04-09, and the version field in package.json is a static 1.0.0 for the manifest rather than a release train. The examples therefore reflect what was current when the videos were made, and a browser behaviour change or a deprecated API will not be caught here, because nothing in the repository checks. Second, the source is a mirror of the video lessons, which means the narrative that explains why a line of CSS is there lives in the videos, not in the files. The author does say the critical part can be read without Chinese, but the deeper reasoning still sits in the episodes.

## The alternative is a maintained UI kit, not a folder of tricks

If the goal is a working interface rather than an idea to adapt, a UI component library or a CSS framework is the other route, and the difference in approach is clear. A library gives you a documented API, a versioned release with a changelog, a compatibility policy and usually a build step that resolves the browser support question for you. This repository gives you one self contained file per effect, with no API to learn and no version to track, and in exchange you own the maintenance of whatever you copy. The two are complementary rather than exclusive, and the repository is even honest about being a source of inspiration and cheat sheets. A third path is to keep the effects but rebuild the catalogue as documentation with its own site, which is what the src/index.js and uis array are a prototype of, since that file already builds a browsable list of the demos for the online page.

## Conclusion

html-css-examples suits a front end developer who wants one readable file per effect, a live demo to point at, and a licence that lets the code be reused, and it suits the author of the videos who wants a public mirror of the lesson code. It does not suit a team that wants a supported dependency, since there is no package API, no test suite and no release history, and the comments are primarily in Chinese. Verify three things before you lean on it: that the effect you want is present at all, since the list stops at folder 57 and covers only what the videos taught, that the demo page builds on your machine, which needs the watch script rather than a static file open, and that the code you copy still matches current browser behaviour, since the repository has not been pushed to since 2026-04-09. The licence is MIT and the author is Xuqian Zhang.

## FAQ

### How do I run the demo page of html-css-examples locally?

Run yarn run watch or npm run watch from the repository root. The watch script compiles src/index.js to /index.js with Babel, and that compiled file is what the demo page uses to display the React components for the examples.

### How do I add a new example to html-css-examples?

Create a branch starting with feature/, structure the new folder like the existing ones following the latest numbering, then update src/index.js by adding the name and link at the top of the uis array, setting newItem to true and removing newItem from the previous item. Test the result and open a pull request.

### Is html-css-examples only about CSS?

No. Alongside the CSS and SVG animation, shadow, glass, responsive, type-writer, 3D and canvas examples, the repository also contains demos for the Fetch and Drag and Drop APIs, the Clipboard API, URLSearchParams, container queries, multi column layout, scroll snap, aspect ratio, custom scrollbars, irregular grid layout, the built-in dialog element, Web Animations and Web Components.

### Can I use the code from html-css-examples in my own project?

The repository is licensed under MIT, and the manifest names Xuqian Zhang as the author. Contributing to it means agreeing that your code may be used for demonstration in the author's videos, and the repository publishes no GitHub releases, with the last push on 2026-04-09.

## Sources

- [Issues](https://github.com/zxuqian/html-css-examples/issues)
- [License: MIT](https://github.com/zxuqian/html-css-examples/blob/master/LICENSE)
- [Project website](https://zxuqian.github.io/html-css-examples/)
- [README](https://github.com/zxuqian/html-css-examples/blob/master/README.md)
- [zxuqian/html-css-examples on GitHub](https://github.com/zxuqian/html-css-examples)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/zxuqian-html-css-examples