写给设计师的个人网站搭建指南：代码学习大纲
date
Jul 24, 2021
slug
code-learning-outline
status
Published
tags
Website
Design
VScode
HTML
CSS
Pug
SASS
Bootstrap
Bulma
npm
iTerm2
Github
Jekyll
Vercel
Vue
React
summary
其实就像学习做饭一样，给自己做饭和去米其林餐厅应聘是不一样的，我们首先得知道学习的目的什么，才能明确要学到什么程度。
type
Post
我认为对于设计师来说，在学习代码的过程中，有两点是非常重要的：
- 知道学习的目的和要学到什么程度。
- 理解学习的不同东西间的相互关系。
- 先来理解第一点：知道学习的目的和要学到什么程度。
其实就像学习做饭一样，给自己做饭和去米其林餐厅应聘是不一样的，我们首先得知道学习的目的什么，才能明确要学到什么程度。
本来我们的目标就是会做家常菜即可，但偏偏按照大厨的标准要求自己，上来就学三个月刀工，这明显就是不合理的。
学习代码也是一样，如果仅仅是为了搭建自己的个人网站，第一阶段需要认真学的东西只有两个：HTML 和 CSS。我们并不是程序员，只是需要一些技术手段来表达，所以 HTML + CSS 已经够用了。当然，踏踏实实的把这两部分内容理解通透之后，再去了解 JS 也不迟。
- 我们再来看看第二点：理解学习的不同东西间的相互关系。
还是以做饭为例，我们需要了解过程中不同的原料、厨具、调料之间的配合关系：什么原料该用什么刀处理、在什么时候放油最合适、不同的菜火候该如何把握。
在搭建个人网站的过程中，也不是学习完 HTML 和 CSS 就完事大吉了，也需要非常多的其它知识来辅助你达到最终的目标，我们也需要理解不同技术间的关系，来掌握其中的“火候”
下面是我总结的学习大纲，包含了搭建网站过程中所需的几乎所有方面：
学习大纲
1. 软件工具：VSCode
VSCode 是用来写代码用的，SourceTree 是当我们使用 Github 托管代码时管理用的，都是必不可少的基础工具。
对于 VSCode，我们需要学习它的快捷键和安装适合的插件，这样可以大大提升开发的效率。
对于 Soursetree 来说，它其实是 Git 的可视化操作，所以首先需要先了解 Git 的基本用法，然后用 Soursetree 管理你托管在 Github 上的代码。
📕 学习资料：
VSCode 配置教程：https://zhuanlan.zhihu.com/p/113222681
猴子都能懂的 GIT 入门：https://backlog.com/git-tutorial/cn/
📙 课外阅读：
Webstorm（更强大的代码编辑器，内置功能丰富）：https://www.jetbrains.com/webstorm/
Atom（以颜值高著称的代码编辑器）：https://atom.io/
VIM 教程（一种极为技术的操作方式）：https://coolshell.cn/articles/5426.html
2. 基础语言：HTML 和 CSS
我们会用这两种种语言来和浏览器描述我们想要的效果，简单来说，HTML 是描述结构的，CSS 是描述效果的。就像毛坯房和装修的关系一样，我们先用 HTML 来搭建起房子的基本结构，然后再用 CSS 来装修。
📕 学习资料：
HTML + CSS 在线教程（学习 响应式 Web 设计 部分）：https://www.freecodecamp.org/
📙 课外阅读：
HTML + CSS 文档（当字典看）：https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web
Flex 布局教程：语法篇：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
3. 进阶语言：Pug、SASS
用 Pug 和 SASS 写出来的东西，最后都会被编译为 HTML 和 CSS，你可以理解为这是是两个传话筒，你可以用一种更简单的方式表达，但传话筒会把他们翻译成浏览器听的懂的语言。
📕 学习资料：
📙 课外阅读：
Stylus（另一种 CSS 的写法，比 SASS 更加简洁）：https://stylus.bootcss.com/
4. CSS 框架：Bootstrap、Bulma
简单理解，就是我们从头开始做东西太难了，所以有人帮我们做了半成品，这类东西就是提前帮我们写好的 HTML 和 CSS，我们只需要拿着这些东西拼凑就可以开始做网站了。好处是做起来非常快，但毕竟是别人做的，坏处就是改起来会比较麻烦，而且做出来的网站会很雷同。
📕 学习资料：
Bootstrap 官网：https://v4.bootcss.com/
Bulma 官网：https://bulma.io/
📙 课外阅读：
Tailwind 官网（有独特理念的 CSS 框架）：https://tailwindcss.com/
5. 包管理器：npm
我们在搭建一个网站的时候，我们有时不需要每个功能都自己写，所以会依赖很多其它的代码库，这个时候用什么管理呢？就是使用 npm，我们通过在终端敲一些命令，就可以做安装、升级、卸载等操作了。
📕 学习资料：
npm 中文文档：https://www.npmjs.cn/
📙 课外阅读：
yarn 中文文档（另一个包管理器）：https://yarn.bootcss.com/docs/
6. 终端：iTerm2
我们在操作 npm 和在本地启动服务时，必须用到终端，你可以理解为是有些功能是没有图形化界面的，只能在终端通过命令行来使用，你也可以在 VSCode 中调出自带的终端工具。
也可以下载 iTerm2，这是一个第三方终端工具，更加强大和好用，也能通过一个叫 Oh My Zsh 的第三方工具来加强和美化它。
📕 学习资料：
iTerm2 + Oh My Zsh：https://juejin.cn/post/6844904178075058189
📙 课外阅读：
Hyper（一个新的终端工具，特点是高颜值）：https://hyper.is/
7. 浏览器调试工具
其实浏览器自带了可以让我们直接编辑网页预览效果的工具，在 Chrome 浏览器中按下
⌥⌘I就可以调出调试工具，此时我们就可以直接调整网页上的样式，一方面自己调试会更加方便，另一方面也可以去看看自己喜欢的网站都是怎么实现的📕 学习资料：
Chrome 调试技巧：https://www.yuque.com/fe9/basic/gcawte
8. 代码托管：Github
Github 是一个基于 Git 的代码托管平台，我们需要把代码放到 Github 上，之后通过下面的自动部署平台来生成我们的网站。
📕 学习资料：
Github 官网：https://github.com/
📙 课外阅读：
程序员常逛的 Github，原来是个隐藏的学习网站：https://sspai.com/post/58120
9. 静态网站生成器：Jekyll
用静态网站生成器可以把 Markdown 转为 HTML，非常适合用来做博客或者文档网站。
📕 学习资料：
Jekyll（适合做博客）：https://www.jekyll.com.cn/
认识与入门 Markdown：https://sspai.com/post/25137
📙 课外阅读：
Vuepress（适合做文档或博客）：https://vuepress.vuejs.org/zh/
Hexo（适合做博客）：https://hexo.io/zh-cn/
docsify（适合做文档）：https://docsify.js.org/#/
10. 自动部署平台：Vercel
这是我们用来将网站自动部署上线所使用的服务，依赖 Github 的代码仓库。
📕 学习资料：
Vercel 官网：https://vercel.com/
📙 课外阅读：
Netlify官网（另一款类似的服务）：https://www.netlify.com/
11. 了解框架：Vue、React
Vue 和 React 都是用于构建用户界面的 JavaScript 框架，所以它们并不是一种语言，JavaScript 是一种语言，它们是用 JavaScript 写出的不同框架。
如果要学习框架，是务必需要先学习 JavaScript 基础的。
📕 学习资料：
12. 信息源：
这里是我大部分获取最新技术信息的来源，我的理解是信息源在精不在多，也希望大家能去降低自己获取信息的密度。
📕 学习资料：
国外关于技术的讨论精选：https://hackernewsletter.com/
有关 CSS 的技巧和思考：https://css-tricks.com/
在线各种 CSS 的效果案例：https://codepen.io/
📙 课外阅读：
湾区日报（关于创业与技术的文章）：https://wanqu.co/
Josh Wcomeau（一个前端工程师的个人博客，擅长研究 CSS 动画）：https://www.joshwcomeau.com
Indie Hackers（国外独立开发者社区）：https://www.indiehackers.com