一、职业方向定位
首先，只有确定好自己的职业方向，才能做好职业规划。在我看来，做Web前端技术能够找到的职业方向有以下几种：
（1）资深Web前端工程师
这个方向算是一个Web前端最基本的选择了，在国外，很多老外都能够把自己的专业做到极致，能一辈子就在一个专业领域不断学习和积累。主要在于内因和外因两方面，内因是老外通常思想比较简单直接，容易一直专注于一个领域；外因是国外的环境很好，能够良好的支撑这样的职业发展道路。
反观国内，从内因来讲，WEB前端技术人员还是蛮浮躁的，通常会因为Web前端知识的更新速度太快而觉得学习起来辛苦，最终转向后台或其他道路。
从外因来讲，Web前端人员没有获得公平的待遇，可能从HTML页面制作就开始并沿袭下来的，从来WEB前端人员都比后端人员低一等，貌似前端就是“浅显”的代名词、后端就是“深奥”的代名词，这也直接造就了前端人员的收入无法和后端人员媲美，同时直接影响到前端人才市场的活跃程度。另一方面，前端的技术入门较容易，造成另一个极端情况：人员泛滥、人才稀缺。
我想对所有的WEB前端工程师说：面包总会有的，要耐得住寂寞！我个人比较推荐这个职业发展方向，因为，在这个方向下，只要足够耐心、厚积薄发，成功的概率是非常高的。同时，这是一条最单纯的路，我们更多的是花费精力在技术的钻研上，而不是办公室政治等其它琐事。
（2）资深Web架构
说功利点儿，我喜欢这个方向，既兼顾了工作的单纯性、又能够减少实际Coding的工作量能腾出更多时间钻研技术。
在国内，Web前端工程师遇到较多的情况是总是反复编写着同样的代码，总是面对着同样的技术和产品，容易感觉枯燥。由于我们拥有最为广泛的Web相关知识沉淀，使得我们更加容易成为一名架构师。
这个职业发展方向不如第一种来得平滑，主要是作为一名架构师不得不学习：后端技术、DBA、Platform等内容，而这种学习通常需要实际操刀做项目，不是自己在家里写两个Demo就好的，这就势必会遭遇一段时间的阵痛期。
虽然不是很平滑，但是，对于一个大局观好、悟性好、知识面广的前端工程师，我推荐你们努把力，走一条光荣的架构师之路吧。
（3）自己创业
其实，自己创业是最好的道路、也是成功率最低的道路，挑战和机遇并存。这里，作为一个前端技术人员，需要将自己的视野更多放在行业的动态、产业链的动态、 相关产品领域的动态，把关注细节的优势继续保持，同时，增强自己把控一个产品乃至一个公司命运的能力。但是，这条道路和技术之路稍有分歧，后续将不再赘 述。
（4）转岗管理或其他
由于这条职业道路和Web前端技术之路关系不大，故而，这里不做过多讨论，但是，无论是否走上这条道路，我觉得对于任何技术之路，更好的大局观、更广泛的 视野是良好发展的必备条件，拥有良好的大局观和更广泛的视野别无他法，只能不断的进行知识的横向拓展和积累，同时，多在横向拓展知识的时候进行实践，把知识变成技能。
二、职业发展目标
我们都有一个最终的目标，在这个目标之上，我们需要给自己制定一系列学习和成长计划，制定的方法如下：
第一、梳理知识架构；
梳理知识架构的目的在于，我们要了解清楚，哪些技术是前置、哪些技术是后继，那些技术是深度、哪些技术是广度，按照这两个维度梳理好知识架构之后，我们才能准确地制定清晰的成长目标、高效的成长计划。
第二、如何做；
我认为，大抵可分解以下几个点：
1、基本知识的掌握
在我们梳理的知识架构中，按照我们分析的两个维度里最前置的、最浅显的部分，作为打基础的阶段，必须要在这个过程中更多投入到实践中去，我们通常做的多了、熟练了，就认为这部分知识和内容掌握了。
2、常用工具的掌握
对于常用工具的掌握应该掌握一些有大公司或专业团队背景的流行工具，这些工具的熟练掌握能够提升专业度、职业度，同时，能提升我们的工作效率。我们只有在检验自己对于知识和技能熟练程度的时候，才会自虐式的用Notepad去编写页面、css和脚本等内容。
3、沟通技巧的掌握
通常做技术的人会被定位为“不善沟通”的人，这是为什么呢？究其原因，主要是因为多跟程序和代码打交道，跟人的沟通较少导致。这种时候我们要特别注意增加
和人沟通的机会，着重提升这块儿的能力。另一方面，我们通常被称为“不懂沟通技巧”的人。作为一个技术人员，包括我自己，似乎天生就有一些难以接受挑战的缺陷。在国内，我们的技术人员通常都是自己制定方案、自己执行方案，在执行过程中又缺乏相关产品、交互设计等人员的沟通，大多是在自己的思路贯彻下进行开发，久而久之，我们习惯于信任自己的观点、在自己的视角看问题，对于挑战总是百般地“据理”力争。我们需要更多提升的是，如何在对方的视角看问题、如何在用户的视角看问题。
4、良好的开发习惯
开发习惯是养成的，一旦有不好的习惯，对于将来去修正带来的将是很大的麻烦，我们在培养良好开发习惯一定要从起步时做起，例如：写代码之前先分析、先写文 档、先写注释。定义变量最好能用直接可理解的语义，最好是拼音，别整英文，尤其是生僻单词，将来自己忘了还要开金山词霸。文件最好有有意义的文件夹命名来管理，文件名最好有意义，需要版本号的最好能和项目版本号一同更新……等等。
最后，前端技术每年都会不断更新，自学前端技术显得尤为重要，对于一些想要入行前端的朋友，建议学习下面这两套前端课程，这两套前端课程详细的规划了入门前端的学习路线，非常适合新手学习：
第一个月、HTML+CSS
第1周安排：
是了解前端入门的对不，要学会IDE插件安装和使用，掌握H5语法和基础标签的应用，学完本周可以进行简单的页面搭建。
- 1、了解前端行业发展
- 2、了解HTML5对于网页的意义
- 3、学习常用标签/属性，进行结构搭建
- 4、掌握无序列表/有序列表/自定义列表
- 5、学习表单标签/属性，能创建常见表单结构
- 6、掌握标签嵌套规则/行内元素/块元素的使用
- 7、学习VSCode开发工具使用，能创建简单网页
学习资源：
笔记：
第2周安排：
CSS3是网页的"美容师"，本周开始学习CSS3样式，掌握语法结构、选择器、盒子模型、文本和字体样式设置，能够对网页进行简单的样式开发。
- 1、掌握CSS3的基本语法和使用
- 2、掌握CSS3各类型选择器/样式属性，进行快速开发
- 3、学习文本、字体等常见属性
- 4、盒子模型核心知识讲解，深入理解原理
- 5、掌握行内元素和块级元素设置与转换
学习资源：
笔记：
第3周安排：
简单的样式开发还不够，通过掌握浮动、定位、边框、背景样式以及2D&3D转换，以及布局技巧。能够进行特殊图形绘制，开发更美观的网页效果。
- 1、浮动与定位核心知识，灵活运用实现网页布局
- 2、常见布局方法，解决布局常见问题
- 3、如何绘制圆角边框/阴影框/图片边框等特殊图形
- 4、掌握元素扭曲/移位/旋转，更自由的装饰HTML
- 5、BFC规范和浏览器差异
第4周安排：
CSS3也能实现炫酷的网页动态效果，结合企业级上线“旅游网”项目，综合运用前面所学的知识，完成穷游首页排版布局和CSS3动画特效开发。
- 1、大项目：结合H5/CSS3，完成PC小兔仙首页布局开发
- 2、掌握不同布局结构与技巧
- 3、掌握过渡的使用与缓动效果，实现常见小案例
- 4、运用动画效果，实现炫酷动画效果
第一个月课程表汇总：
https://link.zhihu.com/?target=https%3A//www.bilibili.com/video/BV1cf4y1j7hL/
一个月详细的课程表，结合思维导图时间安排学习！
| 课程目录 | 详情 |
|---|---|
| HTML认知 | 1. HTML的基本语法 2. HTML的排版标签3. 绝对路径和相对路径4. HTML的多媒体标签5. HTML的链接标签6. 案例：招聘案例、今日热词案例 |
| HTML基础 | 1. HTML的列表标签 2. HTML的表格标签3. HTML的表单系列标签4. HTML的语义化布局标签 5. HTML的字符实体6.案例：学生信息表格案例、会员注册表单案例 |
| CSS基础选择器+字体文本样式 | 1. CSS的引入方式 2. CSS的标签、类、ID、通配符选择器3. CSS的字体相关样式4. CSS的文本相关样式5. CSS的水平居中技巧6. Chrome调试工具的使用7. 案例：新闻网页案例、卡片居中案例 |
| CSS选择器进阶+背景相关属性+元素显示模式+三大特性 | 1. CSS的后代、子代、并集、交集选择器 2. emmet基本语法3. hover伪类选择器4. CSS的背景相关属性5. 三种常见的元素显示模式6. CSS三大特性：继承性7. CSS三大特性：层叠性8. 案例：五彩导航案例 |
| CSS盒子模型 | 1. CSS三大特性：优先级 2. CSS的权重叠加计算方法3. 盒子模型的组成部分4. 盒子模型的边框、内边距、外边距的作用和代码实现5. 外边距折叠现象6. 案例：新浪导航案例、网页新闻列表案例 |
| CSS浮动 | 1. CSS的结构伪类选择器 2. 伪元素的基本使用3. 标准流的排布规则4. 浮动的特点和使用5. 清除浮动的常见方法6. 案例：小米布局案例、网页导航案例 |
| CSS定位+装饰 | 1. 定位的特点和使用 2. 垂直对齐方式3. 边框圆角完成正圆和胶囊按钮效果4. 元素显示隐藏切换效果5. CSS完成三角形效果6. CSS的链接伪类选择器7. CSS的焦点伪类选择器8. CSS的属性选择器9. 案例：卡片模块hot图标案例、导航二维码居中定位案例 |
| 小兔鲜 项目前置样式+项目搭建 | 1. 精灵图的使用 2. CSS的背景图片大小属性3. 文字和文本阴影效果4. SEO三大标签5. 项目结构搭建和基础公共样式6. 实战：实现 「小兔鲜儿项目」 header模块开发 |
| 小兔鲜 header+footer+主体内容 | 1. 实战：实现 「小兔鲜儿项目」 header模块开发 2. 实战：实现 「小兔鲜儿项目」 网站入口xtx-entry模块开发3. 实战：实现 「小兔鲜儿项目」 新鲜好物面板xtx-new-goods模块开发 |
| CSS3高级 | 1. 平面转换 2. 空间转换3. 动画 |
| Flex布局模型 | 1. Flex布局模型的使用 2. 项目：小兔鲜儿-移动端3. 项目：小兔鲜儿-PC端 |
| 移动端网页适配方案 | 1. Rem基本使用 2. Rem + 媒体查询适配3. Rem + flexible适配4. Rem适配原理5. 项目：游乐园6. vw/vh基本使用7. vw/vh适配原理8. 项目：B站 |
| 响应式 | 1. 媒体查询基本使用 2. 媒体查询实现响应式网页效果3. Bootstrap框架基本使用4. Bootstrap框架栅格系统5. 项目：腾讯全端 |
第二个月、JavaScript
第5周安排
JS是网页编程的第一步，本周开始学习JS编程语言，掌握基础语法结构、变量声明和命名规则、数据类型、表达式和操作符，学完本周内容可以进行简单的JS代码编写。
- 1、掌握JS基本语法使用
- 2、掌握JS变量声明与提升的机理
- 3、掌握JS运算符操作与表达式
- 4、学习基本数据类型和复杂数据类型使用
- 5、深入理解数据类型转换与检测
第6周安排
本周继续深入学习JS编程语言，掌握条件分支语句、循环语句和数组，学完本周内容可以用简洁的代码实现强大功能。
- 1、掌握if，if elseif，switch等条件分支语句使用
- 2、掌握for、while、do while循环语句使用
- 3、掌握数组基本使用和常用方法
- 4、break和continue语句的特点及应用
- 5、运用数组知识，学习基本算法
- 6、使用简单的逻辑实现复杂业务逻辑
第7周安排
如想实现更炫的动态效果，那么操控网页元素很重要，通过掌握函数编程、DOM操作、事件以及BOM对象，让你能实现典型的触发和动态交互效果。
- 1、掌握DOM操作和DOM事件
- 2、掌握函数基础与函数高级应用
- 3、掌握BOM浏览器对象模型，与浏览器“对话”
- 4、掌握函数封装，提升编码质量
第8周安排：
面向对象是开发中非常重要的思想，在本周我们将开始运用面向对象思想进行程序开发，编写高质量代码，解决企业级编程协同问题。
- 1、学习this规则与使用
- 2、掌握构造函数概念以及创建、调用与使用
- 3、理解原型和原型链的关系与运用
- 4、闭包和作用域应用
- 5、熟练使用面向对象思想进行DOM编程
- 6、掌握JS模块化编程方式，编写高质量代码
- 7、掌握模块化开发技巧，解决企业级编程协同问题
- 8、贪吃蛇案例
第9周安排：
第九周可以利用电商项目来完成一个实战开发了，从0到1完成一个具备CSS3动画和JS特效的多特效旅游网页。掌握企业常见的网页开发方式和各类特效实现方案。
上面课程中，我们给出的案例是京东的网站开发；
- 1、结合H5/CSS3/JS，完成PC端课程中首页特效开发
- 2、项目动画效果分析，帮助更快梳理思路
- 3、实现典型JS特效效果：Banner轮播图、返回顶部动画、垂直菜单
- 4、学习正则表达式，完成常见手机号、邮箱、姓名等功能验证
- 5、完成京东网页开发
课程表：
| 阶段 | 详细内容 |
|---|---|
| JavaScript基础语法 | 变量、数据类型、运算符、类型转称、函数、对象、流程控制、数组、Math、内置函数 |
| WebAPI | 宿主环境、节点查找、节点操作、节点关系、事件、事件流、事件委托、间歇函数、高阶函数、伪数组、执行环境、自执行函数、命名空间、排序、延时函数、正则、表单、自定义属性、重绘、回流、预加载、懒夹在、生命周期； |
| JavaScript高级 | 字面量构造函数、单体对象、面向对象、原型、class、getter、setter、柯里化、解构、箭头函数、Object、Array、const、严格模式、闭包 |
第三个月、ES6学习安排
补充一下，模块化知识在上面链接当中的228集开始，大家可以从228集开始看到258集。
第10周安排：
ES6是JavaScript新的语法规范，让代码更规范、可读性高、方便操作。本周将开启ES6的学习，这是学习前端必备的一步。掌握ES6相关知识后，能够更便捷的编写代码，提高开发效率
- 1、ES6基本语法与使用
- 2、掌握ES6中变量和常量的使用与区别
- 3、学习可以嵌入表达式的字符串字面量--模板字符串
- 4、掌握箭头函数的特点与应用
- 5、掌握如何自动解析数组或对象中的值
- 6、掌握参数默认值的使用
- 7、了解对象字面量更加简洁与灵活的表达方式
第11周学习安排
本周将继续学习ES6的基础，通过进一步学习ES6引入的新特性，了解ES6的新方法，掌握新的集合类型，更深入的了解数据的遍历。
- 1、剩余参数与展开运算符的对比进行学习
- 2、了解如何实现减少逻辑或操作符的使用
- 3、认识ES6中新增的数据结构
- 4、了解ES6中新增的方法
- 5、了解遍历原理，以及学习新的循环方式
- 6、了解如何运用ES6 Promise进行异步编程
- 7、掌握Class基本语法的使用
- 8、掌握更加清晰与便捷的对象继承方式、面向对象的高级思想
写到这里不再按照周给大家做规划了，因为学习到这里大家已经输入成功入门前端了。可以自行安排接下来的学习时间了，你只需要接下来我们需要学什么内容即可。
第四个月、前端进阶学习之Ajax
| 本阶段需要学习内容 |
|---|
| Ajax的作用、原生Ajax、同步异步、http协议、ajax封装 |
| git历史、git与svn、git基本使用、分支、远程仓库、git冲突以及解决方案 |
| 项目初始化、前后端分离开发、工具的使用、用户的注册/登录/退出等 |
| ES6简介、新增语法、内置对象扩展等 |
| node.js环境安装、如何使用node.Js运行的代码...具体内容见课程 |
| 静态和动态网站、http模块使用、请求响应原理、HTTP协议、处理页面请求等 |
| MySQL的概念、基本的增删改查等，以及利用Node.js操纵Mysql |
| express的概念、express的安装、后端路由、静态资源托管等； |
| 重点内容 |
|---|
| git基本概念 |
| 安装并且配置 |
| 基本操作 |
| GitHub |
| 远程仓库 |
| SSH访问 |
| 本地分支操作 |
全面系统讲解 Node.js 中最核心的、必知必会的概念，能够基于模块化的开发思想优化项目代码，编写出高效、健壮的代码，同时培养出 Node.js 的编程思维。
| node基础 |
|---|
| 环境配置 |
| fs模块 |
| path模块 |
| hettp模块 |
| 模块化 |
| commonJS |
| 模块的分类 |
| 模块的作用域、成员共享，加载机制 |
接下来要学习数据库的基本使用：
第五个月、热门框架
然后就是热门框架：
| 课程亮点 |
|---|
| 工程化开发，现在市场还是直接引入 vue.js 到 html 页面， 开发中不用这个方式，我们是直接按照工程化的方式进行讲解。 |
| 案例驱动教学，精心设计的 4 大案例，保证每一位学生听得懂、写得出、能实践。 |
| 深入浅出地讲解 Vue2 / Vue3 中的指令、组件、侦听器与计算属性，以及生命周期、数据共享、动态组件、插槽、路由等核心技术点。 |
| 同时，涵盖了 axios 在 Vue 项目中的最佳实践方案；以及 Vant 组件库的主题自定制方案。 |
| 最后一天的 Vue 基础收尾案例，助力学生更加轻松的过渡到 Vue 项目课的学习。 |
Vue 3.0 官方文档(英文) | Vue 3.0 官方文档中文 |
Composition-API手册 | Vuex 4.0 | Vue3 新动态
第六个月、小程序-uni-app
了解小程序开发的一般流程序，熟悉小程基础组件的使用，能够基于 wxml 和 wxss 实现小程序的界面布局，基于模板的数据绑定实现数据的动态渲染，基于 API 实现与服务端的数据通信，以及熟悉其它高级 API 的使用。
6.2 uni-app
理解 uni-app 实现跨平台开发的原理机制，理清单文件组件与原生小程序组件的对应关系，以及 uni-app 开发小程序时开发时与原生小程序的差异。
最后一个月！学习安排
本阶段是深入理解组件化和模块化开发的思想，三大主流框架之一，满足企业招聘中的岗位要求。
TypeScript 基础+高级
面试准备：
面试是通往成功就业的关键一步，本周包含布局基础以及JS和ES6等常见考点和经典面试题分析，带你把知识串成线，掌握前端面试技巧，顺利通关基础技能面试。
- 1、H5语义化/CSS布局/定位/图文样式/响应式面试解题技巧
- 2、原型和原型链的5个原则与面试解题技巧
- 3、变量类型/计算/构造函数的面试解题技巧
- 4、作用域和闭包的执行上下文/this面试解题技巧
- 5、异步和单线程/常见的内置对象面试解题技巧
- 6、DOM本质/节点操作/BOM操作面试解题技巧
- 7、AJAX与事件解面试题技巧
框架、小程序以及全栈相关内容也是面试必考。本周带大家梳理的常见考点和经典面试题分析，理清面试解题方法论，完成最后一厘米的冲刺。
- 1、Vue.js原理/MVVM面试解题技巧
- 2、组件生命周期/父子组件传值面试解题技巧
- 3、组件异步加载/缓存/抽离公共逻辑面试解题技巧
- 4、React基础语法/事件面试解题技巧
- 5、React组件生命周期/父子组件通讯面试解题技巧
- 6、React函数组件与class组件区别面试解题技巧
- 7、Redux/react-router面试解题技巧
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
