博客

这是宁皓网在页面设计实战课程里做的一个项目，课程的目的是熟悉网页设计，项目里用了一些社区提供的资源，比如 Semantic UI 样式框架，Material Design 小图标，Slick Carousel 幻灯片 ... 项目主要的样式是我们自己一步一步写好的，写样式的时候用了 Sass ，这个实战课程里包含了大量的页面设计技巧，完整的展示了页面设计流程。

之前的开发流程比较复杂，很多同学反应配置开发环境的时候出了很多问题。我们重新修改了开发流程，让整个项目只有一个依赖（Sass），极大简化了开发流程，大家可以专注于页面设计本身。

演示地址：https://demo.ninghao.net/landrover-ui
课程地址：https://ninghao.net/package/website

（极速演示）详细内容参考：https://ninghao.net/course/8552

今天跟大家聊一下网页设计怎么做。网站仍然是用户最容易接触到你的产品与服务的平台，只需要一个地址，不用下载与安装，就能立即使用你提供的产品与服务。用前端框架开发出来的应用极大改善了网站的使用体验，很多事情你可能也只想在网站上完成，比如我最近经常用的一个叫  Quip 的写作工具，它提供了不同平台的应用，但我只想使用 Quip 的网站。

你打算做一个网站，开发一个前端应用，你可以先把应用的界面做出来。你的应用要在浏览器上运行，界面的样子主要是由 HTML 与 CSS 组成，处理界面的行为会用到 JavaScript。一开始，我们可以不考虑界面上的行为，只专注应用界面的样子，你可以先用设计工具画出界面的样子，然后用 HTML 与 CSS 把界面表达出来。

最近发现几样好东西，忍不住跟大家分享一下，顺便也寻了些视频，足够让同学们可以起动使用这些东西。我发现了一个很好的用户界面原型与设计工具：Adobe XD，CSS 的网格（Grid）布局，还有一个叫卡夫卡（Kafka） 的东西。（这个标题是不是有点标题党的嫌疑 ：）

用户体验设计（Adobe XD）

在动手编写应用代码之前，你可以选择一款设计与原型工具，把网站或者应用的样子还有状态先做出来看看。Adobe XD 就是这样一款用户界面与用户体验的设计与原型工具。它跟 macOS 上用的 Sketch 应用是同一类的东西。不过我觉得有了 XD ，我的 Sketch 应该可以搁起来了。

在双方都不加装插件的情况下，XD 的使用体验要胜过 Sketch。它让我重新觉得做设计与原型是件挺快乐的事儿，虽然 XD 能做的，在 Sketch 上安装一些插件之后也大概可以做到，但是使用体验还是不能相比。

参加小白兔的开发之路自由行的同学们，现在你可以自己在本地架设一个学习网站，启动本次的开发之旅：）

网站预览：https://xb2.ninghao.net

终于完成了史上最完整的应用开发学习路线的录制工作，目前已耗时 650+ 小时，无数杯咖啡，整理的文字资料有 40+ 万字符，490+ 个视频，内容覆盖开发工具、语言，框架与思路，这是一条真正的可以从零开始跟着走的应用开发学习路线。现在只是完成了录制，还得做后期制作，1 分钟的视频大概需要用 6 分钟的后期制作与编辑的时间。

我们在这条学习路线里，会基于 Node.js 架构开发一个服务端应用。一切以实际需求出发，需要什么就学什么。我们会学习几种开发语言，比如  JavaScript，TypeScript 还有  SQL（数据查询），还要学习在任何应用开发工作流程里都会用到的工具，比如命令行，版本控制（Git），Github...

最终我们会在阿里云购买一台云服务器，练习使用 Linux 类型的操作系统，充分理解以后，我们再去搭建一个应用的生产环境，比如安装配置各种需要的服务，配置反向代理，申请 SSL 证书等等。然后再把应用迁移到这个生产环境上运行。

在这条应用开发学习路线里，我把每个关键的概念，语法，思路都做了解释。也就是你不仅可以跟着操作，也能清楚的知道自己正在做什么，为什么要这么做。

Deno 是一种 JavaScript 运行环境，可以基于它开发服务器应用。JavaScript 语言可以在浏览器里运行，还可以在 Node.js 提供的环境里运行，现在我们又多了一个选择，就是在 Deno 环境里运行。在本地电脑上安装 Deno，可以使用系统的包管理工具，比如 macOS 的 Homebrew，Windows 系统的 Chocolatey。不过使用这些包管理工具安装的 Deno 的版本可能会比较低，所以我推荐用 Deno 提供的安装脚本。

用 JavaScript 语言写的应用里会有一些异步（Asynchronous）的动作，就是执行这些动作的时候不能马上得到结果，这个动作需要点时间。处理应用里的这些异步的行为有几种方法，比如可以使用回调函数（Callback），可以使用 Promise，也可以用 async 函数。

Callback

定义一个函数的时候可以让这个函数支持使用一个函数参数，这个函数参数就是 Callback，也就是回调。使用这个函数的时候可以给它提供一个函数参数，也可以说给它一个 “回调”。

示例：

图： Alex Pasquarella

最近为大家规划了一条可以真正从零开始的，迄今为止也最完整的应用开发学习路线，它有个可爱的名字叫《小白兔的开发之路》。这条路线会为你提供足够的工具，思路，概念与技巧。无论你是什么背景，这条路线都可以让你成为一名开发者。

设计这条路线至今我已经用了 500 多个小时，每个景点都是用心设计过的。途中涉及到了很多技术，从开发工具，到开发语言，应用框架，数据仓库，自动化测试，再到搭建云服务器与部署应用。全部都是精华，绝对不讲废话。

以往的学习路线都是把一些不同的课程拼凑到一起，这么做的最大的问题就是不连贯，你很难找出课程与课程之间的连接点。《小白兔的开发之路》是一条非常连贯的学习路线。比如在介绍数据仓库的时候，搭建好数据仓库服务，练习了基本的数据查询方法之后，马上就会到应用中去实践，做出一个功能。

问题会不断出现，Bug 也永远都存在。不要试图解决所有问题，因为那是不可能的事情，问题会不断地涌现出来，不过这是好事，因为只有遇到了具体的问题，你才知道如何解决问题。掌握了基本的技能与工具就可以开始去做很多事情了，任何事情都是这样的。

比如你有个想法，打算自己驾驶一辆汽车去一个地方，你要做的就是先准备好基本的技能与工具。你需要一辆车，要学会驾驶，了解交通规则，这些就是你要自驾所需要的基础技能与工具。这就够了，在路上你可能会不断地遇到新的问题，适应各种路况，跟不同的人打交道，你永远都无法预估到遇到的所有问题，所以也就没有 “准备好” 这一说法，你要做的就是问题出现的时候，要想办法解决它。还好，问题不会同时出现 ，会留给你一定的时间与空间去解决现有的问题。

开发也是一样的，你想开发一个应用，掌握基础以后，就可以开始动手去做，遇到问题再想办法解决。不要害怕问题，也不要追求准备好这种状态，因为这是不存在的。《小白兔的开发之路》就是训练你的基本开发技能，给你足够的技术与工具，让你可以起步去做你想要的应用。