2019年小白入行H5前端学习路书学习路线

于由bobchu发布

2019年H5前端开发岗位依然火爆，很多小伙伴到处请教如何学习前端，大家不用再东奔西走了，接下来就为你们展开2019最新前端学习方法。

跟着Bob学疯狂的JS

如何学习前端

学习前端如同开车，技术是练出的，实际体验比理论更加重要，但目前理论决定思维方式，我们该如何取舍？

前端这个行业的岗位还是有的，只需要你努力学习，但简单的说会前端的三大基础可是很难找到称心如意的工作的。对于技术的学习和研究相当重要，只要你入门-晋级-高级 就轻而易举了。什么意思呢？就是从前端新手到中级研究者再到高级开发者，你的前端工程师的工作牌就会向你招手！

学习方法推荐：

  1. 尽量不要通过阅读纸质书来学习前端，因为行业的技术更新可比书本的出版快了好几倍，你见过今年发表的新技术能在书籍上面看到吗？醒醒吧 看书只能学习基础知识，但如果花太多时间研究那些基础 等于浪费生命。

  2. 多多阅读浏览博客和一些知识分享平台，如知乎，w③cschool。博客园和CSDN和一些优秀的博客网站，里面的作者都是具有扎实的根底和技术的开发者，然后找到前端这一块 内容的数量你是无法想象的。所以可以按照自己的需求和阅读习惯选择相应的博主，实时浏览他的文章和技术风格。知乎是国内计较出名的知识分享平台，里面的用户早已数亿，相对于活跃度，精炼的内容也是非常的多的。

  3. 下载一款适合自己的前端编辑工具，或者学习工具。hbuilder，sublime都可以依个人喜好吧！前端如开车，不实际操作永远不会轻车熟路。这些编辑工具目前都算比较完善了，可以自己研究！

  4. 现在网络发展的比加快，速率提高了很多倍，可以观看视频教程来学习前端，扣丁学堂、腾讯课堂等很多地方都有视频，如果你留心 你甚至可以免费观看到大量前端教学视频！百度最懂你！

前端技术大盘点，按照这个步骤学肯定没错

这是Bob老师给大家总结的今年前端就业岗位必会的技术清单，非常详细，但是大家不要着急，按照这个课程学习6个月左右，你一定可以进入一家非常不错的公司，并且可以拿到1万以上的薪水。

上图学习路线

H5前端学习路线图

学习路线图领取

扫描二维码。微信

第一阶段：HTML基础，7天

  1. HTML概念，作用及五大流行浏览器

  2. HTML的基本组成单位-常用标签精讲

  3. HTML,CSS 和JavaScript三者的关系

  4. 完成常见HTML网页结构

第二阶段：css基础及企业项目，7天

  1. CSS样式编写
  2. 精灵图制作

第三阶段：HTML5、CSS3，7天

  1. H5和CSS3新特性
  2. 媒体查询，响应式布局
  3. 手机移动端布局
  4. H5/CSS3动画效果2D、3D

第四阶段：JavaScript基础+高级编程，30天

  1. JS基础语法学习
  2. BOM和DOM操作

  3. JS事件编程

  4. 面向对象编程

  5. 高级程序设计

  6. 设计模式

  7. jQuery操作与高级实战

  8. Gulp与Sass

  9. 版本控制系统，git和svn

  10. RequireJS模块化

  11. Ajax和Promise

  12. 垃圾回收机制

  13. js预编译

  14. cookie和本地存储

  15. PC网站开发：锤子手机商城全栈开发

第五阶段：全栈开发，PHP、NodeJS、数据库，30天

  1. PHP入门与使用

  2. mysql基础入门

  3. NodeJS编程

  4. MongoDB

  5. 服务器端接口编写

  6. Express+EJS基础

  7. Koa入门

  8. Socket.io与网络原理

第六阶段：Vue2.0及实战，7天

  1. Vue基础

  2. 路由（vue-router）

  3. pc：element-ui

  4. mobile:mint-ui

  5. Vuex

  6. webpack

  7. vue-cli

  8. axios

  9. 项目优化流程

  • 利用create-react-app生成一个项目模板
  • 安装需要的依赖
  • 抽离配置文件，进行一些sass等环境的配置
  • 重新配置项目结构
  • 简单的构建路由
  • 无限加载的技术
  • antd-mobile组件库对项目进行优化，
  • 实现了购物车！
  • 支付
  • router与redux的使用

第七阶段：React及实战，15天

  1. react

  2. redux

  3. React-router

  4. React-Native框架介绍与环境搭建

第八阶段：微信（公众号+小程序），15天

  1. 微信公众号初探

  2. 微信小程序

  3. 小程序WePY框架

第九阶段：职业素养训练，3天

  1. 第一阶段
  • 职业素养课1：目标确认及行业分析
  1. 第二阶段
  • 职业素养课2：就业方向及企业类型
  1. 第三阶段
  • 职业素养课3：企业需求及情商提升
  1. 第四阶段
  • 职业素养课4：就业心态及求职礼仪
  • 职业素养课5：试用期及程序员进阶
  • 职业素养课6：项目立项指导

第十阶段：面试，月薪过万，7天

  1. 准备简历
  2. 表达训练
  3. 面试题分析
  4. 准备面试

前端进阶学习指南

对于有了一定基础的小伙伴们，2019进阶课程也要必须多多关注。

语言语法层面

1：ES6
标配各种特性要熟练掌握应用。
ECMAScript 6文档：http://caibaojian.com/es6/
ES6中文手册：https://www.jianshu.com/p/b6c882e59b07
官网：http://www.es6js.com/

2：TypeScript
TypeScript是一种由微软开发的自由和开源的编程语言。学完你肯定会后悔，后悔为啥没有早点学，TypeScript是一个帮你提高代码质量的东西，一定要学习哦。
TypeScript 中文网：https://www.tslang.cn/
TypeScript 入门教程：http://www.runoob.com/w3cnote/getting-started-with-typescript.html

3：Rust
可能在学习 Rust 的过程中会遇到不少困难，它的学习曲线确实比较大，Rust 虽然定位是一门系统语言，但是其实在 Web 领域已经是老熟人了，计划用Rust写点wasm。

4：Dart
对 Flutter 的宿主语言 Dart 进行了一些简单探索，Flutter & Dart 、是跨端的一个方向，但是目前的问题仍然多多。
Dart中文社区：https://www.dart-china.org/

5：WebAssembly
WebAssembly是近年来非常流行并且发展很快的一种语言（实际上我觉得称其为运行机制很合适），WebAssembly 的日益成熟，也带来了很多新奇的玩法儿。
官网：https://webassembly.org/

框架层面：

1：Vue 2.0
Vue 2.0不多说了，花一个月的时间写个小项目练手，并且写一套专题技术博客。
文档：https://cn.vuejs.org/
社区：https://www.vue-js.com/

Vue 3.0
关注 Vue 3.0 的进展；
Vue CLI 3：https://cli.vuejs.org/

2：React
React 并非很差，但我发现它太笨拙，难以掌握，而且有些地方的代码看起来完全没有逻辑性。

React 持续跟踪升级，使用 Hooks 与 Suspense 改造现有项目，使用 Context API 替换项目中的 mobx 状态管理，使用React实现交互式组件的新方法，称为Hooks：https://reactjs.org/docs/hooks-intro.html

React 中文文档：https://react.docschina.org/
社区：http://react-china.org/
菜鸟教程：http://www.runoob.com/react/react-tutorial.html

3：Angular
Angular 的“用过但是不想再用“的比重又大了，可以自行决断是否要学习，了解即可。
中文网：http://www.angularjs.net.cn/

数据层：

1：Redux
Redux 目前用户很多，Redux因其简单易学体积小在短时间内成为最热门的前端架构。但是 React 新的 Hooks等不知道会不会在来年给它带来影响。
Redux 中文文档：https://www.redux.org.cn/

2：GraphQL
GraphQL 和 Apollo 这段时间一直被讨论宣传，调查显示有非常多的人想要学习了解，可以关注下，Graphql + Apollo 学习与实践
http://graphql.cn/
http://graphql.cn/learn/

JS 后端框架：

1：Express
Express 一家独大，基于 Node.js]平台，快速、开放、极简的 Web 开发框架：http://www.expressjs.com.cn/
菜鸟教程：http://www.runoob.com/nodejs/nodejs-express-framework.html

2： Next.js
Next.js 想学的人比较多，提供一些学习资料。
Nextjs中文文档：https://www.jianshu.com/p/8d070e2b39a5
Next.js中文站点 http://nextjs.frontendx.cn
Next.js中文站Github https://github.com/raoenhui/next-site-cn

3：Koa
Koa 在国内的欢迎程度比较高，不妨多看看。
基于 Node.js 平台的下一代 web 开发框架 ：https://koa.bootcss.com/

另外，国内比较知名的 Egg.js 和 Think.js 等可以了解。

4：Egg.js
egg 为企业级框架和应用而生：https://eggjs.org/zh-cn/
快速入门https://eggjs.org/zh-cn/intro/quickstart.html

5：Think.js：
官网：https://thinkjs.org/
文档：https://thinkjs.org/zh-cn/doc/2.2/app_structure.html

测试框架：

使用分布比较匀称，Jest 和 Mocha 比较靠前，
jest 是facebook推出的一款测试框架，集成了 很强大的功能。
但是 Mocha 相比略有下降趋势。
Enzyme 也还可以。
教程：https://www.jianshu.com/p/eaaf07c1b88f

跨端框架：

Electron 和 React Native 排名比较靠前，受到广大开发者的喜爱和追捧。

1：Electron
Electron这个玩意简直是做团队内部工具的利器，也是前端老手秒上手的东西，可以给团队做些玩意了。
使用 JavaScript, HTML 和 CSS 构建跨平台的桌面应用：https://electronjs.org/
Electron 文档：https://electronjs.org/docs
Electron 中文文档：https://www.w3cschool.cn/electronmanual/

2：React Native
React Native中文网
使用JavaScript和React编写原生移动应用：https://reactnative.cn/
当然今年 RN 发展很不顺利，被很多大公司移除掉了，继续关注后续发展。

3：Flutter -跨端解决方案
Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面，前端对于 Flutter 的热忱度之高一度让人有点惊讶，事实上我在 Flutter 社区内见到的客户端开发者远多于前端开发，不过前端对于跨端解决方案确实有着天然的渴求。
Flutter中文网：https://flutterchina.club/

后端编程语言

1：Python
Python有大数据处理、数据分析、人工智能加持，学完 Python，可以上天，一款集入手快、颜值高、内涵丰富、效率高、应用广的编程语言，让Python轻松俘获从业人员的心。
Python 基础教程：http://www.runoob.com/python/python-tutorial.html

2：PHP
PHP 符合预期，PHP是一种通用开源脚本语言。它的语法吸收了 C语言、java语言和Perl语言的特点，使用广泛，主要应用于web领域。
菜鸟教程：http://www.runoob.com/php/php-tutorial.html
教程：http://www.w3school.com.cn/php/index.asp

构建工具：

1：Webpack
Webpack 一家独大，第二是 gulp，第三是 Grunt，后两者应该都在慢慢下降
webpack中文文档 ：https://www.webpackjs.com/

2：gulp
gulp：https://www.gulpjs.com.cn/
Grunt：https://www.gruntjs.net/

3：Grunt
Grunt中文网：https://www.gruntjs.net/

工具库：

Lodash、Moment 以及 jQuery 排名靠前
1：Lodash
Lodash中文网：https://www.lodashjs.com/

2：Moment
Moment中文网：http://momentjs.cn/
Moment 现在一般用 date-fns 代替，函数式而且很轻巧，Moment 体积太大。

浏览器 API：

Service Workers、PWA、Web Components 这三个比较靠前，
知道 Web Components 啥时候才能被大规模使用，反正 Polymer 看数据基本凉透了。

Service Workers：https://developer.mozilla.org/zh-CN/docs/Web/API/Service_Worker_API
Web Components：https://developer.mozilla.org/zh-CN/docs/Web/Web_Components

PWA: 持续关注，不过这玩意其实真的很简单很简单，只要学会 Service Worker + Cache API 就算掌握了 80% 了，需要的时候再学也来得及。

微信小程序:

随着各种方案（mpvue 、Taro等等）出现，也变得越来越成熟了。
1：mpvue
mpvue官方文档：http://mpvue.com/mpvue/

2：Taro
Taro 是一套遵循 React语法规范的 多端开发 解决方案
Taro文档：https://taro.aotu.io/

其他热点技术

1：Vuex
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
文档：https://vuex.vuejs.org/zh/

2：rxjs
RxJS是一个异步编程的库，同时它通过observable序列来实现基于事件的编程
中文文档：https://cn.rx.js.org/

3：Docker
Docker 是一个开源的应用容器引擎，让开发者可以打包他们的应用以及依赖包到一个可移植的容器中。

4：Deno
运行时：Deno：返回deno社区继续参与deno

5：Lavas
基于 Vue.js 的 PWA 解决方案：https://lavas.baidu.com/

关注更多前端课程，关注JS学习，跟着Bob学习疯狂的JS教程，持续关注。

疯狂的jS

分类： 大前端

发表评论

邮箱地址不会被公开。 必填项已用*标注

相关文章

大前端

跟Bob学疯狂的JS快闪预告片来了

关于课程内容大纲查看思维导图 实时课程内容更新，更多更新资源持续关注B 阅读更多…

大前端

教你写一个ajax封装函数

代码封装示例 /* 封装ajax函数 * @param {string 阅读更多…

大前端

事件循环 event loop & nodejs

我还没想好写点啥，你觉得呢？