HTML CSS Examples

中文版

This repository contains the source code for my videos at Bilibili, 峰华前端工程师

Text in videos and codes are primarily in Chinese, But you can use this repository without knowing Chinese. Just read the critical part.

You can use this repository for inspirations and cheatsheets.

Online Demo： https://zxuqian.github.io/html-css-examples/

Each folder contains the source code of HTML and CSS examples, including:

• CSS/SVG Animation
• Shadows/Glowing/Glass Effects
• Responsive Layout
• Type-Writer Effect
• Face Recognition
• 3D Transformations
• Native Canvas
• and more...

My Personal Homepage

Blog

Bilibili

Or scan the QR code below:

Contributing

Contributing is welcome! Follow these steps to add your examples:

1. Fork this repository
2. Create a new branch, starting with feature/.
3. Structure your project according to the existing ones (note the latest numbering).
4. Run yarn run watch or npm run watch. This will monitor changes in src/index.js and compile it to /index.js, which is used to display React components for the demo page.
5. Update src/index.js. Add your example name and link at the top of the uis array, set newItem to true, and remove the newItem property from the previous item.
6. Test and issue a PR.
7. Please ensure examples are aethetically pleasing.

Notice: By contributing, you agree that your code may be used for demonstration in some of my videos.