参考：

• 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