【网页】中西结合，效果好
这个月写文码字有点少了，因为我去码代码去了，十一的时候主要以宅家为主，因此为了找点刺激，决定重刷HTML/CSS，到今天为止，我终于能够写出简易的网站啦~，鼓掌。
成果：
这个网站是我学代码一个月的学习成果，从设计到代码一站式自主研发~。就是估计代码有点点丑。。
为什么学代码
首先我本身对代码就有兴趣，没别的高尚的原因，就因为它好看呀~五颜六色的多美丽~
其次我一直在思考一个问题，设计师这个职业应该是近代才慢慢开始的新兴职业，但你说之前第一个做椅子的人，他是设计师么？应该也算吧，那是先有椅子的图纸，还是就直接做出来了呢？估计图纸在他的脑袋里，而第一个做椅子的人，应该是设计师和工程师的合体，因此，我在想说是否我知道点制作网页设计的材料和工艺也是有必要的呢？
而做网站的基本材料就是HTML和CSS还有Javascript，因此把这些材料拿来看一看，摸一摸，试着拼接一下，不求搭起一座摩天大楼，只求搭一把小椅子，自己能坐的就行，那也是极好的了~。
中西结合效果好
我又要来推荐良心教程了~
这次我主要动用了三个学习网站，容我分别来介绍一下：
Learn the web - Algoquindesign.ca
所谓中西结合效果好，就是英文教程为主，中文教程为辅，毕竟代码是英文嘛~。这个网站是我在搭建Jelly的时候搜到的，是这次学习前端知识的主要网站。他厉害就是厉害在全面，详细，开源，有实操。 而且这个教程是为Graphic Designer设计的哦~最适合我们拉~。
据我研究这是加拿大一所学院的开源课程，这个老师好感人啊~他在个人官网上也写道说他相信开源的力量，因此这整个网站都是开源的。网站上所有的代码都是开源的，写不对的都可以去Github上下载，仔细对比学习。
此外网站不仅开源，还有视频，并且会在每一个阶段后，都让你试着来写一个完整的网站，成就感刷刷刷的就来了~以前Codecademy也提供教你如何最后用所学到的知识写一个简易的网站，但现在Codecademy 很多的Pro功能都收费了。 当然相比之下，Codecademy教你所写的网站似乎都更好看点。
我喜欢国外教程的很大一个原因就是它把我当白痴，而事实证明还真是，课程从最基本的计算机文件命名开始，教你怎么用网站的链接快速的查询或直接跳转到你要的页面。也会教你怎么整理一个Project的文档。以及告诉你Jpg,png,svg到底是什么，怎么用，为何要save for web，以及怎么save for web，这些小细节能很大的优化你的设计。 并且也会教你如何使用浏览器，让你借助浏览器的代码检查功能去debug，去加强的你的网站性能，
学前端肯定得看W3school啊~，记不清标签的时候，就可以回来查查。但有时候觉得上面的说明说的还是让人搞不清楚。
CSS的盒子模型，Float，Position真是让人忧愁的知识点，找来慕课网把上面的CSS基础知识再刷一遍，再看一些讲用CSS布局的基础视频，基本就可以比较理解这三个概念。当然更多的还是要自己把玩把玩。
甜点
如果说前面推荐的三款是肉食加蔬菜的话，那用完之后我们也应该来一点甜点~推荐两个小而美的学习网站~
Learn CSS layout
CSS布局是一个大头，据说在CSS之前，人类都是用HTML的table标签布局网页的，估计这个是蛮让人头晕的。于是为了更好的组织网站的布局，就出现了CSS，而CSS就像是一个幕后系统，调配着网页上的所有元素~
Learn CSS Layout这个网站支持多国语言，对于加强理解CSS布局的理解是个很好的强化剂。
Don’t fear the internet
其实不少代码学习网站在最开始都没有说清楚互联网的一些基本特性，只有搞清楚一些网页的基本知识后，再开始学习HTML，CSS才是比较合适的。
像是之前我干啃W3school,那时候我发现HTML里面不是也有style么，不是也可以控制文字的样式么，为何我要还需要CSS，殊不知HTML里面的Syles只是行内的CSS，是内嵌的也是CSS的一种表现形式。因此搞清楚HTML和CSS的角色分别是什么很重要~
Don’t fear the internet就是两个设计师给设计师入门网页设计的代码学习网站~
从零开始，带你制作出一个漂亮的网页。一共八个视频，由于第7个视频和之前的跳跃有点大，没有搞清楚CSS layout的肯定要头晕，因此建议先看第8个视频，再看第7个视频。
开卷有益，不求甚解
说来惭愧，其实早在2013年我就在Codecademy上学过HTML CSS了，但是当时虽然课程都完成了，可我真的是学的云里雾里的，让我自主写一个简易网站肯定不行。去年的时候，我又想打算通过W3school直接学，但这么一来，虽然可以理解每个标签，但要组合起来就有点尴尬了。所以今年这次我算是下定决心，不搞个简易静态网站出来不罢休。
学HTML有那么点重新学英语语法的意思，而很多标签还有一些CSS的内容，卡住了，不理解了，就不要真卡住不动了，学下去，学下去就可能对之前的知识点豁然开朗，因为很有可能当下花了N天弄懂了，过两天可能又搞不清了。。因此要不求甚解，然后不停的多写~
开卷有益，就是说不要想着把每个标签给背出来，这太夸张了，常用的肯定能记住，不熟悉的回W3school翻阅翻阅就熟悉了。
可达性
Learn the web - Algoquindesign.ca - Accessibility
在Learn the Web上学习的时候，我常常听老师提到screen-readers，通常我都没放心上，想说我能写出来就不容易了，还管什么screen-readers。但是当我学到Accessibility这一节的时候，文章中写道这么一段话：
The great thing about the web and computers is that they empower everybody. It’s our goal to help every human accomplish what they want on our website, regardless of their physical, mental, or technological capabilities. （互联网和电脑最棒的地方就是它给到每一个人赋予每一个人力量。我们的目标是帮助每一个人都能够在网实现他们想实现的，不管他们的身体，心里，或者技术能力。）
当时我就泪流满面了，而iPhone最让我震惊的也其实是它的可达性（Accessibility），当我发现，兔子和乌龟这个为视觉障碍者所设计功能的时候，我整个就震惊了，虽然不知道有多少视觉障碍者会使用iPhone，但这样全局的思考，人性化的设计真的让人Hin感动。
因此如果你能照顾到所有人~，你的网站一定是一个具有高度可用性，并且用户体验极佳的网站。
视觉障碍：
- 允许字体被放大缩小（Allow text to be resized）
- 颜色对比鲜明（Have good contrast in colours）
- 为色盲用户做测试（Test for colour blindness related issues）
- 确保网站有做Screen readers优化（Make sure the website works well with screen readers）
- 使用合适的alt说明（Use proper alt attributes）
行动障碍：
- 要知道并不是每个人都会使用鼠标的（Recognize and prepare for the fact that not everybody will use a mouse）
- 确保用户可以使用键盘操作网站（Make the website keyboard accessible）
- 扩大链接和按钮的点击范围（Increase hit areas of links and buttons）
听觉障碍：
- 提供文字说明和字幕（Provide text captions and subtitles）
认知障碍：
- 确保用户知道他们当前所在位置（Make it clear where in the website the user is）
- 正确的组织的你网站内容使用合适的标题（Organize your content correctly & use proper headings）
- 确保文字阅读体验，便于扫视（Make the text easily scannable）
- 确保用户能识别链接（Clearly mark links）
- 使用大量的图片和照片（Use lots of images and graphics）
看完最后为认知障碍者的设计意见，我深觉，估计自己就是。
最后的最后，让我一本正经的说一句：英语系的，不学代码天理不容，建议英语系的第二外语改成计算机语言。
