init

docs/index.md

@@ -0,0 +1,17 @@
+# 引言
+
+写这个的想法源自于，最开始学习编程时，无法入门的痛苦。
+
+又因为 GIT 这个工具，在写下这篇文章时还是软件工程师的必备工具。
+
+所以作为一个软件工程师用这种方式记录这篇文章，还是挺合理的。
+
+入门一个职业，不是几天就可以做到的。但也不是的几个月的培训那么长，会埋没工程师的创造力。
+
+我希望可以通过十几篇文章，让任何有兴趣的人入门前端工程师这个职业。
+
+## 路线图
+
+文章方面，希望一天可以产出一篇文章，通过两个星期。让入门变成简单的事情。
+
+网站建设方面，准备采用 docusaurus 框架，架设一个文档网站。

docs/post-2.md

@@ -0,0 +1,32 @@
+# 信息时代
+
+信息时代有很多获取信息的方式。
+
+通过网页，或者特定的软件，或者其他的方式（非人类的获取方式比如：爬虫）。
+
+网页需要通过一个特定软件才能打开（浏览器），之后人与浏览器交互，浏览器将信息传递给用户。
+
+得益于浏览器跨平台的特性， 工程师们可以实现出只要一处编写，即可处处显示的软件 —— 是软件工程师们在影响世界 —— 这也是为什么信息时代是从网页开始的
+
+## 网页的本质
+
+网页本质是一个文档，文件，一段描述，一段文字。它被记录下来，由浏览器解析，并表达。
+
+有点像是 DNA 是人的遗传信息，蛋白质是表达。 —— 最初的网页没有办法交互，只能显示字。（连颜色都没有，和蛋白质比起来弱爆了）
+
+描述网页的语言不断更新，浏览器也不断的由工程师们更新。
+
+目前使用最多的描述网页的语言是 HTML5
+
+它看起来像是下面的代码块（实际还要复杂点）
+
+```
+<div>
+  我是一块
+  <div>
+    我是里面的一块
+  </div>
+</div>
+```
+
+所以学会 HTML5 的规则，你就可以让浏览器写出具有简单排版的文字。

docs/post-3.md

@@ -0,0 +1,53 @@
+# 现代的网页
+
+现代的网页并不复杂 —— 不只是文字 —— 有漂亮的外观，可以响应用户的操作。
+
+## 漂亮的外观（CSS3）
+
+组成一个漂亮的外观，首先需要骨架 —— HTML5，然后是化妆 —— CSS3
+
+HTML5 中有一些默认的规则，可以让文字变得有层级结构，像是 Word 中的标题，独占一行，并行显示。学会这些规则，就可以进行简单的排版了。
+
+CSS3 像是 Word 样式。颜色，背景颜色，行间距。学会 CSS3 的规则，不仅可以让排版更炫酷，还可以做动画效果，以及各种特殊的交互效果。
+
+> 学会 HTML5 + CSS 可以不用 Word 了呢。—— 只是编辑体验有点糟糕。所以我还是喜欢用 Markdown 编辑文档，还可以使用 HTML 增强
+
+## 有趣的灵魂（JS）
+
+有趣的灵魂应该是 200 多斤吧。—— 我是说我自己。
+
+网页的作用不仅仅是展示，也会响应用户的操作。也可以根据不同的用户给出不同的响应 —— 动态网页。不能区分用户给出不同反应的，叫做静态网页
+
+响应用户的操作，则需要软件工程师编写一些逻辑，编写这个逻辑的语言，叫做 JavaScript（简称 JS）。
+
+### JS 在网页中如何运行
+
+回到代码的本质，其实是在规则下描述一段事情。
+
+浏览器中有一个用于解释执行 JS 的引擎。
+
+在浏览器打开网页时，把各种 JS 脚本（文件形式的，或者文字形式的）丢给 JS 引擎，由引擎解释执行。
+
+下面这个代码片段就是一个 Hello World
+
+```
+<script>
+function sayHello() {
+    alert("Hello World");
+}
+</script>
+
+<button onClick="sayHello()">点击<button>
+```
+
+`<script></script>` 标签中的代码，就是 JS 代码。它定义了一个 sayHello 函数。
+
+JS 引擎会记住这个函数。
+
+`<button></button>` 是 H5 的一个标签，表示这里显示一个按钮。
+
+`onClick="sayHello()"` 表示，这个按钮被点击时，会让 JS 引擎执行一段代码 —— `sayHello()`
+
+## 下一节
+
+下一节开始我们会完整的写一个 Hello World 网页。并开始 HTML5 CSS3 JS 的入门。

docs/post-4.md

@@ -0,0 +1,39 @@
+# HTML5 Hello World
+
+在学习一样新技术的时候，写一个 Hello World 是最简单的。
+
+用最少的知识量，让程序完整的跑起来，就是 Hello World 的目的。
+
+本篇的完整代码，可以在这里找到：
+
+- examples/post-4/hello.html
+
+## 查看这个网页
+
+查看这个 Hello World 很简单，只需要把这个 hello.html 文件下载到计算机。然后用浏览器打开就可以了。
+
+![预览效果](./post-4-1.png)
+
+## 简单分析代码
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+  </head>
+  <body>
+    <div>Hello World</div>
+  </body>
+</html>
+```
+
+通过上面的 Hello World 可以看出来一些 HTML5 的语法规则。
+
+- 标签需要闭合 —— `<div/>` 或这样的 `<div></div>`
+- 标签有独特的含义 —— `<xxx></xxx>`, `<div></div>` 是 HTML5 的块标签
+
+具体的标签规则，可以参考 [HTML5 标签](http://www.w3chtml.com/html5/tag/)。（实际工作中，用到的种类没有列出来的这么多）

docs/post-5.md

@@ -0,0 +1,48 @@
+# CSS3 快速入门
+
+上一节，入门了 HTML5。了解了 HTML5 的 Hello World 后，我们可以开始学习 CSS3 了。
+
+目标很简单，给 Hello World 加上一个颜色，并且再加一个背景色。
+
+本篇的完整代码，可以在这里找到：
+
+- examples/post-5/hello.html
+
+## 查看这个网页
+
+查看这个 Hello World 很简单，只需要把这个 hello.html 文件下载到计算机。然后用浏览器打开就可以了。
+
+![预览效果](./post-5-1.png)
+
+## 简单分析代码
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+  </head>
+  <body>
+    <div style="color: red; background-color: green">hello world</div>
+  </body>
+</html>
+```
+
+和上一节有区别的地方在于
+
+```
+<div style="color: red; background-color: green">hello world</div>
+```
+
+多了一组 style 属性，`style="color: red; background-color: green"`
+
+其中的 `color` `bacogound-color` 是 CSS3 的属性，`red` `green` 值。并且需要用 `;` 分隔。
+
+可以参考下图片
+
+![预览效果](./post-5-2.png)
+
+这里我们只展示了 CSS3 的一种写法。未来为大家介绍更多的写法。

docs/post-6.md

@@ -0,0 +1,61 @@
+# JS Hello World
+
+继续学习 Hello World。
+
+Web 由 HTML5 + CSS3 + JS 构成。本节将介绍 JS 的 Hello World。
+
+> 用最少的知识量，让程序完整的跑起来，就是 Hello World 的目的。
+
+本篇的完整代码，可以在这里找到：
+
+- examples/post-6/hello.html
+
+## 查看这个网页
+
+查看这个 Hello World 很简单，只需要把这个 hello.html 文件下载到计算机。然后用浏览器打开就可以了。
+
+![预览效果](./post-6-1.png)
+
+## 简单分析代码
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+    <script>
+      window.onload = () => {
+        alert("hello world");
+      };
+    </script>
+  </head>
+  <body></body>
+</html>
+```
+
+我们需要关注的是如下代码块，其余部分是 HTML5 的标签，想了解的话，可以查看 `docs/post-4.md` 。
+
+```html
+<script>
+  window.onload = () => {
+    alert("hello world");
+  };
+</script>
+```
+
+形式上，被 `<script></script>` 包裹住的内容就是 JS 脚本。
+
+这个脚本会在浏览器解析到这个标签时执行。
+
+- `window.onload = xxx` 是在做一个赋值操作。
+
+  将一个函数赋值给 `onload` 属性。而浏览器在加载`hello.html` 文档结束时，会运行 `onload` 函数。
+
+- `() => { alert("hello world"); }` 称作匿名的箭头函数，具体可以查阅 JS 文档。
+
+- `alert("hello world");` 是 JS 调用了浏览器提供的函数 `alert` 其中参数，我们填入了 `"hello world"` 字符串
+
+