博客

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

家庭需要参与，别等事情变得更糟。儿子就像中间人，得在各方面去调节家庭关系。我之前路数是捂朵不听，闭眼不见，觉得自己有更重要的事情要做，家庭琐事根本不需要在乎。直到这些琐事引起的 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 创建的样式。

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

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

商业网站

线框图（Wireframe）就是抽象化以后的具体的页面。页面的线框图一般没有具体的设计元素，都是用一些图形来表示页面上即将要出现的元素。制作页面的线框图，一般是在确定了想法之后，在具体设计之前。用最简单的东西把你的网站或应用的界面表示出来，主要就是把页面的布局，或者框架先定下来。然后再去设计具体的元素。

《 网站 》第二集，我们用 Sketch 设计工具，为即将要设计与制作的网站首页先做了一张线框图，让你对页面的结构有个大概的印象。在做线框图的时候，你应该已经先确定了想法，就是要做的页面的功能是什么。比如一张产品介绍页面，它的主要功能就是介绍产品本身，你的设计要配合页面的功能来完成目的。

我们要先做一张网站的首页，假设网站属于一家生产汽车的公司。首页是最常用的登陆页（Landing Page）， 你的用户很可能是通过首页认识你的。首页也就经常是用户对你的第一印象。我们可以通过一些常见的元素来传达一些信息，我是谁，我能为你做什么，我提供了什么样的产品与服务，我的用户如何使用我们的产品，我需要你做些什么，比如下载试用版的应用，报名参加体验活动。

本地服务器

工欲善其事，必先利其器。

做什么都需要一套工具，你使用这套工具完成任务，这个过程就是工作流（Workflow）。我们要开始学习 Web 设计与开发，同样需要一套工具，也要有自己的一套工作流。在《 网站与应用：商业 》第一集里，介绍了 Web 页面设计与开发的一套工作流。了解自己要使用的工具可以更有效地工作。