Web前端开发主要学哪些课程？

老实说，前端经过这几年的快速发展，网上的文章和教程还是蛮多的，有经验的人能够根据资料制定出属于自己的学习方法和路径，但对于小白来说，还是有些难度。知了姐来给大家分享前端学习路径。针对0基础，非科班，没有编程经验，想学前端，但是不知道如何入门的人群。

基础部分：

1、HTML + CSS 这部分学习，可以模仿一些网站做些页面，在实践中积累经验。做到能与UI对接，能100%重构网站静态页面的开发，为后期编写页面逻辑、动态效果打基础。

2、Javascript 要学的内容实在很多，如果没有其他编程语言的基础的话，学起来可能要费些力，这个阶段需要掌握编程基础概念，培养逻辑思维能力。能够独立完成网站的页面开发（包括合理布局，JavaScript操作DOM）

进阶部分：

有了以上基础，就可以进行一般的静态网页设计，不过对于复杂的页面还需要进一步学习。

3、JavaScript高级与服务器基础，深入面向对象编程，具备移动端开发能力，处理浏览兼容问题，深入学习ES6/ES7语法规范，前后端分离开发思想。

4、框架与服务器，数据库，前端安全的学习，深入了解Node，数据库操作，前后端分离技术，前后台协作开发。熟悉NPM（Yarn），Node模块fs，http，路由，处理请求，express4（koa）；掌握创建websocket服务，MongoDB/MySQL数据库CRUD（Mongoose）；掌握微信小程序开发，掌握Vue2.x基础，Vue-router，Vuex等等。

5、React与组件化开发，深入学习组件化开发思想，了解webpack使用，掌握React开发基础，Hook，create-react-app等等。

升级部分：

有了以上知识，对于大多数小型网站，你应该已经可以写出能够工作的代码了。但要想成为更专业的前端，你还需继续努力。更高的要求大概还有四方面：1）易维护，2）可测试，3）高性能，4）低流量（移动端）。

其他补充部分：

前端项目同样面临软件生命周期的各个环节，首先是代码管理，你必须学会使用Svn和Git。其次是代码的构建，如今前端代码构建已经不是简单的压缩一下了，需要进行依赖管理、模块合并、各种编译，比需要学会使用Grunt、Gulp等前端构建工具。

以上内容只是简单说了前端学习的顺序。对于前端开发，基本内容就这些了，可以根据自己的兴趣爱好选择性学习以下内容。

1、交互设计。大公司依然有专业人士搞这些，不过不懂交互的前端一定不是好前端。推荐《简约至上》。

2、后端。应该说前端工程师必须至少了解一门后端语言，不过如果爱好也可深入学习，如今NodeJs在大公司已经得到普遍的使用，推荐大家使用在Node上使用Express框架做一些后端服务的开发。

最后，有经验的程序员都知道，学习编程最有效率的方式就是把你扔到一个项目组，连滚带爬的做一两个项目下来你马上会发现所有的知识点全都连到一起了，不再是分散的，而是形成一个整体了。那种感觉是仅仅深入钻研知识点而不写真实项目的人所不能体会的。 一个项目就是一根绳子可以把大片的知识串到一起。

如果想锻炼实际开发的能力而不仅仅是背诵或者了解一些知识点，如果想成为真正的好手，那么，还是做项目吧！

整体来看的话，Web前端开发需要学习的内容还是比较多的。前端是一门涵盖面很广的学科，而且技术更新较快，优秀的Web前端开发工程师应该具备快速学习能力。如果没有快速学习能力，就跟不上Web发展的步伐，所以需要不断提升自己，不断学习新技术、新模式。

一、web前端开发需要学习什么?

第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数据库)

二、web前端需要报班吗？

很多人对前端工程师的岗位比较感兴趣但是却不清楚该怎么下手，是自学还是去培训课，很多人想要系统的学好前端，并且在最快的时间学会最多的知识，那么培训班是大家最好的选择。

现在市场上的IT培训机构十分多，并且很多机构都开设了web前端的课程，很多人在转行IT的时候，培训机构处于学员的自身条件参考，会对学员宣传入行门槛比较低的web前端课程，同时薪资也不是很低，这是小白，尤其是当学员学历还有资质不是很好的时候，这个是很好的推荐。

无论是在培训机构学习IT，学习前端知识，还是买书或是在网络上自己看视频学习也好，如果你想要快速入行找到就业，个人觉得时间比较宝贵，快速的找到一条正确的学习路径，方便自己快速转行才是重中之重。

看视频还是买书自学，本质上也是花钱获得别人知识积累的过程，这根培训班上课并没有什么本质上区别，但是在培训机构，可以在平时学习的同时获得大幅的实战训练，才能快速帮助自己成长，不会走偏，欢聚而言，自学如果有熟人带的话固然好，这也是相当于有培训班的便利，但是熟人毕竟也有自己的工作，很多学生在尝试了之后最后还是走上了培训班的道路。

本身来说，大学结束后才出来花钱学习也不是什么丢脸的事情，本身在就业的问题上最后还是看的大家的工资的高低，在学习办理会遇到很多的同学，有老师带着学，在以后这个行业里也会走得越来越远。

目前市面上的培训机构也是五花八门，因为很多培训机构的好坏没办法通过直接的对比看出来，当然首先从解答来考虑，面授的肯定远远好于视频的。

最后，对web前端有兴趣的小伙伴们，不妨先从web前端入门开始！B站上有很多的web前端入门教学视频，从基础到高级的都有，还挺不错的，知识点讲的很细致，还有完整版的学习路线图。也可以自己去看看，下载学习试试。

WEB前端分：高级，中级，初级。

初级前端掌握的课程：

• HTMl5+ CSS3。
  

• 前端学习的基础技能需要掌握HTMl+ CSS的基础内容。
  

• 学习内容：基础标签div，span，p，ul，li，input等。
  

• CSS：语法、派生选择器、id选择器、类选择器、属性选择器。
  

• CSS基本样式：背景，字体、链接、列表、表格、轮廓。
  

• CSS盒子,CSS选择器,CSS常用操作。

中级前端掌握的课程：

• CSS3和动画效果。

• HTML5。
  

• 新增标签、浏览器适配。
  

• JS——基础。
  

• 实现、输出、语法与注释、变量和数据类型、javaScript函数、JavaScript异常处理和事件。

• 件处理、DOM对象、正则表达式等。
  

• 重点掌握：Jquery、angularJS、bootstrap。

高级前端掌握的课程：

• 移动端：nodejs，vuejs。
  

• CSS：面向对象的CSS、CSS的后处理、Less、SASS。
  

• JavaScript：模块化，数据推送、高级函数、面向切面、多线程、设计模式。
  

• Web安全只是。

WEB前端简介：

WEB前端工程师，也叫Web前端开发工程师。他是随着web发展，细分出来的行业。web前端开发工程师，主要职责是利用(X)HTML/CSS/JavaScript/DOM/Flash等各种Web技术进行产品的界面开发。制作标准优化的代码，并增加交互动态功能，开发JavaScript以及Flash模块，同时结合后台开发技术模拟整体效果，进行丰富互联网的Web开发，致力于通过技术改善用户体验。

Web前端开发工程师是一个很新的职业，在国内乃至国际上真正开始受到重视的时间不超过5年。Web前端开发是从网页制作演变而来的，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，那时网站的主要内容都是静态的，用户使用网站的行为也以浏览为主。

要求：

Web前端开发工程师，主要职责是利用(X)HTML/CSS/JavaScript/Flash等各种Web技术进行客户端产品的开发。完成客户端程序（也就是浏览器端）的开发，开发JavaScript以及Flash模块，同时结合后台开发技术模拟整体效果，进行丰富互联网的Web开发，致力于通过技术改善用户体验。

• 为网站上提供的产品和服务实现一流的Web界面，优化代码并保持良好兼容性；

• Web前端表现层及与前后端交互的架构设计和开发；

• 配合后台开发人员实现产品界面和功能；

• 利用各种Web技术模拟开发产品原型；

• Web新技术调研和资讯整理；

• 精通HTML/XHTML、CSS，熟悉页面架构和布局，对Web标准和标签语义化有深入理解；

熟悉Ajax、JavaScript(或者ActionScript)、DOM等前端技术，掌握面向对象编程思想。

第一 前端开发难学吗？？   总在难易上徘徊，容易内心纠结。

   如果学什么课程之前，首先考虑的难不难学，这会形成一个不好的心理暗示，因为我们很多人的内心都是喜欢去学习简单的容易的东西，而不喜欢学习复杂难的东西，我们的立足点不在是把这个专业学透彻学专业，总是在简单的道路上徘徊，也就意味着我们只能掌握一个皮毛的知识，任何学科专业，学起来都不容易，都需要你们付出心血认真研究，总想不付出努力，随便一学就一步登天的思想，是电视剧看多了吧，就像武侠电视剧里拿到一本武功秘籍，看一两天，咔咔的就学会了，从此天下无敌，然后开始拯救世界了，不好意思，武侠的世界可以这样，现实的世界不是这样的，只能踏踏实实的去努力，逢山开路，遇水架桥。什么难不难的，为了掌握这门技术，去努力就对了，这才是正确的学习态度。

第二  跟着高手学习，即便前端难，也会变的很容易。

       关于前端学习，我一直不主张完全自学，当然自学的精神可嘉，但是自学的时间成本，精力成本太高了，明明可以跟高手学10分钟就能解决的问题， 很多人自己得折腾两三天，即便这个时候问题解决了，自己也被折腾的精疲力尽了，更何况后边还有很多的问题需要去解决，学习的过程就是一个跋山涉水，穿山越岭的过程，自学好比自己一个人走着去学习，，而且这条路你从来没走过，很容易迷路，而高手对这条路已经走了很多遍了，知道哪里有陷阱，哪里有小路可以直达，怎么灭掉路上的那些妖魔鬼怪各种拦路虎。

       有些伙伴说，你说的道理确实对，但是我们去哪里找前端高手，人家为什么要带我们呢？我们也是两眼一抹黑，被迫无奈才自学的嘛，有高手带着，谁愿意一个人苦兮兮的自学呢，为了解决大家这个问题，大家可以跟我师傅学习一下，他每天晚上都在网上有免费直播课，讲的通俗易懂很有条理，也很透彻明白，听了不会让人迷迷糊糊的，而是感觉明明白白的。想听他的网上课程的同学，可以进入他的前端教程资料裙：首先位于开头的一组是：655，其次处于中间地带的一组数字是：567，最后位于尾部的一组数字是：613，把以上三组数字按照先后顺序组合起来即可。学习比拼的不仅仅是努力，还有智慧，还有谋略，学习就像是一场战斗，讲究一个输赢的，你学成了，你就赢了，你最后学的一瓶子不满，半瓶子晃悠，那你就输了。

第三  浅谈前端的学习历程。

说起前端，第一个接触到的就是我们现在每天都可以接触到的网页，而网页的构成又分为三种知识的结合

（1） HTML5：

H5给予前端的感觉就像是一个框架一样，如同建房子，而H5的作用就是将框架给架构出来。而H5其实是通过H4发展过来的，但是由于两者相差太大了，所以并没有用过H4来进行过渡学习。在学习H5的时候，刚开始就遇到了困难，因为各种各样的标签，各种各样的元素，学的我是有点儿晕头转向，不过好在，慢慢的自己也就有了那么一点点了解，基本上，H5中的元素分为行级元素以及块级元素，行级元素都在同一行，除非用到
标签，或者通过样式将其变为块级元素，而块级元素则独占一行，然后就是各种标签的使用了，基本上也可以分为几类，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没有学习到。学习还在不断进行，而我也将一往无前。

第一，必须掌握基本的Web前端开发技术，其中包括：CSS、HTML、SEO、DOM、BOM、Ajax、JavaScript等，在掌握这些技术的同时，还要清楚地了解它们在不同浏览器上的兼容情况、渲染原理和存在的Bug。
第二，在一名合格的前端工程师的知识结构中，网站性能优化、SEO和服务器端的基础知识也是必须掌握的。
第三，必须学会运用各种工具进行辅助开发。
第四，除了要掌握技术层面的知识，还要掌握理论层面的知识，包括代码的可维护性、组件的易用性、分层语义模板和浏览器分级支持，等等。