如何零基础当前端程序员

‘壹’ 零基础如何学习前端

零基础学习前端的话，自学和培训两条路。

自主学习成本相对来说较低，可以从网上找到相关的书籍、视频进行学习。锻炼自己，能从生活总锻炼自己自主的能力、控制力、协调力，对自身有一个很大的提高。学习内容会很深刻，自己一步一步学来的，很多知识会牢牢记住在脑海中。

自学的话，你需要注意以下几点：

1、兴趣动力

俗话说得好，兴趣是最好的老师。不管是零基础还是有经验，想要学习某样知识就需要对它产生兴趣，带着探索求知的心态去接触、了解并学习它，会使自己更加容易接受新知识，而不是为了完成任务似的机械性学习，枯燥无味，重复内容，这样只会让自己对学习内容产生抵触和厌烦的心理。

2、学习规划

学习前端，资料必不可少，闲暇之余上网查查一些相关的前端书籍和视频教程都可以，两者结合着看。书籍补充基本知识，打好基础才是关键；视频教程提升技能操作度，让自己熟练掌握知识，可以看自己的实际情况决定。

其次，不管你是学生还是上班族，想要学好某样技能就必须安排好学习它的时间，做好两全其美的准备，不要拆了东墙补西墙，最后只会两败俱伤，得不偿失。

3、坚持与指导

很多人刚开始都是信心满满豪情万丈的学习前端，但是过不了多久就都蔫了，临阵脱逃了，为什么？是学习内容枯燥无味还是知识越学越难学不下去？都不是，是你自己没有坚持学下去的勇气罢了；我可以告诉你，科技在进步，学习内容也会越来越多，难易程度也会随之提升，不仅实现在难，将来会更难，坚持不下去，那你就趁早放弃，别浪费时间和精力。

还有一点，你需要一位指引人，单单靠自己是学不下去的，尤其是小白。学习过程中会有很多问题，如果你没有一位帮助你解决问题的老师，只会死磕答案的话，不仅得不到对的答案，也走不了多远，只会半途而废。好的老师不仅学习上可以帮助你，还会在生活、心理上帮助你，为你排忧解难。

自学方法

1、作为一个初学者，你必须明确系统的学习方案，我建议一定有一个指导的人，全靠自己学，放弃的几率非常大，在你对于web前端还没有任何概念的时候，需要一个人领进门，之后就都靠自己钻研，第一步就是确定web前端都需要哪些内容，并且在多少时间内学完，建议时间6个月保底。

2、视频为主，书为辅。很多初学者在学习前端的时候非常喜欢去买书，但是最后的结果是什么？看来看去什么都不会写，所以在这里给大家提醒，书可以看，但是是在建立于你已经对于某个知识点有了具体操作的执行后，在用书去巩固概念，这样更加利于你对于知识的理解。

3、对于学习技术来讲，掌握一个学习方法是非常重要的，其实对于学习web前端来讲，学习方法确实很多都是相通的，一旦学习方法不对，可能就会造成“方法不对，努力白费”。其实关于这方面还是很多的，我就简单说个例子，有的人边听课边跟着敲代码，这样就不对，听课的时候就专心听，做题的时候就专心做题，这都是过来人的经验，一定要听。根据每个人的不同，可能学习方法也会有所出路，找到适合你自己的学习法方法是学习的前提。

4、不建议自己一个人瞎学，在我了解学习编程的这些人来看，从零基础开始学并且最后成功做这份工作的其实并没有几个，我觉得大部分原因就是因为他们都不了解web前端是干什么的，学什么的，就盲目的买书看，到处找视频看，最后看着看着就放弃了，所以我建议初学者在没有具体概念之前，还是找有经验的人请教一下，聊过之后你就会知道web前端具体是干什么的，该怎么学，这是我个人的小建议，可以不采纳。

学前端的话，书籍是必不可少的：

1、《JavaScript高级程序设计(第3版) 红皮书 》，适合有一定编程经验的Web应用开发人员阅读，也可作为高校及社会实用技术培训相关专业课程的教材。

2、《JavaScript权威指南(第6版)》 犀牛书，本书不仅适合初学者系统学习，也适合有经验的 JavaScript 开发者随手翻阅。

3、《JavaScript DOM编程艺术 (第2版)》，本书在简洁明快地讲述JavaScript和DOM的基本知识之后，通过几个实例演示了专业水准的网页开发技术，透彻阐述了平稳退化等一批至关重要的 JavaScript编程原则和最佳实践，并全面探讨了HTML5以及jQuery等JavaScript库。

4、《CSS权威指南(第三版)》，不管你是一个有经验的Web开发人员还是一个彻底的初学者，《CSS权威指南(第3版)》都是你的CSS学习源泉。

5、《JavaScript设计模式》，适合JavaScript初学者、前端设计者、JavaScript程序员学习，也可以作为大专院校相关专业师生的学习用书，以及培训学校的教材。

6、《你不知道的JavaScript(上中下卷) 》，本书既适合JavaScript语言初学者了解其精髓，又适合经验丰富的JavaScript开发人员深入学习。

7、《Vue.js权威指南》，该书内容全面，讲解细致，实例丰富，适用于各层次的开发者。

学习路线：

第1阶段：前端页面重构(4周)

内容包含了：(PC端网站布局项目、HTML5+CSS3基础项目、WebApp页面布局项目)

第2阶段：JavaScript高级程序设计(5周)

内容包含：(原生JavaScript交互功能开发项目、面向对象进阶与ES5/ES6应用项目、JavaScript工具库自主研发项目)

第3阶段：PC端全栈项目开发(3周)

内容包含：(jQuery经典交互特效开发、HTTP协议、Ajax进阶与PHP/JAVA开发项目、前端工程化与模块化应用项目、PC端网站开发项目、PC端管理信息系统前端开发项目)

第4阶段：移动端项目开发(6周)

内容包含：(Touch端项目、微信场景项目、应用Angular+Ionic开发WebApp项目、应用Vue.js开发WebApp项目、应用React.js开发WebApp项目)

第5阶段：混合(Hybrid,ReactNative)开发(1周)

内容包含：(微信小程序开发、ReactNative、各类混合应用开发)

第6阶段：NodeJS全栈开发(1周)

内容包括：(WebApp后端系统开发、一、NodeJS基础与NodeJS核心模块二、Express三、noSQL数据库)

如果你资金允许，选择培训班，这几点你可以参考一下：

1、是否最懂前端

为什么要看重培训机构这一点呢?因为前端是一门衔接UI和后台开发的职位，这个机构只有同时懂前端设计和后台开发才能做出最全面、最专业的前端课程，我们才能学到高性价比的web前端课程。

2、web课程设置是否等于企业招聘要求

选择培训机构的时候要看该机构是否包含了全面的web系列课程，企业需求的技能是否在课程中都有相关的内容。另外，我们除了要看培训机构教不教这些内容，还要看培训机构的在这些技术领域是否专业，web前端工程师课程完全专注于前端知识，全面、深入的讲解HTML5、CSS3、Java、JQuery等内容，我们要看培训机构是否能将这些核心知识让我们学到极致。

3、妥善的就业保障

首先，这个培训机构是否有课程体系的保障，能让我们边学边练，并且能够分阶段的让我们学会前端所有的技能。

其次，这个培训机构是否有师资团队保障体系，是否有总监级讲师授课和上项目实战经验课，是否有技术最牛的行业老师，是否有完善的同步教学系统。

参加培训班的话，学习时间花费相对来说，较短。自学时间会长一点，因为自控力什么的都是非常考验的。讲师授课，可以随时请教老师，遇到问题能及时解决，技术提升也会很快。系统的学习web前端知识。一般培训都会有系统的课程，根据课程安排每天的学习，学习的内容很全面；管理严，培训机构管理很严；有伙伴，做起事情来更好，因为小伙伴的相互鼓励，共同探讨，不仅能让你收获一批朋友，还对学习有很大的帮助！

最后，欢迎加入我的前端qq交流群，里面也是一群学前端的小伙伴，我们可以一起学习，互相监督，互相交流学习经验，一起进行项目实践，还有很多学习资料哦~期待你的加入。

‘贰’ 想学前端开发，但不知道怎么学，从哪里入门

你可以参考一下以下的学习路线进行学习：

第1阶段：前端页面重构(4周)

内容包含了：(PC端网站布局项目、HTML5+CSS3基础项目、WebApp页面布局项目)

第2阶段：JavaScript高级程序设计(5周)

内容包含：(原生JavaScript交互功能开发项目、面向对象进阶与ES5/ES6应用项目、JavaScript工具库自主研发项目)

第3阶段：PC端全栈项目开发(3周)

内容包含：(jQuery经典交互特效开发、HTTP协议、Ajax进阶与PHP/JAVA开发项目、前端工程化与模块化应用项目、PC端网站开发项目、PC端管理信息系统前端开发项目)

第4阶段：移动端项目开发(6周)

内容包含：(Touch端项目、微信场景项目、应用Angular+Ionic开发WebApp项目、应用Vue.js开发WebApp项目、应用React.js开发WebApp项目)

第5阶段：混合(Hybrid,ReactNative)开发(1周)

内容包含：(微信小程序开发、ReactNative、各类混合应用开发)

第6阶段：NodeJS全栈开发(1周)

内容包括：(WebApp后端系统开发、一、NodeJS基础与NodeJS核心模块二、Express三、noSQL数据库)

前端书籍

1、《JavaScript高级程序设计(第3版) 红皮书 》，适合有一定编程经验的Web应用开发人员阅读，也可作为高校及社会实用技术培训相关专业课程的教材。

2、《JavaScript权威指南(第6版)》 犀牛书，本书不仅适合初学者系统学习，也适合有经验的 JavaScript 开发者随手翻阅。

3、《JavaScript DOM编程艺术 (第2版)》，本书在简洁明快地讲述JavaScript和DOM的基本知识之后，通过几个实例演示了专业水准的网页开发技术，透彻阐述了平稳退化等一批至关重要的 JavaScript编程原则和最佳实践，并全面探讨了HTML5以及jQuery等JavaScript库。

4、《CSS权威指南(第三版)》，不管你是一个有经验的Web开发人员还是一个彻底的初学者，《CSS权威指南(第3版)》都是你的CSS学习源泉。

5、《JavaScript设计模式》，适合JavaScript初学者、前端设计者、JavaScript程序员学习，也可以作为大专院校相关专业师生的学习用书，以及培训学校的教材。

6、《你不知道的JavaScript(上中下卷) 》，本书既适合JavaScript语言初学者了解其精髓，又适合经验丰富的JavaScript开发人员深入学习。

7、《Vue.js权威指南》，该书内容全面，讲解细致，示例丰富，适用于各层次的开发者。

‘叁’ 如何成为前端工程师需要学哪些东西

第一部分：HTML。HTML是标记语言，也就是经常在代码中看到的<p></p><div></div>。现在有了HTML5，提供了一些新的标签语言，例如<header><nav><article><aside><footer>。这一部分最简单，通常只需要2-3天学习就可以记住。

第二部分：CSS。css控制网页的样式，例如字体颜色、字体大小、行边距等。css是盒模型，分为margin、padding、content和border。css样式众多，学起来需要很长时间，但在实际操作学习更快。学习这一部分，大概需要花费一周时间，以后在实践中边学边用。

第三部分：JavaScript，前端的核心技术。js是一种脚本语言，用于实现网站中各种功能，例如表单提交、播放器等。这一部分学习是没有尽头的，想成为一名初级前端只要学五个月左右的时间，学习function的正确写法即可，逻辑算法需要长时间的研究。

第四部分：HTTP协议。HTTP协议使互联网的基础协议，也是网页开发的必备知识。需要学习的时间不用太长，在学习JavaScript后会很快上手，需要时间大约为一周左右。

第五部分：三大框架，Angular/React/Vue，三种是目前主流框架。Angular全面，项目代码多；Vue轻便，针对性解决问题，拿来就用，开发具有局限性。新手建议从Vue上手，再去了解React和Angular。

‘肆’ 零基础学习前端开发要怎么开始

这里整理了一份web前端学习路线的思维导图，需要掌握和学习的内容如下：

第一阶段：专业核心基础

阶段目标：

1. 熟练掌握HTML5、CSS3、Less、Sass、响应书布局、移动端开发。

2. 熟练运用HTML+CSS特性完成页面布局。

4. 熟练应用CSS3技术，动画、弹性盒模型设计。

5. 熟练完成移动端页面的设计。

6. 熟练运用所学知识仿制任意Web网站。

7. 能综合运用所学知识完成网页设计实战。

知识点：

1、Web前端开发环境，HTML常用标签，表单元素，Table布局，CSS样式表，DIV+CSS布局。熟练运用HTML和CSS样式属性完成页面的布局和美化，能够仿制任意网站的前端页面实现。

2、CSS3选择器、伪类、过渡、变换、动画、字体图标、弹性盒模型、响应式布局、移动端。熟练运用CSS3来开发网页、熟练开发移动端，整理网页开发技巧。

3、预编译css技术：less、sass基础知识、以及插件的运用、BootStrap源码分析。能够熟练使用 less、sass完成项目开发，深入了解BootStrap。

4、使用HTML、CSS、LESS、SASS等技术完成网页项目实战。通过项目掌握第一阶段html、css的内容、完成PC端页面设计和移动端页面设计。

第二阶段：Web后台技术

阶段目标:

1. 了解JavaScript的发展历史、掌握Node环境搭建及npm使用。

2. 熟练掌握JavaScript的基本数据类型和变量的概念。

3. 熟练掌握JavaScript中的运算符使用。

4. 深入理解分支结构语句和循环语句。

5. 熟练使用数组来完成各种练习。

6.熟悉es6的语法、熟练掌握JavaScript面向对象编程。

7.DOM和BOM实战练习和H5新特性和协议的学习。

知识点：

1、软件开发流程、算法、变量、数据类型、分之语句、循环语句、数组和函数。熟练运用JavaScript的知识完成各种练习。

2、JavaScript面向对象基础、异常处理机制、常见对象api，js的兼容性、ES6新特性。熟练掌握JavaScript面向对象的开发以及掌握es6中的重要内容。

3、BOM操作和DOM操作。熟练使用BOM的各种对象、熟练操作DOM的对象。

4、h5相关api、canvas、ajax、数据模拟、touch事件、mockjs。熟练使用所学知识来完成网站项目开发。

第三阶段：数据库和框架实战

阶段目标：

1. 综合运用Web前端技术进行页面布局与美化。

2. 综合运用Web前端开发框架进行Web系统开发。

3. 熟练掌握Mysql、Mongodb数据库的发开。

4. 熟练掌握vue.js、webpack、elementui等前端框技术。

5. 熟练运用Node.js开发后台应用程序。

6. 对Restful，Ajax，JSON，开发过程有深入的理解,掌握git的基本技能。

知识点：

1、数据库知识，范式，MySQL配置，命令，建库建表，数据的增删改查，mongodb数据库。深入理解数据库管理系统通用知识及MySQL数据库的使用与管理，为Node.js后台开发打下坚实基础。

2、模块系统，函数，路由，全局对象，文件系统，请求处理，Web模块，Express框架，MySQL数据库处理，RestfulAPI，文件上传等。熟练运用Node.js运行环境和后台开发框架完成Web系统的后台开发。

3、vue的组件、生命周期、路由、组件、前端工程化、webpack、elementui框架。Vue.js框架的基本使用有清晰的理解，能够运用Vue.js完成基础前端开发、熟练运用Vue.js框架的高级功能完成Web前端开发和组件开发，对MVVM模式有深刻理解。

4、需求分析，数据库设计，后台开发，使用vue、node完成pc和移动端整站开发。于Node.js+Vue.js+Webpack+Mysql+Mongodb+Git，实现整站项目完整功能并上线发布。

第四阶段：移动端和微信实战

阶段目标：

1.熟练掌握React.js框架，熟练使用React.js完成开发。

2.掌握移动端开发原理，理解原生开发和混合开发。

3.熟练使用react-native和Flutter框架完成移动端开发。

4.掌握微信小程序以及了解支付宝小程序的开发。

5.完成大型电商项目开发。

知识点：

1、React面向组件编程、表单数据、组件通信、监听、生命周期、路由、Rex基本概念。练使用react完成项目开发、掌握Rex中的异步解决方案Saga。

2、react-native、开发工具、视图与渲染、api操作、Flutter环境搭建、路由、ListView组件、网络请求、打包。练掌握react-native和Flutter框架，并分别使用react-native和Flutter分别能开发移动端项目。

3、微信小程序基本介绍、开发工具、视图与渲染、api操作、支付宝小程序的入门和api学习。掌握微信小程序开发了解支付宝小程序。

4、大型购物网站实战，整个项目前后端分离开发；整个项目分为四部分：PC端网页、移动端APP、小程序、后台管理。团队协作开发，使用git进行版本控制。目期间可以扩展Three.js 、TypeScript。

这已经是一套非常完备的Java学习路线了，零基础学习Java完全自学的话还是比较吃力的，建议还是找专业的机构系统学一下，可以点 击 头 像 了解一下。