博客

Git 可以保存你每次对项目做的修改，给你一个清晰的开发历史记录。它可以让你以后去检查之前在任意时间点对项目做的修改，给你恢复，重做的机会。有了 Git 大家可以一起协作开发一个项目，有几种流程方法，在 《Git》里都介绍到了。

你已经想成为一名开发者了，不管是以后的日常工作，还是以开发者身份去应聘面试，会用 Git 都是非常加分的。即使你是一名开发爱好者，我也推荐了解一下 Git 。它是为项目做版本控制，一起协作开发的必备工具。

能把 Git 用在自己的开发流程里，你不需要读完一本 500 页的书。这本《Git》完全可以让你起步，它不是一本详细的操作手册，而是一本能练习的书。有些东西只有动手实际做一下，才能理解它到底是什么，我的一点经验不断地验证了这一点。

学会了 Git，我们可以一起做点东西。比如我们可以一起写这本书，这本书也可以作为一个一起开发的项目，你可以为书提交自己写的章节，可以修复书中的错误。

在线阅读

https://git.ninghao.net/

前置阅读

1. 《CLI》熟悉命令行界面
2. 《Workflow》准备开发前期的几样工具

《工作流》里介绍了成为一名开始者，一开始你要知道的工具。之前我们已经介绍了《CLI》，现在你应该熟悉了在命令行界面下工具。现在你可以跟着《工作流》，去在电脑上准备一些工具。以后你还会遇到很多工具，不过要等到真正用到的时候再去准备与了解他们。先带上这些必备工具，就可以出发了，只有轻装上阵，你才可能走的更远。

今年感觉一直处于焦虑状态，有时几乎让我无法工作。自我调节也管点用，打个电话给朋友，喝几杯，出去走走，也都有所缓解，但这种焦虑状态还是会反复出现。引发的原因主要就两个，家庭与工作，会觉得事事不顺。这是不是要给我个大任务啊，还是因为我情商低，在别人那里这根本都不叫事儿。

家庭需要参与，别等事情变得更糟。儿子就像中间人，得在各方面去调节家庭关系。我之前路数是捂朵不听，闭眼不见，觉得自己有更重要的事情要做，家庭琐事根本不需要在乎。直到这些琐事引起的 bug 让你觉得无法修复，不可逆。即使我已经意识到了问题，打了补丁。

工作方面，有时候觉得自己能做任何事，但又经常感到一点自卑。面对未来，有时候觉得充满希望，但又会有点恐惧。总会在各种状态的两极，无限循环。我没明白人类为何要保留焦虑这种情绪，暂时我没想到它会对我有什么帮助，焦虑的状态经常让我无法工作。或许它也只是为了让世界平衡的某个因素。

《CLI》是宁皓网的一本蓝皮儿书，因为它的封面是蓝色的 ：）还没校对，忍不住先发给大家看看。大家可以 fork 到自己的 Github 仓库里，然后帮着改改错别字儿。不熟悉这个流程，可以参考 Atlassian 的 Git Workflow，我应该也再去写一本 Git 流程手册。

熟悉在命令行界面下工作，可以作为你成为一名开发者要做的第一个任务。在命令行界面下完成一些简单的日常工作，比如进入到某个目录的下面，查看目录里的东西，在目录里创建新的目录，文件，重命名文件或目录，移动文件的位置，编辑文件里的内容。

这些任务在图形界面下操作就是点点鼠标的事儿。在命令行界面下，你需要了解内容的路径，绝对路径与相对路径的区别，使用什么样的命令，要用到哪些参数，怎么获得帮助等等。

或许一开始你会觉得这一切毫无意义，不过我向你保证，越往后你会越觉得自己当初的想法是错的。既然已经决定要当一名开发者，不管您智商有多高，在学习的时候尽量把自己先当成小白。有个人为你提供了一个学习的路线，如果你觉得这人还算靠谱，那就跟着试一下。

在线阅读：《CLI》

在《 网站 》系列课程里，设计开发的页面需要的样式用的是 SASS 的形式创建的。这是一种更灵活的创建 CSS 样式的方法，你可以少写很多东西也可以重复利用一些东西。一旦你了解了 SASS，应该不会再直接写 CSS 样式了。在课程里，我们会用到几个 SASS 的重要特性。

组织

用 SASS 创建样式，组织这些样式的方法也很多。你可以创建一个主要的 SASS 样式文件，然后把其它的样式文件包含进来，项目的自动化任务会为你编译好一个普通的 CSS 文件，这个文件你可以直接用在你的项目里。

组织的方法一般像这样，比如你创建了一个主要的 SASS 文件，名字是 main.scss，它里面的内容像这样：

@import "variables";
@import "mixins";
@import "base";
@import "navbar";

这个主样式文件里不包含具体的样式，它可以作为一个入口文件，在这里你可以把其它的样式文件导入进来，项目的自动化任务会把所有的样式编译生成一个普通的 CSS 文件（main.css）。

《 网站 》系列要做的页面都是响应式的，页面在很多不同尺寸的设备上都能很好地显示。用到的一项关键的 CSS 技术就是媒体查询：Media Query，后面我们还会介绍让 JavaScript 也可以根据设备的不同尺寸在页面上应用不同的脚本代码。

媒体查询

CSS 允许我们在样式表里设置一些样式应用的条件，你可以限制设备的类型（Screen，Print），或者视口（Viewport）的宽度范围。

比如你想单独为小尺寸的移动设备上去应用一些样式，这条媒体查询的条件用文字描述应该像这样：在小于等于 767 像素的 Screen 类型的设备上。如果用 CSS 的媒体查询表示出来，应该像这样：

《 网站 》系列的一开始， 我们就用 git 去下载了我提前准备好的一个初始项目。后来我一边制作课程，一边修改这个项目。这些修改我都用 git 保存下来，每次修改你都会看到一条日志，你可以使用 git 查看我对项目的每次修改到底都改了哪些地方。我把这些修改推送到了项目的远程仓库里，你可以执行 git 命令把我对项目做的修改拉取到存储在你本地电脑上的项目里面。

你用 sass 的形式写的样式，需要编译成普通的 css 样式，浏览器才能看懂。你可能创建了几个 sass 文件，但最终编译好的 css 文件确只有一个，如果你在编译 sass 的时候生成了 sourcemap，浏览器就能明白界面上的元素应用的样式到底来自哪一个 sass 文件。

导航栏上的标志

在《 网站 》系列课程隐藏了大量的技巧，它又提供了一个清晰的路线，让你清楚的知道做成一个页面都需要哪些东西，哪里不太理解你可以再找相关的课程去补。第四集，会去把之前设计好的导航栏，用 html，css，javascript 的形式表示出来。

拿到一个界面的设计，作为 Web 设计师，你得了解这个界面应该会用到什么类型的标签（html）去组织这个界面里的内容，你需要设计这些标签之间的关系，谁是谁的爸爸，谁跟谁是兄弟。我们需要使用 css 去给这些元素应用样式，在为页面上特定的元素应用样式的时候，你要写好样式的选择器，定位到页面上的特定的元素，在上面应用你需要的样式。

这一集你会看到怎么样把一个界面组件用代码的形式表示出来，用 html 组织内容，用 css 去添加样式，用 javascript 为界面添加交互功能。几乎都是实践，每个视频你都可以跟着动手练习，节奏适中。如果之前你没有了解过 Web 技术，这一集将是一个非常好的入门课。

设计：导航 - 移动端

在《 网站 》这个系列里面，我们会一起设计与制作一些页面上常用的界面元素，导航是页面上必备的元素之一。主导航的功能就是展示网站的内容结构， 它是用户访问网站不同区域的一个入口。这一集会先使用设计工具，设计导航在桌面设备与移动设备上的样子。课程后半部分介绍了使用 sass 创建的样式。

导航栏在桌面尺寸的设备上会显示在页面的顶部，导航栏上一般会有标志，菜单，还有一些工具，比如搜索或登录。我们设计的导航栏有两个状态，一个是正常状态，还有一个是搜索状态，就是点击导航栏上的搜索图标以后，会把导航栏上的标志与菜单隐藏起来，显示一个搜索框。

导航栏在小尺寸移动设备上有不同的样式，导航栏上的菜单会被隐藏起来，导航栏左边会显示一个菜单图标（汉堡包），点击这个菜单图标会在页面左侧显示一个边栏，边栏上的内容就是导航栏上的菜单。在下一集，我们会介绍使用代码的形式表示这个导航栏的方法。