设计师如何零基础学习前端代码，建立自己的网站
有两种设计师是我们常常看到的:一种在某一细分领域深耕，服务于工作流程的其中一环；另一种则掌握多元技能，尽可能覆盖工作流程中的更多环节，使得多种技能带来的不同视角融会贯通。对第二种设计师来说，掌握代码的能力是重要的一环，以此为前提，我们来探讨如何从零学习前端代码，码出自己的网站。
准备：
1.域名：在「万网」或者「Godaddy」等域名商购买域名。
2.完成域名备案流程。
3.购买阿里云的「对象储存OSS」空间。
4.安装Visual Studio Code软件。
5.注册一个Github账号，一个Codepen账号。
6.一两个会前端的程序员朋友（可选）。
7.菜鸟教程网（www.runoob.com）
要掌握的知识技能：
1.HTML知识
2.CSS知识
3.JavaScript基础知识
4.jQuery知识
5.Git知识
知识点实操： 现在开始学习。我的学习思路是学习任何一项新技能时，实操是最重要的，只有做出来东西，才能真正把知识刻进自己大脑里。以学习HTML为例，我是在菜鸟教程网开始学习的，每个知识点实例下面都有一个「尝试一下」的按钮，点击进入之后就可以自己修改、编辑代码并运行查看结果，不想使用他的编辑器也可以进入Codepen中编辑代码，Codepen的好处是美观而且是实时反馈的。Codepen可以在设置中开启Autocomplete（自动补齐），但建议初期不要开启以熟悉代码结构。
就这样一个知识点一个知识点的过，对每个知识点和实例的教程讲解理解了之后，立即自己从零开始写出来，也可以使用该知识点实现一些和教程里不一样的效果。自己理解并能写出来之后，如果觉得里面的知识点比较重要，就整理做下笔记。
知识点巩固： 在以边看边写的方式学完了所有知识点之后，就进入知识巩固阶段，这一阶段再从头快速回顾所有的知识点，每一个知识点都不要对照实例，自己码一遍。码的轻松的话就跳过，吃力甚至不能完成的话，就重新学习，直至可以脱稿码出。
此时每个知识点都可以封装好保存在Codepen里面，以后碰到相似的需求即可以直接拿来用，这样就形成了自己的知识树。
项目实操： 巩固阶段结束之后就可以找一个项目来临摹了。我是在学习了HTML和CSS之后找了Framer的首页去临摹。先用Sitesucker将Framer的页面文件下载下来以供参考，然后自己从零开始实现这个页面，只有在碰到实在实现不了的效果时才去参考下载下来的文件。以此方式将页面实现之后，删除所有文件，重新不参照下载文件去实现页面效果。循环此过程直至可以独立完成此页面。
使用以上学习方法大概掌握HTML、CSS和JavaScript基础之后，建议学习一下jQuery。原生JavaScript对于初学代码的人来说还是有一些难度的，但jQuery相比之下简单易上手，其宗旨即为「Write Less, Do More」，「选择-执行」的逻辑也非常通俗易懂。
网站的设计有以下几个部分需要注意：
1.网站logo，一般展示在header和footer，并用于网站favicon，有些情况还要在loading页面展示，所以在设计的时候要考虑这几种情况，确保所有情况都是最佳展示效果。
2.网站适配。我是适配了超宽屏（iMac）、高清屏（Macbook Pro 1665px宽）、iPad Pro（1024px宽）、iPad（768px）和 手机屏（375px-414px宽），在设计的时候要把各个尺寸的屏幕考虑进去，做到心中有数，最好把各个宽度的设计稿都做出来以调整细节。
3.空状态。若网站中会出现空状态，则需要把空状态设计出来。
4.占位图。在网络状况不理想的情况下，图片等资源加载出来需要一定的时间，在其加载出来之前需要有占位图填充以确保布局和显示效果完好。
5.字体。若使用非系统字体，则最好确保字体文件不要太大，以免提高加载成本。若无法削减字体大小，则可通过第一次进入网站的时候强制载入loading动画来争取加载时间，尽可能使用户进入首页的时候字体已经加载完毕，有最好的显示效果。
6.页面布局。在设计页面布局的时候要考虑其代码实现方式、后期可扩展性以及各种设备的适配，避免过分追求复杂效果。
交互方面主要有四大块：loading交互动效、悬浮交互、点击交互和滚动交互。悬浮交互是桌面端的交互方式，在设计时也要考虑没有悬浮动作的移动端如何表现。在悬浮交互中顺滑感非常重要，一般要给一定时间的曲线渐变，避免瞬间突变的生硬感，另外也要注意交互反馈的时间，时间太长给人一种迟钝的感觉，太短又可能让人看不清交互内容。不同场景下交互反馈的时间也是不一样的，根据实际情况和效果来决定。在做悬浮交互的时候，一定要考虑到每个小模块，所有小交互细节的叠加，才能提升整个网站的体验。
滚动交互若为页面锚点定位滚动，则要加上平滑滚动属性：html, body { scroll-behavior:smooth; }，可使滚动平滑；若为页面元素位置或内容根据滚动距离改变的交互，则需要精细调节每个元素的效果。
建议所有交互效果都要使用Framer等动效工具做出参数化效果，其参数可以在代码实现的时候直接使用。
到这一步的时候，学习过程中积累的知识树就派上用场了，可以把网站的功能拆分成最小的模块，去Codepen里面找对应的知识点，做网站的过程，就是把一些模块拼起来的过程。完成基础模块之后你会发现，之前学习的基本知识可能不足以满足网站的需求，这时候就要分三步走了：第一是使用插件，第二是谷歌，第三是请教程序员朋友。成熟的插件在满足功能的同时可以替我们节省大量的劳动，自己不能做出优质效果之前，使用插件是个很好的选择。但插件不能滥用，用多了插件可能会拖慢网站速度。我在项目中只使用了jQuery和Swiper插件。
使用插件解决了一部分问题，但我们还会碰到插件解决不了的问题，这时候就谷歌吧（不要百度，谷歌出结果更精准），一般都能找到解决办法。谷歌之后也解决不了的问题，就向前端工程师朋友求助，往往他们能提供更简洁高效的解决办法，还附带一些经验。比如之前碰到一个只在iPhone上出现的问题，找不到原因，前端朋友就告诉我可以通过Mac上的Safari调试手机页面。
实现每个模块的过程中都要注意调整该模块在各个宽度设备中的显示效果，这是个细致活，要想获得比较完美的效果，就要一点一点的抠细节，所有精美的作品无不是拥有着精美的细节。
当你完成了基本的模块搭建、细节调整，网站看起来好像不错了，此时先别高兴太早，在各种设备多用一段时间，给好朋友体验一下，你们会发现有很多bug。此时要做的就是，一条一条的记录下bug，一条一条的修。
完成了以上步骤，你的网站应该可以上线了。这时，进入阿里云的「管理控制台」-「对象储存OSS」，新建一个Bucket，将你的网站文件上传到该Bucket里（使用阿里云的OSS Browser进行操作比较方便），然后来到Bucket的「域名管理」，点击「绑定用户域名」，绑定你已经备案好的域名，你的网站瞬间就上线了！
Linux创始人Linus Torvalds说：「Talk is cheap,show me the code.」我觉得所有事情都一样，并非否定思考的价值，而是大部分情况下，缺少实践反馈的思考的价值很值得怀疑。想做什么，立即动手。从开始学习代码，到网站上线，碰到了无数的问题，但也让我体会到了学习和解决问题的乐趣。
下面是在这个过程中用到的一些教程和工具，分享给大家：
1.张鑫旭老师讲解CSS的课程，很深入很形象，对理解CSS很有帮助。另外他还有本书叫《CSS世界》也很值得读。张鑫旭CSS深入理解课程
2.一键生成favicon工具，这个网站可以一键生成各种尺寸和格式的favicon文件，甚至还可以给出代码。Favicon Generator
3.SiteSucker，这个软件可以把网站文件完全下载下来供你学习。
4.Framer首页的项目练习文件，提取码：q2up。Framer项目练习文件
