现在我们可以把这个布局设计用 html 还有 css 的形式表示出来，这样这个布局设计就可以用在网站或者应用里了。打开终端，先创建一个项目，进入想要保存项目的地方，创建一个目录，名字是 ninghao-ux。进入到这个目录里面，然后再用编辑器打开这个目录。

在这个项目里创建一个 html 文档，放在 views 目录的下面，文件的名字是 layout.html，在 vscode 编辑器里，输入 ! 号按一下 tab 键可以得到一个基本的 html 文档的结构。这个是编辑器的 emmet 插件提供的功能。

修改一下页面的标题。

然后再去创建一个样式表，放在 assets/css 这个目录的下面，名字是 page.css， 回到 layout 这个网页，在 head 标签里面，可以链接刚才创建的这个样式表，位置是上一级目录 assets ，css 目录里的 page.css 。

打开命令面板，输入 live，执行一下 open with live server， 这样会创建一个本地服务器，然后打开当前这个网页。这个是 live server 插件提供的功能。

回到终端，在项目下面，执行 git init ，初始化一个仓库， 添加所有的东西，然后再做一次 commit ，日志是 init 。

下面可以再去创建一个开发分支，并且切换到这个分支上，名字是 develop，然后基于这个创建再去创建一个分支，并且切换到这个分支上，名字是 layout 。