写给设计师的个人网站搭建指南:代码学习大纲
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