写给设计师的个人网站搭建指南(二):代码学习大纲 2021-04-18

我认为对于设计师来说,在学习代码的过程中,有两点是非常重要的:

  1. 知道学习的目的和要学到什么程度。
  2. 理解学习的不同东西间的相互关系。

先来理解第一点:知道学习的目的和要学到什么程度。

其实就像学习做饭一样,给自己做饭和去米其林餐厅应聘是不一样的,我们首先得知道学习的目的什么,才能明确要学到什么程度。

本来我们的目标就是会做家常菜即可,但偏偏按照大厨的标准要求自己,上来就学三个月刀工,这明显就是不合理的。

学习代码也是一样,如果仅仅是为了搭建自己的个人网站,第一阶段需要认真学的东西只有两个:HTML 和 CSS。我们并不是程序员,只是需要一些技术手段来表达,所以 HTML + CSS 已经够用了。当然,踏踏实实的把这两部分内容理解通透之后,再去了解 JS 也不迟。

我们再来看看第二点:理解学习的不同东西间的相互关系。

还是以做饭为例,我们需要了解过程中不同的原料、厨具、调料之间的配合关系:什么原料该用什么刀处理、在什么时候放油最合适、不同的菜火候该如何把握。

在搭建个人网站的过程中,也不是学习完 HTML 和 CSS 就完事大吉了,也需要非常多的其它知识来辅助你达到最终的目标,我们也需要理解不同技术间的关系,来掌握其中的“火候”

下面是我总结的学习大纲,包含了搭建网站过程中所需的几乎所有方面:

学习大纲

1. 软件工具:VSCode、SourceTree

VSCode 是用来写代码用的,SourceTree 是当我们使用 Github 托管代码时管理用的,都是必不可少的基础工具。

对于 VSCode,我们需要学习它的快捷键和安装适合的插件,这样可以大大提升开发的效率。

对于 Soursetree 来说,它其实是 Git 的可视化操作,所以首先需要先了解 Git 的基本用法,然后用 Soursetree 管理你托管在 Github 上的代码。

📕 学习资料:

VSCode 配置教程:https://zhuanlan.zhihu.com/p/113222681

SourceTree 安装教程:https://juejin.cn/post/6844903620454907911

猴子都能懂的 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://learn.freecodecamp.one/

📙 课外阅读:

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

CSS Grid 网格布局教程:https://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html

###2. 进阶语言:Pug、SASS

用 Pug 和 SASS 写出来的东西,最后都会被编译为 HTML 和 CSS,你可以理解为这是是两个传话筒,你可以用一种更简单的方式表达,但传话筒会把他们翻译成浏览器听的懂的语言。

📕 学习资料:

Pug 文档:https://www.pugjs.cn/api/getting-started.html

SASS 用法指南:https://www.ruanyifeng.com/blog/2012/06/sass.html

📙 课外阅读:

Stylus(另一种 CSS 的写法,比 SASS 更加简洁):https://stylus.bootcss.com/

3. CSS 框架:Bootstrap、Bulma

简单理解,就是我们从头开始做东西太难了,所以有人帮我们做了半成品,这类东西就是提前帮我们写好的 HTML 和 CSS,我们只需要拿着这些东西拼凑就可以开始做网站了。好处是做起来非常快,但毕竟是别人做的,坏处就是改起来会比较麻烦,而且做出来的网站会很雷同。

📕 学习资料:

Bootstrap 官网:https://v4.bootcss.com/

Bulma 官网:https://bulma.io/

📙 课外阅读:

Tailwind 官网(有独特理念的 CSS 框架):https://tailwindcss.com/

4. 包管理器: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

7. 代码托管: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/#/

###8. 自动部署平台:Vercel

这是我们用来将网站自动部署上线所使用的服务,依赖 Github 的代码仓库。

📕 学习资料:

Vercel 官网:https://vercel.com/

📙 课外阅读:

Netlify官网(另一款类似的服务):https://www.netlify.com/

10. 了解框架:Vue、React

Vue 和 React 都是用于构建用户界面的 JavaScript 框架,所以它们并不是一种语言,JavaScript 是一种语言,它们是用 JavaScript 写出的不同框架。

如果要学习框架,是务必需要先学习 JavaScript 基础的。

📕 学习资料:

Vue:https://cn.vuejs.org/v2/guide/index.html

React:https://zh-hans.reactjs.org/

7. 信息源:

这里是我大部分获取最新技术信息的来源,我的理解是信息源在精不在多,也希望大家能去降低自己获取信息的密度。

📕 学习资料:

国外关于技术的讨论精选:https://hackernewsletter.com/

有关 CSS 的技巧和思考:https://css-tricks.com/

在线各种 CSS 的效果案例:https://codepen.io/

很有趣的周刊,涉及面较广:http://www.ruanyifeng.com/blog/2021/04/weekly-issue-154.html

📙 课外阅读:

湾区日报(关于创业与技术的文章):https://wanqu.co/

Josh Wcomeau(一个前端工程师的个人博客,擅长研究 CSS 动画):https://www.joshwcomeau.com

Indie Hackers(国外独立开发者社区):https://www.indiehackers.com