前端入门学习路线和资源

一、入门

1. 三剑客 - 最基础也最重要

• html：www.runoob.com/html/html-t…
• css：www.runoob.com/css/css-tut…
• javascript：www.runoob.com/js/js-tutor…

2. 练习：

• 用html语言写一片文章，尽可能用到更多的语义化标签
• CSS练习，画出下面的网页
• 前端入门练习demo【此教程由易到难，从画基础页面到设计模式写小游戏，非常适合入门练习，可以挑着做】百度前端技术学院 - 练习题
• js最重要，练习到一定程度可以看这本入门书巩固基础：JavaScript DOM编程艺术 （第2版）
• 提高书籍【可以延后看】：JavaScript高级程序设计（第4版）

3. 框架

选一个，推荐开始选vue入门简单

• vue：
• • 菜鸟教程：www.runoob.com/vue2/vue-tu…
  • 官网文档：cn.vuejs.org/v2/guide/in…
  • ui组件库：antdv.com/docs/vue/in…
• react：
• • 菜鸟教程：www.runoob.com/react/react…
  • 官网文档：zh-hans.reactjs.org/docs/gettin…
  • ui组件库：ant.design/docs/react/…

4. nodejs

这年也得会点后端【可以放在做项目的时候再学】

• nodejs：www.runoob.com/nodejs/node…
• express：www.runoob.com/nodejs/node…
• koa：chenshenhai.github.io/koa2-note/n…

二、提高

提高可以靠大量项目练习 【这里假设已经完成上述入门】

1. 推荐技术栈

• 前端vue + antd + 百度Echarts图表
• 后端nodejs + koa + mongodb【也可以换其他后端语言和数据库】

2. 试炼项目

• 后台数据管理系统
• • 前端菜单、表格、表单、图表、权限管理
  • 后端数据库增删改查CRUD
• 模仿掘金juejin.cn
• 网易云音乐移动端网页版
• 淘宝商城

三、拓展

typescript：ts.xcatliu.com/

electron：用前端去写客户端

native：react、vue写移动端应用

Flutter：跨端解决方案