#001 统计内容清单
运行时间：22:08
欢迎！这将是一段相当长的旅程，就像所有的旅程一样，这段旅程始于第一步。我们的第一步是统计 CSS-Tricks 上的内容。从这一点开始意味着我们不会……
大型 v10 重设计项目
一个非常详细的旅程，贯穿整个网站的重设计过程。事实上，就是这个网站。
#003 内容策略会议
运行时间：55:27
这是 Erin Kissane 和我之间通过 Skype 通话的音频录制。Erin 写了一本书关于内容策略，所以我很幸运能得到她的帮助和分析。
从内容策略开始，那些……
#004 在 Photoshop 中开始，背景纹理和主要品牌
运行时间：9:38
在浏览器中设计很酷，但从 Photoshop 开始让我在最需要的时候保持最大的创造力：面对空白画布。对抗白色刺眼的一种方法是……
#005 添加轻微的维度
运行时间：6:08
我们在主要标题/品牌框下方添加了一些额外的图层，以呈现“纸张堆叠”的外观。没有大的隐喻或任何东西，它只是增加了一些视觉趣味，并为我们提供了一些东西，在我们转向其他……
#006 使用 Photoshop 设计主导航
运行时间：16:18
我们开始设计网站的顶级（主）导航。我们从桌面尺寸屏幕（以一个公认的任意宽度）开始，但我们不担心导航在适应小屏幕时会遇到任何问题。
我们……
#007 将图标和文本使用 Photoshop 放入导航
运行时间：13:13
我们开始将文本放入主导航，只是为了看看它如何适应，处理大小、颜色等。一些文本非常紧凑，但这没关系，我们会腾出空间，尤其是在它变成……
#008 使用 Photoshop 设计模块模式
运行时间：13:52
整个网站将基于“模块”。每一件小事都将从字面上放在一个框中（最终在视觉上和代码中）。我们从最近的博客文章的模块开始……
#009 设置我们的本地开发环境
运行时间：9:26
对于这个设计，我们当然不会永远“完成”Photoshop，但我们有足够的东西可以开始在浏览器中创建这个设计。毕竟，我们正在构建一个网站，而不是一个网站的图片……
#010 开始编写 HTML
运行时间：14:19
在查看我们的 Photoshop 模型的同时，我们开始编写 HTML 来描述我们正在查看的内容。我们当然会在有意义的时候使用 HTML5，尽可能地保持语义化。例如，我们使用……
#011 规范化我们的 CSS 基础
运行时间：5:04
从大多数元素中删除用户代理（默认）CSS 通常是一个好主意。这长期以来一直通过“通用”重置或诸如 Eric Meyer 重置 之类的东西来完成。我认为今天最好的选择是 Normalize.css。
一个……
#012 使用 CSS 设计头部/徽标
运行时间：17:23
到目前为止，实际的网站看起来根本不像我们的 Photoshop 设计。在这个屏幕录制中，我们深入研究如何做到这一点，从顶部开始，包括我们的标题和徽标区域。很高兴拥有一个……
#014 使用 Typekit 自定义字体
运行时间：10:14
我们在 Typekit 中为 v10 设置了一个新的 Kit。为了品牌推广，我们现在将使用 Proxima Nova Soft，以及其他一些看起来尽可能接近我们模型中 HF&J 字体的字体。
我们有点担心……
#016 在 Sass 中使用媒体查询
运行时间：11:06
我们介绍了 CSS 中@media查询的概念。
在这个项目中使用 Sass 允许我们做的事情很多，就是保持 DRY（不要重复自己）。我们在设置颜色和大小变量时做到了这一点。我们在……
#017 使用 MAMP 设置本地 URL
运行时间：2:54
在这个超快的屏幕录制中，我们使用 MAMP 设置一个我们可以用于本地开发的 URL。这由于很多原因很有用
- 我们可以通过从根目录开始的相对链接链接到资源，例如
background:
#018 使我们的项目使用 Compass
运行时间：10:51
我们可以编写我们自己的 Sass @mixin来帮助处理 CSS3 方面的内容（如渐变），但是已经存在一个名为 Compass 的 Sass 框架，它已经准备好了这些内容。它需要一点……
#019 构建一个简单的网格
运行时间：9:31
网站设计正在形成一个非常网格化的形状。我们的模块将非常整齐地排列成网格。但是网格复杂而奇怪吗？也许我们应该使用一些花哨的框架？不。它们很容易……
#020 完成网格并设置模块
运行时间：5:39
继续““不要过度思考网格””的概念，我们通过使用一些简单的填充来实现网格中的间距。我们通过重复使用我们的全局$padding变量来保持填充数字一致。你会发现我们使用……
#021 分解成可包含的部分
运行时间：9:07
现在我们正在运行一个自定义本地域名，我们可以使用 PHP。“P”代表“PHP”，也就是 MAMP 中的 PHP =)。使用 PHP 意味着我们可以使用 include。例如
<?php include("header.php"); ?>我们的目标是创建一个静态……
#022 灵活的图像（图片和图片说明）
运行时间：7:18
在我们进行一些排版工作之前，我想我们会修复图像超出文章区域和网格的烦人问题。使用一些简单的 CSS 规则来覆盖内联图像属性和样式，我们……
#023 将排版从 Normalize 中移出
运行时间：7:00
我认为拥有一个单独的文件（.scss），用于网站上绝大多数的排版，是非常好的。Normalize 已经包含了相当多的与排版相关的元素，所以让我们删除它并将其移动……
#024 在 Typecast 中玩排版
运行时间：7:35
Typecast（在拍摄时处于测试阶段）是一个非常棒的网络应用程序，用于处理网络排版。它为您提供了一个很棒的界面，用于处理排版的基础知识，例如您的标题和正文……
#025 文章排版，第 1 部分
运行时间：19:03
现在我们有了一个可以使用的博客文章区域，我们可以真正深入到博客文章的排版中。可以说这是网站上最重要的排版，因为它是读者花费最多时间查看的地方……
#026 文章排版，第 2 部分
运行时间：16:12
我们已经对标题做了一些工作，但我们将在本次屏幕录制中更深入地探讨它们。标题是任何网站都非常重要的一个方面。做好后，我们的朋友 h1 到 h6 应该服务于几乎所有……
#027 代码语法高亮，第 1 部分
运行时间：14:19
从我记事起，我就一直使用 Google Code Prettify 来在 CSS-Tricks 上的代码块上应用语法高亮。您知道，在像<div>test</div>这样的行中，<div>部分的颜色与……
#028 代码语法高亮，第 2 部分
运行时间：11:40
我们刚刚安装了 Prism.js 并使其工作。
在这个屏幕录制中，我们找到了一个名为 Tomorrow 主题 的主题，并将它的颜色整合到语法高亮中。我们在文件顶部制作了一个小的颜色键，用于……
#029 集成 FitVids.js
运行时间：7:04
图像不是唯一需要在我们的灵活网格中正常播放的媒体。与视频相比，图像很容易！当您设置<img>的width并覆盖其height值到auto时，图像将……
#030 为导航创建页面存根
运行时间：5:37
我们有这八个顶级导航选项卡，但“首页”是唯一“起作用”的。为了让我们有一些页面可以使用，我们为所有其他选项卡创建了一些页面存根。
因为我们很聪明……
#031 当前导航高亮
运行时间：1:49
在这个超快速的视频中，我们添加了所有必要的 CSS，以确保在页面处于活动状态时，主导航中的当前页面项目会被高亮显示。事实证明，我们已经有点做到了这一点，因为我们……
#033 使用 Photoshop 设计搜索
运行时间：14:39
CSS-Tricks 上有很多内容。这使得它的设计有点挑战性。虽然我们可以保持设计的简洁，但考虑到内容数量之多，我们可能无法做到“极简”……
#034 构建搜索，第一部分
时长：17:50
现在我们已经用 Photoshop 设计好了希望搜索区域达成的效果，接下来我们将使用 HTML 和 CSS 来构建它。我们已经加载了图标字体，所以将其放置在页面上。Font Explorer X……
#035 阻止 Typekit FOUT
时长：3:34
我们在构建搜索的过程中稍微停顿一下，解决一个小问题。
“FOUT” 代表 “未设置样式文本闪现”。这是一种现象，即 @font-face 字体需要一些时间加载，因此您会看到回退……
#038 添加按钮状态
时长：2:48
我们已经创建了按钮在常规状态下的外观，但是这样的 3D 按钮需要一个“按下”状态。我们所做的是在 :hover 和 :focus 状态下为按钮添加更深的颜色。然后……
#039 Photoshop 设计顶部 Treehouse 广告
时长：8:03
我们在页眉留出了很大的空白区域。从一开始，我就知道这将是 CSS-Tricks 主要赞助商 Treehouse 的广告位。在这个屏幕录制中，我们开始设计他们的广告……
#040 构建顶部 Treehouse 广告，第一部分
时长：11:04
我们最初打算直接使用 HTML 和 CSS 来构建刚刚设计的顶部 Treehouse 广告，但当然，一旦我们开始调整徽标及其行为方式，就会偏离轨道……