零基础轻松入门前端:知识点加实战

专栏介绍

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

前端整体结构可以理解为上边的图,底层的硬件、操作系统部分我们不关心,谷歌开源了 V8 引擎,它可以运行 js 语言,基于此又有了 Chrome 浏览器和 Node.js

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

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

共 15 节,每节平均几块钱,未来还会按需求更新。

适合人群

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

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

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

收获什么

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

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

购买须知

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

加餐 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 可以看成一个命令行工具。它的作用是进行代码的打包,目前是前端开发中不可或缺的工具之一。

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

去【 小报童 】查看专栏详情