如题所述
我一年多前在中 公学的，作为过来人希望对你有帮助哈，很多想做Web前端开发的人，却不知道该如何学习，并且前端体系比较庞杂，很难从一而终，对于零基础的小白来说，很容易因为找不到正确的学习方向而耽搁了发展和时间，那么零基础小白学Web前端开发工程师，学习路线是什么呢？
互联网日益发展的今天，Web前端开发工程师已成为市场上极具竞争力的人才，但是前端要学习的东西很多，而且很杂，对于很多人来说，学前端问题的关键在于没有找到正确的发展方向，他不知道自己该学什么？前端更是体系庞杂，很难从一而终，那今天我就来跟大家聊聊Web前端学习路线是什么。
Web前端开发入门学习有：HTML、CSS、JavaScript(简称JS)这三个部分。所以在学习之前我们需要先明确三个概念：
HTML——内容层，它的作用是表示一个HTML标签在页面里是个什么角色。
CSS——样式层，它的作用是表示一块内容以什么样的样式(字体、大小、颜色、宽高等)显示。
JS——行为层，它的作用是当用户触发某些行为时，会给内容和样式带来什么样的改变。
首先我们初学者岗开始学习 HTML，CSS先跟基础的视频学习一下，然后跟着案例去练习，案例，案例是非常重要的，应用到实处，这是一个熟能生巧的技能，然后我们做出五个像小米这样的静态官网网站，这样一来，我们的基本功可以说是掌握的很扎实，之后我们需要做各种常规的、奇怪的、大量的布局练习来捆固、理解自己的知识。
下一步的学习 Javascript，开始我们要知道这门语言是做什么的，它能有什么用，以及他的强势是什么。JavaScript被称为前端开发者的核心部分，也是工资的标准，现在有专门的JavaScript工程师，薪资都很高。所以这一部分，有追求的小伙伴可以上点心，学的深入一些。
学习前端需要一步步来，用心学习，掌握一些学习方法，但是自学肯定有局限性，有条件的小伙伴可以来优就业免费试学一下，看看自己适不适合学习前端，来优就业，无论你在哪个城市，都能方便就近入学，参与面授培训。与远程在线教学相比，面授课程能够让学员真切感受班集体的学习氛围，更有老师面对面的讲授，手把手的教学，保时保量。
第一 前端开发难学吗？？ 总在难易上徘徊，容易内心纠结。
如果学什么课程之前，首先考虑的难不难学，这会形成一个不好的心理暗示，因为我们很多人的内心都是喜欢去学习简单的容易的东西，而不喜欢学习复杂难的东西，我们的立足点不在是把这个专业学透彻学专业，总是在简单的道路上徘徊，也就意味着我们只能掌握一个皮毛的知识，任何学科专业，学起来都不容易，都需要你们付出心血认真研究，总想不付出努力，随便一学就一步登天的思想，是电视剧看多了吧，就像武侠电视剧里拿到一本武功秘籍，看一两天，咔咔的就学会了，从此天下无敌，然后开始拯救世界了，不好意思，武侠的世界可以这样，现实的世界不是这样的，只能踏踏实实的去努力，逢山开路，遇水架桥。什么难不难的，为了掌握这门技术，去努力就对了，这才是正确的学习态度。
第二 跟着高手学习，即便前端难，也会变的很容易。
关于前端学习，我一直不主张完全自学，当然自学的精神可嘉，但是自学的时间成本，精力成本太高了，明明可以跟高手学10分钟就能解决的问题， 很多人自己得折腾两三天，即便这个时候问题解决了，自己也被折腾的精疲力尽了，更何况后边还有很多的问题需要去解决，学习的过程就是一个跋山涉水，穿山越岭的过程，自学好比自己一个人走着去学习，，而且这条路你从来没走过，很容易迷路，而高手对这条路已经走了很多遍了，知道哪里有陷阱，哪里有小路可以直达，怎么灭掉路上的那些妖魔鬼怪各种拦路虎。
有些伙伴说，你说的道理确实对，但是我们去哪里找前端高手，人家为什么要带我们呢？我们也是两眼一抹黑，被迫无奈才自学的嘛，有高手带着，谁愿意一个人苦兮兮的自学呢，为了解决大家这个问题，大家可以跟我师傅学习一下，他每天晚上都在网上有免费直播课，讲的通俗易懂很有条理，也很透彻明白，听了不会让人迷迷糊糊的，而是感觉明明白白的。想听他的网上课程的同学，可以进入他的前端教程资料裙：首先位于开头的一组是：655，其次处于中间地带的一组数字是：567，最后位于尾部的一组数字是：613，把以上三组数字按照先后顺序组合起来即可。学习比拼的不仅仅是努力，还有智慧，还有谋略，学习就像是一场战斗，讲究一个输赢的，你学成了，你就赢了，你最后学的一瓶子不满，半瓶子晃悠，那你就输了。
第三 浅谈前端的学习历程。
说起前端，第一个接触到的就是我们现在每天都可以接触到的网页，而网页的构成又分为三种知识的结合
（1） HTML5：
H5给予前端的感觉就像是一个框架一样，如同建房子，而H5的作用就是将框架给架构出来。而H5其实是通过H4发展过来的，但是由于两者相差太大了，所以并没有用过H4来进行过渡学习。在学习H5的时候，刚开始就遇到了困难，因为各种各样的标签，各种各样的元素，学的我是有点儿晕头转向，不过好在，慢慢的自己也就有了那么一点点了解，基本上，H5中的元素分为行级元素以及块级元素，行级元素都在同一行，除非用到<br>标签，或者通过样式将其变为块级元素，而块级元素则独占一行，然后就是各种标签的使用了，基本上也可以分为几类，1.文本类，2.多媒体类，3.表格类，4.最为重要的表单类标签，标签的使用需要看情况选择，只有经过不断的练习才能逐步了解。而我自己对于标签的使用也仅限于入门阶段，所以也就不班门弄斧了，我这里所谈只是我自己的学习过程。
（2） CSS3:
css的中文解释为层叠样式表单，所以它的主要作用就是装饰，由于开始的时候已经接触到了HTML5，所以CSS的作用就是在框架上面进行装修，而这里面就涉及到了，如何去使用CSS，刚开始学习的时候其实我们可能都接触到了，在HTML的代码中，我们也可以对各种各样的标签进行样式的控制，为什么我们还要通过css来进行控制呢？首先，在HTML中对样式进行控制会影响代码的整洁度。其次，在不断的开发过程中，你会发现，其实有很多样式你以前经常使用和编写，那么通过我们学习过Java所以，首先想到的一定是封装，那么既然有了封装的想法，那就有了CSS的出现，CSS的使用有三种形式，一，外部引用，即所有的CSS样式都存在CSS文件夹中，通过link使用二，在HTML头部通过Style标签进行编写使用，三，也就是我们最不提倡的内嵌，即在标签中进行样式编写，但是这样的使用在canvor(画布标签)极为常见，讲到样式就不得不提到最为重要的选择器，选择器的使用可以通过1..+类名来使用，2.#+id进行选择，3.直接通过标签名进行选择，4.可以通过其父容器再对其进行选择，当然在我的学习中最为常见的是通过类名和id进行选择，其次是直接对标签名进行选择，不过这些选择器中，还有一个使用很多的，那就是组合选择器，因为有时两个标签具有相同的样式，所以这时就会产生两个组合选择器。说完了选择器，就要讲到css中的属性了，比如宽width，高height，颜色color都是属性，每个标签都可以设置属性。
属性学习完就是定位和浮动了以及动画，这些都是让样式更加美化的内容，所以如果需要页面更加美化，那么就要将这部分内容学好，但是很惭愧的是我自己这部分属于没有学好的。
（3） JavaScript:
JS的作用基本上就是完成前后端的交互，JS的学习过程相对于H5以及CSS3就好了一点点，因为它是可编程性语言，所以对于有过编程语言学习的同学，理解起来还是相对来说容易一点，由于它是弱类型语言，所以对于类型的定义只有Number，String，Boolean，Object，等，而不像java中光是数字类型就有四类八种，而且它不需要编译即可运行，所以它很方便，也很轻量，而且对于变量的定义没有java中的必需声明引用，在JS中一切变量只需要一个Var就可以解决，但是在JS中也有Java中不存在的，比如匿名函数，相当于Java中的方法，即此方法没有方法名，而且可以用变量进行表示，即 var i = function(){};所以对于JS的学习还没有结束。而且还有最为重要DOM和BOM没有学习到。学习还在不断进行，而我也将一往无前。
关于这个问题，其实我们更应该关注的是自身。
我一直都特别佩服那些自学成才的人，并且我也认为他们是真的值得学习的。
并且，大量的大神证明，靠看书、查资料、自学是完全可以成为很牛逼的人的。
但是，自学枯燥、无人点播、知识不系统、走弯路、难坚持等等这些一系列的障碍，又有几人能克服？
所以培训就有了必要，我认为培训机构和义务教育在本质上并没有什么太大的区别，都是传递知识的过程。
培训机构所做的事情，就是让学习变得更简单，更适应大众。
所以我们会发现，一些并没有极客精神，对代码并没有太大的兴趣但是学习能力还不错的学生，也能够通过培训吸取到这些知识，并且凭借这些知识找到一份不错的工作，那一份还算可以的薪水。
所以，对于学习来说，如果你不能克服自学的全部障碍，为什么不选择一条大多数学生都在选择的路——找一家好的培训机构，拼尽全力学习半年，走向工作岗位，在工作中继续充实自己。
自学还是培训哪个适合自己，不如我们先自学一段时间来看看，如果真的能够效率还不错的掌握知识，并且可以循序渐进的提升，那么其实培训没有太大的必要。
这里推荐一套自学路线，可以参考一下：
第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数据库)
以上内容配套的相关教程指路B站尚学堂官方号！都是免费滴！
本回答被网友采纳阶段1.前端核心基础
HTML +_CSS核心、JavaScript基础语法、JavaScript面向对象、JavaScript DOM和BOM编程、jQuery框架
阶段2.HTML5 + CSS3 + 移动端核心
HTML5新特性、Canvas专列、CSS3新特性、CSS3进阶、CSS3实例演练
阶段3.移动端
移动端核心、移动端适配、移动端特效
阶段4.服务器端
服务器端开发、数据库操作、前后端交互核心、微信公众号开发
阶段5.JavaScript高级
JavaScript基础深入剖析、JavaScript面向对象深入讲解、JavaScript异步编程、JavaScript函数式编程、JavaScript设计模式
阶段6.前端必备
性能优化、版本控制工具、模块化、项目构建工具
阶段7.高级框架
React框架基本使用、React框架进阶、Vue框架基本使用、Vue框架进阶、Vue源码分析
阶段8.小程序
原生小程序入门、原生小程序API使用、小程序框架Mpvue
零基础可以学Web前端的，前期课程都非常简单，只要会一些 html 和 CSS的课程就入门了。
Web 前端开发一般会包含8个阶段：
第一阶段：HTML/CSS 基础
HTML 基础，HTML5 规范，HTML 语义化标签，CSS 基础，CSS3 规范、CSS 选择器、各种 CSS 属性、盒模型、视觉格式化模型、浏览器兼容性问题解决方案，视觉格式化模型、传统布局、现代布局（Flexbox、Grid）切图工具 PhotoShop、Markman、PxCook 等的使用
第二阶段：HTML/CSS 高级
CSS 处理器，CSS 复合选择器，数值与单位，CSS Hack，媒体查询与响应式，过渡与动画，浮动定位，CSS 高级技巧（雪碧图、滑动门和三角形绘制等），CSS预处理器（Sass，Less）的使用，CSS 架构，响应式设计 Bootstrap，移动优先，媒体查询多终端适配，移动端屏幕比例，主流移动端适配解决方案，CSS 模块化开发
第三阶段：JavaScript 基础
采用全新 ES6 基础最新语法（数据类型、变量、运算符、表达式、控制语句、函数、数组、对象）进行教学，要求学生在熟悉 JavaScript 核心基础语法的同时，也能够理解 JavaScript 底层工作原理、设计模式；并运用现代 JavaScript 开发工具，进行原生 JavaScript 以及现代 JavaScript 开发工具创建出基于 MVC 的前端应用程序，也能进行 JavaScript API 编程（BOM，DOM事件）。
第四阶段：JavaScript 高级
HTML5 新增 API（视频音频、Canvas、SVG、拖拽事件、地理定位、本地存储），JavaScript 函数高级，模块化开发，JS 模块模式，MVC 模式，JavaScript 面向对象编程，JavaScript 异步编程，Ajax，Ajax的作用，原生XHR对象，同步与异步，HTTP 协议 HTTPS 协议，封装 Ajax，jQuery Ajax，同源策略，跨域问题及解决方案，JSON解析，JavaScripts 设计模式，Promise 对象，ES6 模块规范，现代 JavaScript 开发规范。
第五阶段：Node 服务器端开发
前后端分离开发，Node 基础，MVC 架构，MongoDB，Node 在服务端开发，Session、JWT、OAuth 2.0，跨越资源共享，身份验证与权限管理，Node 实时通信技术
第六阶段：Web前端框架
React 技术栈，Vue 技术栈
第七阶段：移动端开发
React Native，跨端开发框架之微信小程序开发，Flutter，PWA 等
第八阶段：前端运维
Docker 与 Linux 基本操作、Nginx/Node/Redis/MongoDB 安装与配置、PM2、搭建集群。Git、Jenkins、TravisCI
详细课程内容，请参考课程图片。
