# Projects

参考：

- <https://web.stanford.edu/class/cs142/projects.html>
- <https://50projects50days.com/>
- <https://github.com/practical-tutorials/project-based-learning#html-and-css>
- <https://github.com/codecrafters-io/build-your-own-x#build-your-own-front-end-framework--library>
- <https://github.com/codecrafters-io/build-your-own-x#build-your-own-web-server>

---

可做的列表

- 一个月-日历
- 一个网页-展示已经灭绝的动植物
  - <https://en.wikipedia.org/wiki/Lists_of_extinct_species>

1. 将辰东的《完美世界》、《遮天》、《圣墟》三本小说，做成一个在线阅读版本(类似 <https://weiyinfu.cn/Reader/index.html#/> )
2. 展示自己看过的音乐剧 HTML,CSS,JS
3. 杭州地图
4. 在线音乐播放器
5. IMDB 电影列表
6. 你难道就不好奇，日常上网所使用的种种高阶功能，背后的原理吗？
7. 为什么它（canvas）保存下来是个空白？（[src](https://github.com/tianheg/whatamesh/blob/eb89aedc65b66add699456ecc49b4ce56111b756/src/components/editor.vue)）https://whatamesh-tianheg.vercel.app/

- clone popular websites with HTML, CSS || like Youtube, Google, Twitter, [Apple](https://web.archive.org/web/20220805144541/https://www.apple.com/)
- 阅读英文文章时，注意力一发散就忘记读到哪里了，希望有一个CSS效果，可以把已读过的部分的字体的颜色变淡，突出显示已读过和未读过边界的字体的颜色。 通过光标点击，确定锚点（已读和未读的分界）的位置。
- HackerNews
  - <https://github.com/rbew/hacker-news-vue3>
  - <https://hackernews-pwa.netlify.app/> || <https://github.com/bahdcoder/hacker-news-pwa>
  - <https://hn.nuxtjs.org> || <https://github.com/nuxt/hackernews>
- 用 CSS 画《机器人总动员》里的 Wall-e 和 Eva
- 紫罗兰永恒花园外传-43:27 时刻的日语颜色变化，用 background: linear-gradient + radial-gradient 表达出来
- 演示各种 HTTP status code 含义
- 需要的 CSS 相关的趁手的工具
  - 寻找对比色 <https://colourcontrast.cc/> ， <https://app.contrast-finder.org/result.html>
- 想通过 ✅ 标记每一天，但是不想通过 HTML,CSS,JS 而是通过 API,也就是一个链接就是一个表示一个月那一天完成任务的图片，就像 <https://img.shields.io/endpoint?url=https://cloudflare-pages-badges.tianheg.workers.dev/?projectName=csszengarden>
- 3d-multi-player-game-using-threejs-and-socketio


相关：[[product|product]]