零基础如何学习前端？

Posted 2023-04-05

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

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

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

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交流群，里面也是一群学前端的小伙伴，我们可以一起学习，互相监督，互相交流学习经验，一起进行项目实践，还有很多学习资料哦~期待你的加入。

参考技术A

前端前景是很不错的，像前端这样的专业还是一线城市比较好，师资力量跟得上、就业的薪资也是可观的，学习前端可以按照路线图的顺序，

0基础学习前端是没有问题的，关键是找到靠谱的前端培训机构，你可以深度了解机构的口碑情况，问问周围知道这家机构的人，除了口碑再了解机构的以下几方面：

1. 师资力量雄厚

要想有1+1>2的实际效果，很关键的一点是师资队伍，你接下来无论是找个工作还是工作中出任哪些的人物角色，都越来越爱你本身的技术专业前端技术性，也许的技术专业前端技术性则绝大多数来自你的技术专业前端教师，一个好的前端培训机构必须具备雄厚的师资力量。

2. 就业保障完善

实现1+1>2效果的关键在于能够为你提供良好的发展平台，即能够为你提供良好的就业保障，让学员能够学到实在实在的知识，并向前端学员提供一对一的就业指导，确保学员找到自己的心理工作。

3. 学费性价比高

一个好的前端培训机构肯定能给你带来1+1>2的效果，如果你在一个由专业的前端教师领导并由前端培训机构自己提供的平台上工作，你将获得比以往更多的投资。

希望你早日学有所成。

参考技术B

零基础学前端和有基础学前端是区别是什么？并没有什么区别，有基础的人也有可能因为自认为知道很多知识反而学习带偏。就像学车一样，什么都不懂直接按教练的学就行了。

所以零基础怎么学前端本身不是什么问题，只要有恒心学习就行了。

最全前端知识体系 一篇文章搞懂前端学习方法与构建知识体系

学习路线

主要是要有明确的学习路线，因为什么都不懂，要做以下准备：

1、前端是做什么的？前端可以做什么；

2、前端的发展路线，未来趋势；

3、了解大多数公司招聘对前端的要求；技能知识点；

4、根据以上知识制定自己的学习目录；

最新全套前端学习路线图

学习方式

明确学习路线后，还是要有自己的学习方式，根据自己的学习爱好，规划学习方式，如文章，视频，直播等。

还要制定每天学习目标，课后总结等；出了这些外，因为选择太多，还要选择培训机构，自学，还是找个老师傅带等。

可以看看现下面的文章 ： 前端机构等选择

学前端要选择机构还是老师傅还是自学

技术路线

首先要学习的是基础知识：html、css和JavaScript。HTML是内容，CSS是表达，JavaScript是行为。前端开发的门槛其实很低，相比服务器端语言的学习曲线，前端开发的学习曲线是先快后慢。

所以前端开发对于从事IT工作的人来说是一个很好的起点。正因为如此，前端开发领域有很多同行都是自学成才的。HTML是最基础的，现在流行HTML5设计，可以更好的服务于移动终端，所以首先要学会网页的布局。CSS用于美化HTML页面，为页面提供布局和格式。最后，学习JavaScript。

css和html
初学者应该重点学习css和html的基础知识。关于CSS(3)，你需要了解以下知识点：Web标准、HTML相关概念、HTML标签、路径相关概念、锚点等、表格标签、表单标签、综合案例、注册页面、CSS选择、CSS字体示例、CSS外观属性、模式、CSS复合选择器、标签显示模式、CSS背景、CSS三大特性等等。一般来说，学习CSS和HTML还是比较简单的。

2、JavaScript
JavaScript一直是前端工程师进步的基石，对JavaScript的理解深度决定了前端开发人员的职业发展。JavaScript的学习内容包括执行js进程的浏览器、js变量、数据类型、运算符、流控制语句(if else、三元表达式、switch)、循环(for、while、do while)、数组、冒泡排序、函数、作用域、预解析、对象、内置对象、简单类型和复杂类型等。只有熟悉了JavaScript的基本语法，才能继续研究前端开发技术。

3、vue

vue的优点是：灵活选择模板和渲染功能；简单的语法和项目配置；渲染速度更快，体积更小。在这一部分，我们需要学习vue指令、修饰符、风格绑定、v-model的底层原理、计算属性、过滤器、监听器、vue组件、Promise、Fetch、axios、Vue路由、前端工程和模块化等等。学完以上，大家都可以实现基于Vue技术栈项目的开发能力，基本达到中级前端开发工程师的水平。

前端学习交流、自学、学习资料等推荐 参考技术C 1.HTML+CSS的学习
小伙伴在入门前端开发技术学习过程中，要学好HTML+CSS的基础部分，在这个过程中，小伙伴可以结合一系列的相关小项目来练习了解基础知识的学习与检测。小伙伴要端正自己的学习态度，在不断的学习过程中，积累丰富自身知识结构。
2.JavaScript及常用框架的学习
JavaScript的学习在前端开发技术过程中是非常重要的。有些页面交互的效果是离不开JavaScript脚本的调用，也就是说学习前端开发技术的“三板斧”（HTML+CSS+JavaScript）要掌握好。接下来需要学习的是一些比较常用框架的学习，比如Vue对前端项目的开发有着比较重要的作用。
3.项目实战案例的练习
小伙伴在学习前端开发技术知识的过程中，不要忽略了项目实战案例练习的重要性。在项目实战案例练习过程中，不仅能让小伙伴积累更多的项目实战经验，还可以锻炼小伙伴在项目开发过程中解决问题的能力。
4.交流性的学习方式
在前端培训班学习开发技术知识，不要闭门造车式的学习，要通过与老师、同学的交流性学习，学习一些比较好的编程思路，通过不断的去实践，将好的编程思路融合到自己的思维当中，有利于小伙伴的学习成长。 参考技术D 前端入门简单，门槛低，非常适合零基础来学的。自学前端开发无人专业老师引导，遇到问题无法及时沟通解决，接收的信息较为零散，容易找错学习方向，导致学习效率低。建议零基础的你选择一家靠谱的学校，先打好基础，系统的学习，因为只有选择正确的学习方式方法才能到达预期目标。

零基础，如何自学前端？

作为互联网时代直接触达用户的窗口，前端无处不在。

想要自学，你一定要静下心来学习，前端的知识点还是挺多的。

第一阶段：核心知识点

• CSS3 2D、3D 变换• CSS3 animation 动画• H5C3 炫酷页面开发• Flex伸缩布局• 移动端主流适配方案• 常见移动端样式兼容方案• 预处理器Less

第二阶段：核心知识点

• JavaScript 语言基础• BOM操作大全• DOM操作大全• 封装动画函数• JavaScript高级• 正则表达式• ECMAScript 2015（ES6）新语法• jQuery 快速开发• jQuery 插件开发

第三阶段：核心知识点

• 能够建立客户端服务器交互模型，熟悉网络通信相关概念• 能够使用 Node.js 进行 Web 服务端开发• • 基于Node.js开发Web应用• Express• RESTFul API• 原声AJAX、jQuery的AJAX相关API使用• 跨域请求及解决方案• 前端模板引擎

第四阶段：核心知识点

• 大数据可视化D3.js• Vue.js/Vue Router/Vuex/axios/Element-UI• Vue CLI脚手架工具• 使用Git、Github管理项目源代码• webpack• React.js / React Router / Redux / axios / Ant Design• create‑react‑app 脚手架工具• 项目打包及优化• 项目部署与开发

第五阶段：核心知识点

• 人工智能• 小程序开发• 小程序应用及页面的生命周期• 小程序运行机制• WePY小程序开发框架• 小游戏开发

第六阶段：核心知识点

• 二次开发• 团队协作• 团队管理工具• 源码管理工具• 源码管理及协作• 敏捷开发模式

参考技术A 可以买书看，也可以上网搜索教程，不过自学的话很多东西学不到，也可以考虑去找个学校。 参考技术B 千锋武汉网站上有完整的前端教学视频，知识讲授细致、练习步骤极其详细，多语言融合中有细分，阶段性项目巩固。还有完整版学习路线图。有需要的可以自己去下载学习试试。
不过自学的话，知识点学的不系统全面，学习效率很低，时间消耗长，可以考虑找个学校去系统学一下。 参考技术C 1.制定合理完善的学习计划
自学前端开发技术，一套合理完善的学习计划是必不可少的。小伙伴在学习前端开发技术过程中，要根据你所制定的学习计划进行学习，才能加强学习主动性。
2.基础知识的积累
小伙伴在自学前端开发技术之前要找到一些前端视频进行学习入门基础知识，最好是能够选择一套全面的、详细的、带有案例分析的前端视频来学习，这样可以让小伙伴更好的积累基础知识，扎实的学习基础知识才能快速的入门前端开发技术知识。
3.确定发展方向，以用为学
小伙伴在学习前端开发技术之前，要初步了解企业对前端开发技术的需求，从而确定自己的发展方向，针对性去学习前端开发技术知识，以用为学，这样才能在学习中提高学习效率，在工作中提升自身职业价值。
4.注重项目实战案例的练习
自学前端开发技术最大的弊端是只注重基础理论知识的学习，忽略了项目实战案例的练习。小伙伴想要通过自学前端开发技术找到工作，必须加强项目实战案例的练习，积累更多的实战经验才可以。 参考技术D 自学前端神助攻免费公开课，工作日每晚八点开课，谁看谁知道，戳https://ke.qq.com/course/320523?flowToken=1009318