前端练级攻略(第一部分)

阿里云最近在作活动，低至2折，有兴趣能够看看：
https://promotion.aliyun.com/...

---

为了保证的可读性，本文采用意译而非直译。

我记得我刚开始学习前端开发的时候。我看到了不少文章及资料，被学习的资料压得喘不过气来，甚至不知道从哪里开始。

本指南列出前端学习路线，并提供了平时收藏的一些有效的资源。

想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你！

为了使这本指南易于理解，我把它分红了两部分。第一部分介绍了如何使用 HTML 和 CSS开发接口。第2部分将介绍 Javascript、框架和设计模式。

HTML 和 CSS 基础

在前端开发中，一切都从 HTM 和 CSS 开始。HTML 和 CSS 控制你在 Web 页面上看到的内容。HTML 表示内容，而 CSS 处理样式和布局。

首先，阅读 Mozilla Developer Network(MDN)的 HTML 和 CSS 教程。MDN 逐章解释了 HTML和 CSS 重要概念。此外，每一个章节只有一页长，交互演示连接到 CodePen 和 JSFiddle。

在完成这些教程以后，看看 CodeAcademy 的 Make a Website 课程。本教程只须要几个小时就能够完成，对于使用 HTML 和 CSS 构建网站是一个很好的入门教程。若是wq 想了解更多， Building web forms 是 CodeAcademy 提供的另外一篇教程，该教程将指导你构建和样式化 web 表单。

要练习 CSS，能够试试 CSS Diner。这是一个有趣的 CSS 挑战游戏。HTM L和CSS 的另外一个重要方面是布局。LearnLayout 是一个交互式教程，向你展现如何使用 HTML 和 CSS 建立布局。

另外，了解如何使用 CSS Tricks 的 Google 字体 的 API 基础知识。 排版是界面的基本构建块。 若是你有时间，我强烈建议你阅读这本免费的在线书籍，Donny Truong 的 Professional Web Typography 它教你做为前端开发人员须要了解的关于排版的一切。

经过这些资源，不要太担忧记忆的问题。相反，重点是理解 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 工具查看它们是如何实现不一样的布局和风格的。另外，看看 pens on CodePen。我挑选了一些好的例子:

• Twitter小部件
• Article News Card
• Simple Flat Menu

  若是你出来的与原设计不一样，请不要气馁。 继续练习不一样的设计，你会发现每次都有进步。

若是你没有设计背景，极可能你的设计眼光不够成熟。具备良好设计眼光的前端开发人员将可以识别好的设计并完美地复制它们。几周前，我写了一篇关于如何培养你的设计眼光的文章。

实践 2

但愿第一个实践让你对编写 HTML 和 CSS 有必定的信心。 对于实践 2，咱们将看一些网站，而后编写一些组件。

一些网站使用 CSS框架或 混淆它们的 CSS 类名，使你很难阅读它们的源代码。这就是为何我选择了几个设计良好的网站，易于阅读源代码。

• AirBnB: 尝试复制他们的页脚
• PayPa:试着复制他们的导航栏l
• Invision :尝试复制页面底部的注册部分
• Stripe: 尝试复制他们的支付部分

一样，实践2的重点不是从新建立整个页面。选择几个关键组件，如导航栏或英雄部分进行编码。我在网站列表旁边提供了一个建议，可是请随意选择其余组件。

HTML 和 CSS 最佳实践

到目前为止，你已经学习了 HTML 和 CSS 的基础知识。下一步是学习最佳实践。最佳实践是一组提升代码质量的非正式规则。

语义标记

HTML　和　CSS　的最佳实践之一是编写语义标记。好的　web　语义意味着使用适当的　HTML　标签和有意义的 CSS 类名来表示结构的意义。

例如，h1 标签告诉咱们它包装的文本是一个重要的标题。 另外一个例子是footer标签 ，它告诉咱们元素属于页面底部。 有关进一步，请阅读 CSSTricks 的 正确的 HTML5 语义 和 什么是语义类名的构成要素。

CSS 命名规范

CS S的下一个重要的最佳实践是正确的命名规范。良好的命名规范，如语义标签，传达了意义，并有助于使咱们的代码可预测、可读和可维护。你能够在这篇 OOCSS、ACSS、BEM、SMACSS：它们是什么?我应该用什么? 中了解到不一样的命名规范。

通常来讲，我建议你尝试一些简单的命名规范，这些规范对你来讲是直观的。随着时间的推移，你会发现最适合你的方法。要了解像 Medium 这样的公司是如何利用像 BEM 这样的命名约定的，请阅读 Medium’s CSS is actually pretty f*ing good.。在这篇文章中，你还会了解到，提出一组有效的 CSS 约定是一个迭代过程。

CSS重置

从页边距到行高，每一个浏览器都有一些小的样式不一致。所以，须要重置 CSS。MeyerWeb 是一个受欢迎的重置。若是你想深刻了解，能够阅读 Create Your Simple Reset.css File。

跨浏览器支持

跨浏览器支持意味着你的代码支持最新的浏览器。像 transition 这样的 CSS 属性须要厂商前缀才能在不一样的浏览器中正常工做。在本文中，我能够阅读更多关于供应商前缀的信息，即 CSS供应商前缀。最重要的是，你应该跨多个浏览器(包括 Chrome、Firefox 和 Safari )测试你的网站。

CSS 预处理器与 CSS 后处理器

自20世纪90年代CSS引入以来，CSS走过了漫长的道路。因为UI系统变得愈来愈复杂，人们提出了称为预处理器和后处理器的工具来管理复杂性。

CS S预处理程序是 CSS 语言扩展，它添加了一些额外的功能，好比变量、混合和继承。两个主要的CSS预处理程序是 Sass 和 Less。2016 年，Sass的使用范围更加普遍。Bootstrap是 一种流行的响应式 CSS 框架，它也正在从 Less 转换到 Sass。并且，当大多数人谈论 Sass时，他们其实是在谈论 SCSS。

CSS 后处理器在由预处理器手写或编译后对 CSS 应用更改。 例如，PostCSS 等一些后处理器具备自动添加浏览器供应商前缀的插件。

当您第一次得知有 CSS预处理器和后处理器时，你颇有可能在任何地方已经使用它们。 可是，从简单开始，仅在必要时添加变量和 mixin 等扩展。 我以前建议的文章，Medium’s CSS is actually pretty f*ing good，也涵盖了预处理器相关的知识。

网格系统和响应能力

网格系统是CSS结构，它容许你水平和垂直地堆叠元素。

Bootstrap，Skeleton 和 Foundation 等网格框架提供了管理布局中行和列的样式表。 虽然网格框架颇有用，但了解网格的工做原理也很重要。 理解CSS网格系统 和 Don’t Overthink Grids 这两篇文章是很好的概述。

网格系统的主要目的之一是为你的网站添加响应性。响应性意味着你的网站根据窗口宽度调整大小。不少时候，响应是经过使用 CSS 媒体查询实现的，CSS 规则只适用于特定的屏幕宽度。

关于媒体查询知识及扩展能够看看如下几篇文章：

• Intro to Media Queries
• mobile-first
• An Introduction to Mobile-First Media Queries

实践 HTML 和 CSS 最佳实践

如今你已经掌握了最佳实践，让咱们进行测试。下面两个实践的目标是练习编写干净的代码，并观察最佳实践对可读性和可维护性的长期影响。

实践 3

对于实践 3，选择你以前作过的项目，并使用你在这过程所学到的知识来重构你的代码。重构意味着编写代码，使代码更容易阅读，更简单。

可以有效地重构代码是前端开发人员的一项重要技能。 编写高质量代码是一个迭代过程。 CSS体系结构：重构你的 CSS 是重构代码的入门指南。

在重构代码时，有几件事须要问问本身。

*　你的取的类名是否有歧义?　6个月后，你还能理解你的类名是什么意思吗?

*　你的 HTML 和 CSS 是语义化的吗?当你浏览你的代码时，你能快速辨别结构和关系的含义吗?

• 你是否在代码中反复使用相同的十六进制颜色代码? 将它重构为一个 Sass变量 是否更有意义?
• 你的代码在 Safari 和 Chrome 上运行得同样的吗?
• 你是否能够用相似于 Skeleton 的网格系统替换一些布局代码?
• 你常用 !important 标志吗?你怎么解决这个问题?

实践 4

最后一个实验把你学到的关于最佳实践的知识运用起来。然而，最佳实践的效果一般不会变得明显，直到你将它们应用到一个更大的项目中。

在最后一个实践中，为本身创建一个做品集网站。做为前端开发者，你的做品集网站是你最重要的数字资产之一。做品集是一个展现你做品的网站。更重要的是，它是一个持续的记录，帮助你跟踪你的进步和发展。因此即便你只有一两件事要展现，也要展现出来。

首先，跟随阿德汉姆·达纳韦的文章 《设计和开发做品集网站站的简单工做流程》

若是你的第一个做品集网站迭代并不完美，那也不要紧。做品集网站须要经历许多迭代。还有，重要的是你要用本身的技能来建造它。

与时俱进

虽然 HTML 和 CSS 不会很快过期，可是跟上前端环境的发展是很重要的。

下面是一个网站、博客和论坛的列表，这些网站、博客和论坛阅读起来既有趣且信息丰富。

• CSSTricks
• Smashing Magazine
• Designer News
• Nettuts+
• CSS Wizard

经过例子学习

最后，最好的学习方法是以身做则。这里有一套样式指南和编码规范，将教你如何成为一个更有效的前端。

样式指南

Web 样式指南是能够在整个网站中重用的 CSS 组件和模式的集合。从这些样式指南中须要注意的关键问题是，基于组件的 HTML 和 CSS 方法如何容许重用代码来保持代码的清爽(DRY)。

• Mapbox
• LonelyPlanet
• SalesForce
• MailChimp

编码规范

编码规范让代码易读且可维护。其中一些连接(如 CSS Guidelines)是编写更好的 HTML 和 CSS 的指南，而其余连接(如 Github internal CSS toolkit and Guidelines)是高质量代码的例子。

• CSS Guidelines
• Github internal CSS toolkit and guidelines
• AirBnB’s CSS Styleguide

小结

但愿在本文结束时，你已经熟悉 HTML 和 CSS，并掌握了一些项目。 学习前端的最佳方式是创建项目和实践。 请记住，每一个前端开发人员都必须从某个地方开始。 从今天开始比明天开始更好。

本文是两部分系列中的第一部分。 第二篇文章介绍了如何使用 Javascript 和 Javascript库/框架添加交互性，共勉，同进步。

你的点赞是我持续分享好东西的动力，欢迎点赞！

交流

干货系列文章汇总以下，以为不错点个Star，欢迎 加群 互相学习。

https://github.com/qq44924588...

我是小智，公众号「大迁世界」做者，对前端技术保持学习爱好者。我会常常分享本身所学所看的干货，在进阶的路上，共勉！

关注公众号，后台回复福利，便可看到福利，你懂的。