总有童鞋问我慕课网上面有哪些视频比较好，我就索性写一篇文章总结一下我看过的慕课网上面的优秀的视频，绝大部分都是前端相关的，希望能够提升你的效率，节省时间。下面我会对这些视频从以下几个方面进行评分（单纯个人评分，不喜勿喷- -）：

• 难度系数：视频所讲内容的难度
• 实战系数：视频所讲内容的实际应用系数
• 版本系数：视频所讲内容中涉及到的框架/插件的版本是否是最新的
• 综合评分：综合评价

推荐大家用 1.75 倍速播放，这样可以节省很多时间，同时也能听清- -

前端工具

前端内容的自动化构建

• 难度系数：★☆☆☆☆
• 实战系数：★★★★☆
• 版本系数：★★☆☆☆
• 综合评分：★★★☆☆

该课程分为三个部分，第一部分讲解什么是构建，为什么需要自动化构建，后面两部分分别讲解如何使用 Gulp 进行 JavaScript 和 CSS 的构建。所讲内容比较简单，而且自动化构建在实际项目中经常会用到，不过 webpack 版本比较低，需要结合评论进行学习。。

webpack深入与实战

• 难度系数：★★★★☆
• 实战系数：★★★★☆
• 版本系数：★★☆☆☆
• 综合评分：★★★★☆

该课程介绍了如何在项目中使用 webpack 打包文件，处理各种资源，以及配置开发环境，上线环境等，通过实际的例子来讲解 webpack 的使用方法，带你探索 webpack 强大的功能。可以说是很全面了，作者讲解的也比较详细，想初步了解 webpack 如何使用的童鞋可以选择看一下该视频。

前端实时可视化开发工具体验

• 难度系数：★★☆☆☆
• 实战系数：★★★★☆
• 版本系数：★★★☆☆
• 综合评分：★★★☆☆

前端开发中，我们常常需要频繁的修改 html，css，js，然后刷新页面，看效果，再调整，再刷新。该课程使用 liveStyle，liveReload，browserSync 工具实现修改代码后，立即体现效果的功能，使用可见即可得的开发模式，极大的提高前端开发效率。实时可视化在开发环境应用的比较多，会很大程度地提高工作效率，感兴趣的童鞋可以再自行搜索 hotreload，这样结合本视频观看食用效果更佳

前端性能优化-基础知识认知

• 难度系数：★★★☆☆
• 实战系数：★★★★☆
• 版本系数：★★★★☆
• 综合评分：★★★★☆

该课程从前端优化目的，简单方法、分类开始，到如何优化，优化过程中的常见错误，业内公认的但是不适应所有方案。我们还可从这个课程中学习到当我们访问一个站点的时候，我们究竟做了什么以及怎么样才叫优化成功。性能优化是一个老生常谈的问题，如果你对该问题有一定的基础认知，想再深入了解相关知识的话，该课程你不容错过

WebApp

Hello，移动WEB

• 难度系数：★★★☆☆
• 实战系数：★★★★★
• 版本系数：★★★★☆
• 综合评分：★★★★☆

该课程介绍移动 web 的开发基础，高效的排版布局，常见的移动 web 问题，终端触摸交互，各种 bug 坑如何解决等多方面。虽然视频比较短，但是干货多多，对于移动端的适配布局这类问题进行了很详细的讲解。

JavaScript

Promise入门

• 难度系数：★★★★☆
• 实战系数：★★★★★
• 版本系数：★★★★☆
• 综合评分：★★★★★

Promise 是 ES6 中最重要的特性之一，该课程为我们讲解了为什么会有 Promise，以及 Promise 的常见用法和注意事项，通过实际代码进行讲解清晰易懂，适合前端中级水平开发者，我对该课程进行了总结，笔记在这里可以查看得到。

ajax跨域完全讲解

• 难度系数：★★★☆☆
• 实战系数：★★★★★
• 版本系数：★★★★☆
• 综合评分：★★★★★

跨域是前端领域中经常遇到的问题，尤其是各种 CDN 服务兴起之后，而究竟什么情况下跨域，如何解决跨域问题更是笔试或面试时经常被问到的问题，该视频教程详细讲解了 jsonp 的工作机制，http 协议如何支持跨域，以及 http 服务器 nginx 和 apache 的 2 种不同解决思路，让大家知其然并知其所以然，是非常不错的跨域入门讲解课程

CSS

CSS深入理解系列

• 难度系数：★★★☆☆
• 实战系数：★★★★★
• 版本系数：★★★★☆
• 综合评分：★★★★★

该系列视频为张鑫旭老师对 CSS 相关属性的讲解，包括 margin、padding、position、z-index 等等基础属性，适合具备一定 CSS 基础知识的童鞋，张鑫旭老师的讲课风格很独特，也不知道是否符合你的口味，不过我是很喜欢啦~而且张鑫旭老师对于这些属性的讲解很深入，在实际项目中应用的很多，毕竟前端工程师一年写的 CSS 代码可以绕地球三圈啊（我对该系列视频的讲解进行了总结，在系列专栏中的CSS深入理解系列中可以看到）

如何用CSS进行网页布局

• 难度系数：★☆☆☆☆
• 实战系数：★★★★☆
• 版本系数：★★★☆☆
• 综合评分：★★★☆☆

该课程教你怎么制作一列布局、二列布局、三列布局当然还有最通用的混合布局，而且你还可以选择让它固定还是自适应。用 CSS 重新规划你的网页，让你的网页从此更美观、更友好。难度系数很低，而布局在实际项目中是很基本也是很重要的知识点

分页页码制作

• 难度系数：★☆☆☆☆
• 实战系数：★★☆☆☆
• 版本系数：★★★★☆
• 综合评分：★★★☆☆

通过本课程的学习，我们可以学习到利用 HTML、CSS 样式技术制作出分页页码的效果。包括最简单的直角分页页码效果，修复行内元素之间的间隔 bug 问题分析，代码整理，为分页页码插入小图标。虽然一般不需要我们自己制作分页页码，但是如果你想自己写框架或者对这类知识比较好奇的话，该视频能够充分解答你的疑惑，最为关键的是提供源码啊~

JavaScript

Hybrid设计

• 难度系数：★★☆☆☆
• 实战系数：★★★★☆
• 版本系数：★★★★☆
• 综合评分：★★★★☆

该课程首先会告诉大家什么是 Hybrid，Hybrid 有什么特点，也会告诉大家业内有哪些常见的 Hybrid 应用以及 Hybrid 合理的应用场景。 然后，课程会简单介绍一个 Hybrid 架构的方方面面，包括 Hybrid 的发展，比如超级 Hybrid 方案 React Native 以及 Weex 学习该课程，大家会知道 Hybrid 中 H5 与 Native 如何交互，并且对 Hybrid 体验增强和 Hybrid 离线包有一些认识，是大家做混合 APP 的必备良药。

zepto设计和源码分析

• 难度系数：★★★☆☆
• 实战系数：★★★☆☆
• 版本系数：★★★☆☆
• 综合评分：★★★☆☆

当熟练使用 zepto 的 API 之后，也应该解读一下 zepto 的源码，了解一下 zepto 的设计原理。该教程深入浅出的介绍了 zepto 最核心的设计原理，看完之后即能轻松解读 zepto 所有源码。就像 TJ 大神一样，有时候看别人写的代码会有不同寻常的收获

Web安全-XSS

• 难度系数：★★☆☆☆
• 实战系数：★★★★☆
• 版本系数：★★★☆☆
• 综合评分：★★★☆☆

该课程从 Web 安全 XSS 的定义开始讲起，到深入剖析 XSS 攻击的原理和流程，了解常见 XSS 攻击的危害。同时通过项目实战针对性的分析如何应对 XSS 攻击做到安全的 XSS 防御措施。XSS 是最常见的一种 web 攻击，了解一些相关知识百利无一害= =