前端是由很多内容组成的一个系统的合称，你说的这些是学习前端的基础，这里偶把前端的体系做下整理，方便你的学习，如果有不对的地方欢迎补充。
假如偶只想做一个普通的网站html+css+js是构成一个普通网站的三个重要部分，有了这三个部分，理论上你可以做成绝大多数的网站，因为后续的高端技术全部都是基于这三个，无论多高端，最后还是会转成这三种。
js的兼容性好烦，好多名称太长很难记怎么办这时候就要用到js中最有名的库jQuery了，jQuery就是为了解决js在不同浏览器的兼容性、为了解决js名称长操作繁琐而诞生的，比如
document.getElementById(app)
用jQuery来操作就是
$(“#app”)
怎么样，是不是很方便
写一个复杂的网站，css很多怎么办，好不容易做完了，老板说要把红色全部改成绿色怎么办这种情况下就诞生了css编译器，常见的有sass、less、stylus等，css的编译器的好处就是可以设置变量，可以嵌套书写，css再多写完结构也很清晰。这几种编译器大同小异，选一种学习即可，偶平常使用的是less。
js偶都会了，为什么别人写的偶看不懂现在看到越来越多的js中含有箭头符号、let、promise这些在js教程中都没看到的东西，这就是js的下一个版本–javascript ECMAScript 6.0（简称es6）。es6中加入了很多新特性，想要做出复杂交互效果的网站，一定要学习这个。
别人写的css都那么酷炫，偶做的为啥很普通你看到的酷炫效果基本上都用了css3，这是css的最新版本，加入了动画、伪类、渐变等多种特效，主流浏览器都支持，不过ie嘛，最起码得ie10才支持的比较完善。
前后端分离怎么弄，这些用jQuery写起来好头疼前后端分离是现在常见的一种形式，数据交互全部通过api来完成，其他东西都由前端来写，以前这个是通过jQuery来完成的，不过项目稍微复杂点，用jQuery太吃力，而且没有整体性。这两年多出很多新框架，例如Vue、React、angular等，他们都大同小异，只使用js语言就能完成一个庞大的项目，学习前记得先学es6，不然有可能看不懂。
前端项目怎么打包成app常见的框架基本上都有自己配套的生态，比如React的React Native，Vue的weex。
前端项目怎么做成桌面端软件nw.js
和electron是这方面两个很专业的工具，尤其是electron，atom和visual studio code都是基于electron的哦