CSS(3)

但只是单纯用html只能写页面的内容，不能进行排版和美化样式，如果让网页变得漂亮，需要 css。css是用来美化html编写的页面的，通过一些语法选择特定的html标签，然后用一些属性来给它们添加样式，比如文字颜色，背景，位置，边距，定位等等，还可以添加动画效果让页面显示的栩栩如生。

JavaScript

在学完html,css之后，咱们就可以写漂亮的页面了，那么接下来就是需要学习JavaScript，让网页能和人进行互动，比如点击按钮弹出个对话框，处理用户输入的表单信息，添加一些复杂的动画等等。它可以直接操作html元素，给网页开发提供了无限可能。

刚刚入门的同学每学习完一部分就敲一遍对应的代码，加深记忆。

三、UI 框架

UI框架提供了页面的基本UI样式和布局系统，比如按钮、对话框、轮播图，省了自己去开发，在本阶段你可以学习一下Boostrap, 用最快最少的时间学习一套UI框架并感受响应式布局。

响应式布局:
现在手机和平板差不多要比电脑都流行了，所以一个网站要适应不同尺寸的屏幕，有这种特性的网站就叫做响应式网站。实现这种响应式网站的CSS布局方式便是响应式布局。
Bootstrap官网: https://www.bootcss.com/

四、Ajax

AJAX通过在后台与服务器进行少量数据交换，使网页实现异步更新。

在日常的网页开发过程中，ajax无处不在，比如我们在购物时候看到的商品列表都是实时更新的数据，这时我们就不能在前端把数据写死，而是通过ajax与后端交互获取数据再渲染到页面上。再比如在注册登录的时候填写了手机号和密码，这些信息最终是需要保存到数据库当中的，此时也需要通过ajax将表单数据提交和传递。

在此阶段，我们还需要学习当前前端的流行库axios，它帮助研发人员对ajax进行了封装，让开发更高效。

axios中文文档: http://axios-js.com/zh-cn/docs/index.html

五、ES6

ES6是JavaScript语言的下一代标准，已经在2015年6月正式发布了。所以又称ES2015。它的目标，是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

简单理解ES6就是JavaScript的高级语法，在开发过程中十分常用，也是我们学习的重中之重。有精力的同学推荐看一下《ES6 标准入门》这本书，可以让你对ES6的知识体系有更好的了解。

六、Git

Git是一款免费、开源的分布式版本控制系统，用于敏捷高效地处理任何或小或大的项目。简单说就是Git工具作用是来帮助管理你的代码，让你的代码在管理上更清晰。

在此阶段我建议大家都创建一个GitHub账号，GitHub是软件源代码托管服务平台，大家可以将自己写过的代码放到GitHub上，以后一定会是一笔宝贵的财富。

Git官网：https://git-scm.com/
GitHub官网：https://github.com/

七、Node

Node是一个服务器端的JS运行环境，可以让程序员通过JS做后台服务器编程开发。我们在电脑上装上Node环境就可以写后端啦，之后就可以出门自称全栈大佬啦。

除了基本的搭建服务器、增删改查知识点外，还要学会使用npm装包（Node环境安装完成后就可以使用npm指令装包啦）、文件的导入导出等，为以后三大框架的学习做准备。

前端常用的node框架推荐是express、koa，有余力的同学可以学习一下。

Node官网地址: https://nodejs.org/

八、前端三大框架 

React

React, Facebook出品，正式版推出是在2013年，React引入了一种组件驱动、函数式和声明式的编程风格，以单页Web应用创建交互式用户界面。通过虚拟DOM，React 提供了非常快的渲染速度，只需渲染发生变化的部分，而不用渲染整个页面。React的另一个基本特点是使用更简单的JSX语法，而不是JavaScript。

尽管学习React比其他框架要复杂一些，但是React拥有一个庞大的开发者社区、丰富的学习资源，并被世界各地广泛采用。

不管是Stack Overflow开发者调查，还是State of JS调查，在前端JavaScript框架榜单中，React 始终名列前茅，一直是最受欢迎的前端JavaScript框架。

React官网：https://zh-hans.reactjs.org/

Vue

Vue.js是一种轻量级、开源的JavaScript框架，用最小的努力来构建创造性的用户界面和高性能单页 Web 应用。

Evan Yu在2014年首次发布了Vue，他是一名谷歌开发者，从Angular中获得了灵感，以 Vue.js的形式提供了一个简单、轻量级、高效的替代方案。Vue从React和Angular获得了许多特性，但是这些特性已经得到了大幅改进，从而提供了一个更好、更易用、更安全的框架。Vue提供了Angular所见的双向数据绑定，以及React所见的虚拟 DOM。

同样，Vue也非常灵活，使其能够像Angular那样作为一个完整的端到端框架，也可以像 React那样作为一个有状态的视图层。所以Vue的主要优势在于它的渐进式性质，它更简单，更容易上手，并且不会做太多限制来满足开发者的需求。Vue在过去几年中迅速流行起来，取代了Angular和React复杂的统治地位，成为最好的JavaScript框架。有些全球最大的公司，比如 Adobe、苹果、宝马等都采用了 Vue。

Vue官网: https://cn.vuejs.org/index.html

Angular

Angular是由谷歌工程师Misko Hevery和Adam Abrons在 2010 年创建的，名为 AngularJS（或 Angular 1）。AngularJS曾广为人知，也曾最受欢迎，但React的出现暴露了它严重的缺陷，后来被人们遗忘了。因此，在2016年，AngularJS完全从零开始重写，并更名为 Angular2（或简称Angular）。

AngularJS（Angular 1）的灵感来自React。它们有了很大的变化，最重要的变化就是从MVW（Model-View-Whatever）架构转变为类似React的面向组件的架构。如今，Angular已经成为构建企业应用最安全的JavaScript框架典范；超过100万的网站都在使用Angular，包括谷歌、福布斯、IBM和微软。

Angular官网: https://angular.cn/docs

我们如何选？

剧统计2021前端框架榜单中： React > Vue > Angular, 那我们究竟如何选择？

面对大佬：都学。

面对咸鱼：React/Vue两框架在国内使用较多，建议先学其中之一，后续把另一个补充。

九、Webpack

前端构建工具有很多种，目前最广泛应用的依旧还是Webpack。

Webpack是一个前端资源加载和打包工具。所谓的模块就是在平时的前端开发中，用到一些静态资源，如JavaScript、CSS、图片等文件，webpack就将这些静态资源文件称之为模块。 webpack支持AMD和CommonJS，以及其他的一些模块系统，并且兼容多种JS书写规范，可以处理模块间的依赖关系，所以具有更强大的JS模块化的功能，它能对静态资源进行统一的管理以及打包发布。

作为一款 Grunt和Gulp的替代产品，Webpack受到大多数开发者的喜爱，因为它能够编译打包CSS，做CSS预处理，对JS的方言进行编译，打包图片，代码压缩等等。

webpack官网: https://webpack.js.org/

十、TypeScript

TypeScript 是微软编写的一款带类型的 JavaScript 语言，它的代码可以编译成普通的 JavaScript，但是编写的时候支持强类型，并且支持完全面向对象的形式。它的好处在于带有了类型之后，代码更容易维护，适合大型项目的开发。

目前前端的主流框架都是采用TypeScript编写，比如React和Vue3，故前端对TypeScript的要求也随之增高。

结语

一起努力，顶峰相见！！！

关注 “前端夜伴” 公众号获取更多前端学习资源~