前端开发工程师从入门到精通学习过程及资源总结（持续更新中）

Posted 2020-11-19 phoebeyue

职位名称：前端开发工程师

学习概要：1、先了解基础，html/css/javascript是基础。html/css就是做静态页面的，javascript是做动态的。

2、学习框架：jQuery（基于DOM的，必学），Vue(基于数据的，目前比较流行的框架)

一、编辑工具

用sublime text3，下一个安装就行了。如果想用的更加方便，可以百度一下常用的插件，安装几个最常用的就够了。

二、HTML/CSS

1、先看慕课网的基础教程：HTML+CSS基础课程（非常适合零基础入门）

其他教学视频：极客学园（需要会员，我没有看）、网易云课堂从零玩转HTML5前端+跨平台开发（免费）

我看的网易云课堂的视频，基础比较全面，讲解的也详细。因为先学的慕课网，这个视频我是跳着看的。 

2、学习CSS布局

学习完上面的课程可以自己做静态网页了，不过免费课程里面对新增的flex布局讲解的比较少，基本是一带而过，学习flex布局可以看阮一峰的博客。个人感觉flex布局非常实用，像淘宝网的九宫格图片（店铺装修里面一行显示几件商品）、移动端等，使用flex布局非常方便。

3、文字笔记类知识：菜鸟教程，w3school

html/css知识点非常多，全部记的清清楚楚不太可行，有个印象之后，把这两个网站当成字典，需要的时候翻一翻。

三、javascript

1、先看智能社的视频教程：JavaScript从入门到精通 （个人觉得这个视频讲的最好，但基础不够全面）、从零玩转JavaScript全栈开发（这个视频基础很全面）

2、js基础学习之后可以做点小游戏，我参考下面的实战视频中的小蜜蜂游戏做了一个气球射击游戏。

网易云课堂的实战视频教程：HTML5前端开发实战

四、jQuery框架

1、网易云视频教程：从零玩转jQuery原理和Ajax

2、做点游戏练习一下，我做了狂拍灰太狼游戏。上面的实战视频里的英雄难过棍子关游戏就是用的jQuery。

五、vue框架

 

六、技术交流社区

1、博客园：

推荐博客：古兰精 ，bergw

2、CSDN：

推荐博客：阮一峰的博客