项目来源

对GitHub上的开源项目自己来实现一遍。点击查看该开源项目的预览地址

项目介绍

• 前置知识：jQuery、console.log 调试法、CSS 布局、媒体查询
• 新增知识：localStorage、SVG Symbols、iconfont.cn、阻止冒泡、JSON 序列化
• 适用范围：适合所有前端新手
• 项目难度：非常简单，简单到无以复加，大概几个小时就能做出效果
• 项目实用性：非常实用，我已经设置为自己的浏览器首页了
• 项目扩展性：非常容易扩展，你可以用 Vue / React重写这个项目，也可以自行添加各种炫酷的背景图片或动画

技术栈

• jQuery
• LocalStorage
• SVG Symbols
• 媒体查询
• git & GitHub

思路

1.Figma作图

• 没有设计稿绝对不写代码
• Figma是在线制作UI的软件，需要FQ

2.实现手机端

• 写HTML
• 写CSS
• 写JS (事件监听、DOM操作)：用jQuery的on和其他API

3.实现PC端

• 通过媒体查询加CSS
• 写JS (单独处理PC上的逻辑)

4.发布到GitHub

• 一键发布到GitHub
• 注意一定一定要把预览地址放到descr！！！
• 在readme.md里加上开发、运行

细节

• 注意一定一定要把预览地址放到descr！！
• 在readme.md里加上开发、运行
• 把前端常用的工具网站（W3C）就放在快捷键里面，显得你很爱学习很专业

个性化

• 写完基础的之后，可以添加更好看的样式。把网页做得更好看。去找别人的样子看看。
• 开源项目里的所有东西你必须做到，如果可以再继续扩展个性化，会更加分。