【译】前端英雄路（一）
译者注：FQ是学习的第一步，请自备梯子。英语能力可以的请直接阅读原文
前端英雄路（一）
记得我刚开始学习前端时，遭遇了好多文章，要学的东西潮水般涌来，把我淹的跟武汉一样，简直不知道从何下手。
本指南会帮你指出一条前端学习的明路。这儿提供了我以前找的有效的学习资源和补充说明。
为了便于消化，本指南分两部分。第一部分主要讲用 HTML 和 CSS 开发界面。第二部分讲 Javascript ，frameworks 和 design patterns 。如果你 HTML 和 CSS 很熟，可以直接跳到第二部分看 Javascript 。
HTML 和 CSS 基础
在前端开发中，一切都从HTML和CSS开始。HTML 和 CSS 控制着你在 web page 上看到的东西。HTML 管内容（content），CSS 管样式（styling）和布局（layout）。
首先呢，读读 Mozilla Developer Network(MDN) 的HTML和CSS教程。MDN 一章一章的讲重要的 HTML 和 CSS 概念。另外，一章就一页长，还有 CodePen 和 JSFiddle 的可交互案例。
完成以上教学后，看看 Codecademy 的Make a Website课程。这个教学几小时就能搞定，很适合作为用 HTML 和 CSS 建站的启蒙。如果觉得不够，Codecademy 还有一个课程Building web forms。
关于练习 CSS 可以试试CSS Diner。这个 CSS 游戏很有意思。关于 HTML 和 CSS 还有一个重要的东西：布局。LearnLayout是个交互式教学，展示如何用 HTML 和 CSS 来布局。
还有，通过 CSSTricks 的Basics of Google Font API学习如何使用Google Fonts。字文排版学（typography）是界面的基础组成块之一。在你有时间时，强烈推荐 Donny Truong 的Professional Web Typoraphy。做前端开发需要知道的字文排版学知识这儿应有尽有。
看这些学习资源时呢，能记多少就记多少，重要的是：理解 HTML 和 CSS 是如何一起干活儿的。
HTML 和 CSS 基础练习
现在你基本上理解了 HTML 和 CSS，咱们来找点儿乐子。在本节，有两个实验用来让你练习建站和界面。我用到“实验”这个词，是因为在实验中，无论做成还是没做成都能学到东西。
实验1
第一个实验我们会用到CodePen。CodePen 是个前端游乐场，你在这儿写的 HTML 和 CSS 不用保存在本地。还能实时预览。
CodePen 是一石二鸟的选择。一方面，你练习了 HTML 和 CSS，另一方面，你有了一个基础的能看到自己进步的代表作品集。我们还会用到Dribbble，这个网站充满了设计灵感。
去 Dribbble 找个几小时就能写好的简单设计。我帮你选了几个作为开始：1，2，3，4和5。我选择优先适配移动端的设计，因为它们比电脑端容易一些。当然你想做电脑端的设计也没问题。
决定着手一个设计后，打开 CodePen 开工吧。如果你掉坑里了，别忘了StackOverflow这个好伙伴。还有个不错的练习，去Medium，AirBnB和Dropbox这样的网站，用inspector tool看看他们是如何实现各种布局和样式的。还有，看看pens on CodePen，我选了一些挺棒的参考：
如果你照着做的不像原版，别灰心。不断的练习不同的设计，你会注意到每次都在进步。
如果你没有设计背景，或许你的设计眼光尚未开发。一个有设计眼光的前端开发者能够甄别好的设计并完美的再现出来。几周前我写了篇文章，如何develop your design eye。
实验2
希望上一个实验让你对写 HTML 和 CSS 有了些许自信。在实验2中我们会找一些站点，编写它们的某些构成部分。
有些网站用了 CSS frameworks 或者 classnames 写的乱七八糟，导致它们的 source code 晦涩难懂。所以我找了这些设计很棒、source code 也很好读的网站。
- Dropbox for Business：仿制它的hero section 。
- AirBnB：仿制它的 footer 。
- PayPal：仿制它的 navigation bar 。
- Invision：仿制它的 signup section 和页面的 bottom 。
- Stripe：仿制它的 payments section 。
实验2的重点不是仿制整个页面。实验2的重点不是仿制整个页面。实验2的重点不是仿制整个页面。选一些重要的构成部分去编写，比如 navigation bar 或 hero section 。我在上面提供了一些建议，你也可以选择其它的组成部分。
你可以在CodePen或本地做这个实验。如果你选择在本地，你可以下载这个example project作为范例或者自己建文件夹。推荐编辑器Atom或Sublime。
还有，要记住不管是什么网站，你都能看它的 HTML 和 CSS 。右击页面或页面上的构成部分，点击 inspect 会跳出一个左边是 HTML 右边是 CSS 的控制板。当你完工时或遇到坑时，像这样去看看 HTML 和 CSS 。
HTML 和 CSS 的超赞练习
到目前为止你已经学习了基础的 HTML 和 CSS 。下一步是学一些超赞练习。超赞练习是一些帮助你提高代码质量的 informal rules（潜规则）。
Semantic Markup（语义明确的 Markup ）
HTML 和 CSS 的超赞练习之一就是写语义明确的 Markup 。使用合适的 HTML tags 和有意义的 CSS class names 去表明结构上的含义，这就是语义明确的网站。
注：Markup: Digital Technology. detailed instructions indicating the format, style, or structure for an electronic document or Web page. 可暂时理解为 Markup 是 HTML tags 和 CSS class names 的总称。
举个例子，h1 标签（tags）告诉我们它包起来的文字是个很重要的标题（heading）。另一个例子可以是 footer 标签，它告诉我们属于它的元素（element）在页面的底部。如果想进一步了解，读读A Look Into Proper HTML5 Semantics和 CSSTricks 的What Makes For a Semantic Class Name。
CSS 的命名习惯
接下来的超赞练习很重要，CSS 的合适的命名习惯。好的命名习惯就像语义明确的 Markup ，传递合适的含义，同时让我们的代码可预测，可阅读，可维护。你可以看看这篇文章里讲的几种命名习惯OOCSS, ACSS, BEM, SMACSS: what are they? What should I use?。
一般来说，我建议你凭直觉选简单的命名习惯去使用。渐渐地你就会找到最适合自己的。想知道 Medium 这样的公司是如何选用像 BEM 这样的命名习惯的？看这里Medium’s CSS is actually pretty f***ing good。在这篇文章里你会学到，整出一套有效的 CSS 习惯是个迭代的过程。
CSS 重设
浏览器们对 margins 和 line-heights 有些样式上的冲突，所以咱们得重设 CSS 。MeyerWeb是个受欢迎的重设。如果你想深挖，看这里Create Your Own Simple Reset.css File。
跨浏览器兼容
跨浏览器兼容意味着你的代码要兼容大多数时下的浏览器。某些 CSS properties 比如 transition 需要vendor prefixes才能在不同浏览器上正常运作。你可以看看这篇文章CSS Vendor Prefixes。你得知道的重点就是，你应该在各种浏览器上测试你的代码，包括 Chrome ，Firefox 和 Safari 。
CSS Preprocessors and Postprocessors
自1990年以来，CSS 走了很长一段路。自从 UI 系统越来越复杂，人们搞出了 Preprocessors 和 Postprocessors 这些工具来对付复杂的东西。
CSS preprocessors 是 CSS 语言的扩展，就像敲架子鼓时加进去的铃铛和口哨那样，CSS preprocessors 添加了 variables ，mixins 和 inheritance 。两个主要的 CSS preprocessors 叫做Sass和Less。在2016年，通常 Sass 的应用更广泛。Bootstrap ，这个受欢迎的反应灵敏（注：反应灵敏指对不同大小显示屏的适配）的 CSS framework ，也从 Less 转到了 Sass 。喔对了，当很多人谈论 Sass 时，其实他们在谈论SCSS。
在 CSS 被 preprocessor 手写或编译（compile）之后，postprocessor 可以做一些改动。例如某些像PostCSS这样的 postprocessor 有用来自动添加浏览器 vendor prefixes 的插件。
当你第一次发现 CSS preprocessors 和 postprocessors 时，你觉得处处都想用它们。但是呢，从简单出发，必要的时候再用 variables 和 mixins 这些扩展。我提到过的这篇文章Medium’s CSS is actually pretty f***ing good也讲到哪些情况是在滥用 preprocessors 。
Grid Systems and Responsiveness（栅格系统和反应灵敏）(注：“反应灵敏”可理解为“适应不同屏幕大小”)
栅格系统是一种让你把元素摆在格子里的 CSS 结构。
栅格 frameworks 比如Bootstrap，Skeleton和Foundation提供了管理布局行（row）列（column）的样式表。栅格 frameworks 的确很有用，不过你最好弄明白栅格是怎么工作的。Understanding CSS Grid Systems和Don’t Overthink Grids是不错的概述。
栅格系统的主要作用之一就是让你的站点反应灵敏，反应灵敏意味着你的站点会基于窗口宽度改变大小。反应灵敏大多数情况下是通过CSS media queries实现的，CSS 规则仅仅只应用于确定的屏幕宽度。
想了解更多 media queries 可以看Intro to Media Queries。然后呢，由于我们已经进入了mobile-first时代，看看这个An Introduction to Mobile-First Media Queries。
HTML 和 CSS 超赞练习——实战！
现在你已经装配好了超赞练习，我们上战场吧！接下来两个实验的任务是：练习书写干净的代码，和，观察超赞练习在可读性和可维护性上的长期效果。
实验3
实验3，选一个你之前做的实验，用你学到的超赞练习重构（refactor）它的代码。重构的意思是，编辑你的代码，让它不那么复杂，更容易阅读。
拥有有效重构代码的能力是前端开发者的一项重要技能。创造优质的代码是一个迭代的过程。CSS Architectures: Refactor Your CSS从这里开始，重构代码！
在你重构代码时想想这几个问题：
- 你的 class names 是否含义不明？六个月以后你还看得懂你的 class names 想表达什么意思吗？
- 你的 HTML 和 CSS 语义明确吗？你的代码的结构关系能让人一目了然吗？
- 你是否在代码中反复使用相同的十六进制颜色码？把它重构为Sass variable是不是更好呢？
- 你的代码是否在 Safari 和 Chrome 上都正常工作？
- 能否把一些布局代码用Skeleton之类的栅格系统取代？
- 你是不是经常用 !important 标志？这个问题怎么避免？
实验4
上个实验让你用到了所学的超赞练习。但是，超赞练习的神奇功效只有在你造个大新闻大项目时才会体现出来。
最后一个实验，给你自己建一个放代表作品集的站点。作为前端，你的作品集站点是你最重要的数字资产之一。作品集站点是用来展示你的工作的地方。更重要的是，这是一个持续不断的记录，帮助你看见自己的进步和进展。所以即使你只有一两个可以展示的，也给它们放上去。
作为开始，看看 Adham Dannaway 的文章，My (Simple) Workflow To Design And Develop A Portfolio Website。
如果你作品集的首版不太完美，没关系。作品集是不断迭代更新升级的。然后，最重要的是你用自己的技术建起了它。
与时俱进
尽管 HTML 和 CSS 不会马上被淘汰，让自己了解行业动向也是很重要的事。
这些网站、博客、论坛有趣又有用。
从案例中学习
最后，案例是最好的学习资料。这儿有一些样式指南（Stylesheet）和代码习惯（code convention）会教你怎样成为一个更有效的前端。
样式指南
网站样式指南是一些可以在各种网站上重复使用的 CSS 的组成部分（components）和模式（patterns）的集合。这些样式指南关键在于基于 HTML 和 CSS 的组成部分是如何让你重复使用一些代码去保持你的代码DRY。
代码习惯
代码习惯的存在是为了让你的代码有可读性和可维护性。比如CSS Guidelines指导你如何写出更好的 HTML 和 CSS ，Github internal CSS toolkit and guidelines是一些优质代码案例。
总结
在文章末尾，我希望你已经熟悉了 HTML 和 CSS 而且有了一些自己的项目。学习前端的最好方法就是建项目，做实验。记住，种一棵树最好的时间是十年前，其次是现在。