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

阿里云最近在做活动，低至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...

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

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