前端攻略-从路人甲到英雄无敌

记得那年，我初学前端，碰见了不少的文章，在浩瀚的知识海洋里我手足无措，不知从何开始。己所不欲，勿施于人。这篇文章就会帮你去遨游前端学习的海洋，主要包含了在我以前的学习过程当中整理的一些资源和一些感悟。我打算将整篇文章切分为两部分，第一部分重温HTML与CSS的基本知识，第二部分归纳JavaScript、前端框架与设计模式。

HTML 与 CSS基础

前端的领域里，任何东西都离不开HTML 与 CSS。HTML与CSS基本上控制了你看到的全部东西，HTML用来定义内容而CSS负责样式与布局。

首先从HTML 以及 CSS 开始，这里推荐的是MDN的官方指南。MDN对于重要的HTML与CSS内容进行了详细条理的阐述，除此以外，每一章都是单独的一页，提供了在CodePen与JSFiddle展现的Demo。

看完了这些基础教程以后，能够来看看由CodeAcademy提供的tMake a Website系列课程。这个课程只要几个小时就能看完，若是你想要更多的锻炼，能够瞅瞅CSS Diner，这是一个CSS挑战的小游戏。

最后，能够看看怎么使用 Google Fonts，参考下 CSSTricks出的Basics of Google Font API。

国内用不了Google Fonts的话能够参考下FontAwesome，若是你要用中文字体的话建议参考FontSpider，请自行Github搜索。

Typography--排版也是个构建界面时候很重要的部分，有时间的话推荐你看看Donny Truong写的Professional Web Typography这本书，它会教你基本上关于排版的全部东西。在学习这些的时候不要太担忧本身会忘了，反正记不住。你应该着重于记录这些而且理解HTML和CSS是怎么工做的。

Practicing HTML and CSS Basics

到这里你应该已经明白了HTML与CSS的基本使用，下面咱们要学以至用了。这一部分就设计了两个小实验来让你本身动手构建网站与界面。我是把它们形容成实验，因此不要惧怕失败。

第一个实验里，咱们用的是CodePen，一个在线的HTML与CSS实验台。同时也提供了实时预览功能，一石二鸟呦。好了，下面咱们要看看咱们作的界面的原型了，转到 Dribbble吧, 这嘎达可全是设计创意啊。
我是看上了这个系列：1, 2, 3, 4, 以及 5.。我选择了一个移动优先的设计是由于与桌面设计相比更简单一点，不过你也能够本身找一个。

在你选定了设计以后，就能够在CodePen上面开始动手了。你也能够看看其余人设计的Pen： pens on CodePen点击预览. 另外，别忘了StackOverflow ，这但是你的小伙伴呦。若是你最后实现的东西跟设计相去甚远，也不要灰心，不断尝试总会提升的。

Experiment 2

通过实验一估计你已经有点自信了，在实验二里面咱们将会先借鉴一些大公司的经典站点。有很多站点会用一些CSS框架或者混淆它们的CSS类名，这会让源代码的阅读比较麻烦，这嘎达我列举了几个源代码可读性比较好的：

• Dropbox for Business: Try replicating their hero section

• AirBnB: Try replicating their footer

• PayPal: Try replicating their navigation bar

• Invision: Try replicating their signup section at the bottom of the page

• Stripe: Try replicating their payments section

再次强调下，实验二的目的并非让你去重构整个页面，而是知道怎么去分割组件以及人家是怎么作的。若是你没有设计的背景，可能你要好好发掘下你的潜能了。一个优秀的前端开发者要可以辨别好的设计而后完美地重现它们。

你能够选择在线编程：CodePen 或者直接本地开发。若是你选择本地作，那你可使用这个 模板项目 。我推荐是使用Atom 或者Sublime这样的编辑器。另外，对于Firefox或者Chrome自带的控制台与开发者工具也要好好瞅瞅。

HTML and CSS Best Practices

好了，如今你已经可以用HTML与CSS作一些简单的事情了，下面就要看看所谓的最佳实践了。最佳实践实际上就是一系列的在平常开发中总结出来的约定俗成的规范的集合，来让你更快地开发与构建更高质量的代码。

Semantic Markup:语义标记
HTML与CSS最佳实践中重要的一条就是怎么来写出有语义可读性的标记。好的语义便是你使用了合适的HTML标签与CSS的类名来传达出你想表达的结构含义。
譬如 h1 标签会告诉咱们里面包裹的是一些很重要的标题信息，另外一个例子就是*footer *标签，会直截了当地跟你说，这里面是包含一些页脚信息。建议你阅读 A Look Into Proper HTML5 Semantics 以及CSSTricks的 What Makes For a Semantic Class Name。

CSS Naming Conventions

下面一个比较重要的事情就是怎么给你的CSS定一个合适的类名。好的命名习惯，譬如语义化的标记，能够更好地传达含义，让代码的可读性与可维护性大大增长。

整体来讲，个人建议是跟着你的直觉来肯定命名习惯，随着时间的发展你会以为这样看上去很舒服。若是你要看看大公司，譬如Medium是怎么实践BEM这样的命名规范的，能够阅读 Medium’s CSS is actually pretty f***ing good这篇文章，在这里你会学到怎么在一个快速迭代地状况下也维护你的有效地CSS命名习惯。

CSS Reset

不一样的浏览器在譬如margin以及line-height这些小的样式点之间存在着一些不一致性，所以你要学会重置你的CSS环境。 MeyerWeb 就是一个常见的重置手段。

Cross Browser Support

跨浏览器支持意味着你的代码要去支持绝大部分的现代浏览器，一些常见的CSS属性，譬如 transition 须要 vendor prefixes 来运行在不一样的浏览器中。你能够在 CSS Vendor Prefixes这篇文章里获取更多的知识。这就意味着你须要花费更多的时间来在不一样的浏览器之间进行测试。

翻开CSS的历史，自90年代以来，CSS走过了一段漫长而崎岖的道路。整个UI系统变得日益繁复，人们也会去选择使用一些预处理器或者后处理器来管理这种复杂性。CSS的预处理器或者CSS语言的扩展会在无声无息之间提供相似于变量、Mixins以及继承这些特性。最主要的两个CSS的预处理器就是Sass 与 Less。2016年中Sass被愈加普遍地使用，著名的响应式框架BootStrap就是从Less迁移到了Sass。另外，不少人谈到SASS的时候也会提到Scss。

CSS后处理器则对于手写的CSS文件或者通过预编译的CSS文件进行一些处理，以著名的PostCSS 为例，它有一个插件能够帮你自动地添加一些渲染前缀。
当你接触过CSS的预处理与后处理器以后，你会把它们提高到平常伴侣的。不过，过犹不及，像变量和Mixins这些特性不能滥用啊，仍是应该在合适的地方使用。

Grid Systems and Responsiveness

网格系统便是用来水平或者垂直地排布元素的CSS架构。

著名的网格框架有Bootstrap, Skeleton, 以及 Foundation，它们提供了用于在布局中进行行列管理的样式表。这些框架用起来很方便，不过咱们也是要理解网格的工做原理，推荐看Understanding CSS Grid Systems 以及 Don’t Overthink Grids。

网格系统另外一个目标就是是你的网站具备响应式特性。响应式意味着你的网站能够根据屏幕的大小来动态调整你网站大小与布局。不少时候这个响应式特性都是基于CSS media queries, 即根据不一样的屏幕大小选用不一样的CSS样式规则。

另外，由于咱们正在进行一场所谓mobile-first变革，推荐你看下An Introduction to Mobile-First Media Queries。

Practicing HTML and CSS Best Practices

恭喜道友，筑基成功，你已经可以了解一些关于HTML与CSS的最佳实践了，下面又到了学以至用的时间。这里的两个实验主要是让你锻炼下编写整洁的代码和保证长期的可读性与可维护性。

Experiment 3
实验3中，你须要选一个你以前本身作的项目而且用上文中说起的最佳实践去重构它们，从而保证你的代码更易读而且更简洁。掌握如何有效地重构代码是前端开发者的一个重要技能。固然，写出高质量的代码并不是一蹴而就，而是须要一个长期的迭代过程，CSS Architectures: Refactor Your CSS这篇文章就是一个不错的学习起点。

当你决定要重构代码以前，你要先扪心自问如下几点：

• 你的类名定义是否是模糊不清的，6个月以后你还可否明白你类名的意义。

• 你的HTML与CSS是否足够语义化，一眼望去是否就能明白你的代码架构与关系意义？

• 你是否N次的重复使用了相同的颜色代码，别忘了能够用Sass variable。

• 你的代码是否可以在Safari与Chrome都能正常运行？

• 可否用像Skeleton这样的网格框架来代替你本身的布局?

• 你是否是常用了!important
  ?

Experiment 4
最后一个实验是一个大杂烩，把前面讲的全部知识都混杂起来。不过要知道的是，上面讲的不少最佳实践在一个草稿或者小型项目里难见分晓，只有在大项目里才能显露峥嵘。
所以，最后一个项目我是建议创建一个本身的做品剪辑网站，做为一个前端开发者，我的网站就是本身的电子名片。这里会展现你的做品与项目的积累，也是一个回溯你发展的进程与开发履历的地方。

能够参考Adham Dannaway的文章 My (Simple) Workflow To Design And Develop A Portfolio Website来从零开始。
Stay current
当HTML与CSS已是小菜一碟，你就算是进入了前端开发者的殿堂，一个不断发生改变的地方。

【有一个前端学习交流QQ群：328058344  若是你在学习前端的过程当中遇到什么问题，欢迎来个人QQ群提问，群里天天还会更新一些学习资源。禁止闲聊，非喜勿进。】