50个前端练手项目 ​

练手项目来源于 Github 的项目 50projects50days。

练习流程 ​

1. 分析： 查看项目的 Live Demo 并进行分析
2. 实现： 根据分析结果尝试实现
3. 阅读： 在尝试实现后，查看源码
4. 对比： 对比源码实现与我的尝试
5. 总结： 总结学到的、用到的技术

练习工具 ​

• CodePen

  因为这些项目都是简单的小项目，简单的一份 html + css + js 就可以完成，故使用在线编辑来完成练习，也方便以后查看。

  练习合集：CodePen Collection

• github.dev

  github.dev 编辑器引入了完全在浏览器中运行的轻量级编辑体验。

  通过在源码页面点击 . 键进入 github.dev，用这个基于 web 的编辑器来查看源码，可以同时查看 html + css + js，省去了来回切换的麻烦。

• Lorem Picsum

  占位图片网站，在练习过程中很多需要图片的地方可以用这个网站快捷的生成。例如：

  随机一个宽高为 200x300 的图片：
  https://picsum.photos/200/300
  
  指定 237 号图片，宽高为 200x300：
  https://picsum.photos/id/237/200/300

  随机一个宽高为 200x300 的图片：
  https://picsum.photos/200/300
  
  指定 237 号图片，宽高为 200x300：
  https://picsum.photos/id/237/200/300

• MDN - web docs

  知名网站，练习过程中会频繁在这里查询各种语法。