专栏介绍

前端存在知识点杂多、技术迭代快的特点，对于初学者或者非前端开发者往往会一脸懵逼。准备写一个系列，将前端各个知识点逐个介绍，最后再详细介绍「课程减减」这个网站如何从零开始开发，包含前后端的开发，以及最后部署上线。

• 浏览器可以运行 html/css/js 的代码，渲染网页并且提供交互能力。在原生的 js 的基础上，又诞生了Vue/React，可以提升网页开发效率。
• Node.js 目前有两方面作用，一方面是写脚手架或者一些命令行工具，比如 Webpack。另一方面可以搭建 HTTP 服务器，提供后端接口，比如使用 koa 框架。

课程会详细介绍各个知识点的来龙去脉，目录如下：

适合人群

对编程感兴趣的在校学生。

前端初学者：简单学习了 html、css、js，对其他概念还不太了解，也没有独立开发项目的经验。

其他开发人员：不管是后端、算法、测开等，只要有过编程经验，都可以轻松地跟上课程。

收获什么

会了解前端的整体架构，各个部分的作用，跟着教程可以搭建出「课程减减」这个网站。

包含前后端整个开发过程的详细介绍，以及最后会将网站部署。整个课程下来，会对前端有一个大体的认知，未来想写其他的网站也不再迷茫，该干什么， 需要做什么都做到心中有数。

购买须知

购买后可以在电脑和手机直接阅读：

• 电脑端浏览器访问 https://xiaobot.net/subscribed，体验更佳。
• 在微信中关注【小报童投递】服务号，关注后点击菜单栏，即可进入小报童首页，看到订阅的专栏。

加餐 2 一文轻松入门 css

对于初学者，css 一定是一个令人头疼的东西，它和之前学习的任何编程语言都不一样，更多的是一种需要记忆并且理解的东西。css 存在很多奇技淫巧，但 90% 的时间只要知道了一些基本的概念足够了，......

加餐 1 搭建网站之自建数据库

这篇文章作为数据存储的一个补充，主要是一些概念解释和代码执行。

搭建网站之数据 和 搭建网站之云存储 我们分别用 Excel 和云数据库保存了数据，两者的优缺点如下：

14. 搭建网站之云存储

已经进入实战篇，包含大量代码，建议在电脑前边看编写

我们已经成功上线了网站 test.coursesub.top/ ，但接口里的数据是通过 EXCEL 保存的，没有用......

13. 搭建网站之部署

本文需要提前购买 域名和服务器。

将线上后端地址更新为要配置的域名，修改 src/api/server.js:

const DOMAIN\_MAP = {
 developme......

12. 搭建网站之交互

已经进入实战篇，包含大量代码，建议在电脑前边看编写

搭建网站之 UI 这篇文章已经把 UI 全部完成了，本篇实现用户的简单交互并且去请求后端接口拿到数据进行渲染。

定义接口

11. 搭建网站之后端

已经进入实战篇，包含大量代码，建议在电脑前边看编写

搭建网站之数据 中抓了掘金的接口，这篇文章我们就读取保存的数据，为自己的网站提供两个 HTTP 接口。

KoaHTTP......

10. 搭建网站之数据

已经进入实战篇，包含大量代码，建议在电脑前边看编写

这里以掘金的课程数据为例进行分析。

寻找接口打开 掘金小册 页面的控制台，查看 Network，先切到 Fetch/X......

9. 搭建网站之 UI

已经进入实战篇，包含大量代码，建议在电脑前边看编写

首先来拆分一下网站 UI 的区域：

UI 总共分三大块，header 部分，body 部分以及 footer 部分。

8. react

回忆一下 浏览器之 js 通过 js 写了一个计数器：

index.html：

7. webpack

回忆 Node.js 第三方模块 这篇文章所说的，webpack 可以看成一个命令行工具。它的作用是进行代码的打包，目前是前端开发中不可或缺的工具之一。

核心作用前端模块化 这篇文章......