记得刚开始学习前端开发的时候。看了一大堆文章和资料，学习资料让我应接不暇，甚至不知道从何入手。本指南列出了前端学习路线，并提供了一些平时收集的有效资源。为了使本指南易于理解，我将其分为两部分。***部分介绍了如何使用HTML和CSS开发界面。第2部分将介绍Javascript、框架和设计模式。HTML和CSS基础在前端开发中，一切都从HTM和CSS开始。HTML和CSS控制您在网页上看到的内容。HTML代表内容，而CSS处理样式和布局。首先，阅读Mozilla开发者网络(MDN)上的HTML和CSS教程。MDN逐章解释重要的HTML和CSS概念。此外，每一章只有一页长，并带有链接到CodePen和JSFiddle的交互式演示。完成这些教程后，请查看CodeAcademy的制作网站课程。本教程只需几个小时即可完成，是使用HTML和CSS构建网站的绝佳入门教程。如果wq想了解更多信息，B??uildingwebforms是CodeAcademy的另一个教程，它将引导您完成构建和样式化Web表单。要练习CSS，请尝试CSSDiner。这是一个有趣的CSS挑战游戏。HTML和CSS的另一个重要方面是布局。LearnLayout是一个交互式教程，向您展示如何使用HTML和CSS创建布局。此外，了解如何将CSSTricks的API基础知识用于Google字体。排版是界面的基本构建块。如果你有时间，我强烈推荐你阅读这本免费的在线书籍，DonnyTruong的ProfessionalWebTypography，它教会了你作为前端开发人员需要了解的关于排版的一切知识。有了这些资源，就不用太担心记不住了。相反，重点在于理解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等网站，并使用检查器工具查看它们如何实现不同的布局和样式。另外，查看CodePen上的笔，我挑选了一些很好的例子：TwitterWidgetArticleNewsCardSimpleFlatMenu如果您的结果与原始设计不同，请不要气馁。不断练习不同的设计，每次都会发现改进。如果您没有设计背景，很可能您的设计愿景还不够成熟。具有良好设计眼光的前端开发人员将能够识别好的设计并准确地复制它们。几周前，我写了一篇关于如何培养设计眼光的文章。练习2希望这第一个练习让您对编写HTML和CSS有了一些信心。对于实验2，我们将查看一些网站，然后编写一些组件。某些网站使用CSS框架或混淆其CSS类名，使您难以阅读其源代码。这就是为什么我选择了几个设计良好且源代码易于阅读的网站。AirBnB：尝试复制他们的页脚PayPa：尝试复制他们的导航栏lInvision：尝试复制页面底部的注册部分Stripe：尝试复制他们的支付部分同样，练习2的重点不是重新创建整个页面。选择几个关键组件（例如导航栏或英雄部分）进行编码。我在网站列表旁边提供了一个建议，但您可以随意选择其他组件。HTML和CSS最佳实践到目前为止，您已经学习了HTML和CSS的基础知识。接下来就是学习***练习了。***实践是一套提高代码质量的非正式规则。语义标记HTML 和 CSS 的最佳实践之一是编写语义标记。好的 web 语义意味着使用适当的 HTML 标签和有意义的CSS类名来表达结构的含义。例如，h1标签告诉我们它包裹的文本是一个重要的标题。另一个例子是页脚标签，它告诉我们该元素属于页面底部。有关更多信息，请阅读CSSTricks的CorrectHTML5SemanticsandWhatconstitutesasemanticclassname。CSS命名约定CSS的下一个重要最佳实践是正确的命名约定。良好的命名约定，如语义标签，传达意义并帮助我们的代码可预测、可读和可维护。您可以在这篇文章中了解不同的命名约定OOCSS、ACSS、BEM、SMACSS：它们是什么？我应该使用什么？一般来说，我建议您尝试一些对您来说直观的简单命名约定。随着时间的推移，您会发??现什么最适合您。要了解像Medium这样的公司如何利用BEM这样的命名约定，请阅读Medium的CSS实际上非常好。在本文中，您还将了解提出一套有效的CSS约定是一个迭代过程。CSS会重置从边距到行高的所有内容，每个浏览器都有一些轻微的样式不一致。因此，需要重置CSS。MeyerWeb是一个受欢迎的重置。如果您想更深入，可以阅读创建简单的Reset.css文件。跨浏览器支持跨浏览器支持意味着您的代码支持最新的浏览器。过渡等CSS属性需要供应商前缀才能在浏览器中正常工作。在这篇文章中，我可以阅读更多关于供应商前缀、CSS供应商前缀的信息。最重要的是，您应该跨多种浏览器测试您的网站，包括Chrome、Firefox和Safari。CSS预处理器与CSS后处理器CSS自1990年代推出以来已经取得了长足的进步。随着UI系统变得越来越复杂，人们提出了称为预处理器和后处理器的工具来管理复杂性。CSS预处理器是CSS语言扩展，它添加了一些额外的功能，如变量、混合和继承。两个主要的CSS预处理器是Sass和Less。2016年，Sass的使用更加广泛。Bootstrap是一种流行的响应式CSS框架，它也在从Less过渡到Sass。此外，当大多数人谈论Sass时，他们实际上是在谈论SCSS。CSS后处理器在CSS被预处理器手写或编译后应用更改。例如，一些像PostCSS这样的后处理器有自动添加浏览器供应商前缀的插件。当您第一次了解CSS预处理器和后处理器时，您很可能已经在各处使用过它们。但是，从简单开始，只在必要时添加变量和混合等扩展。我之前推荐的文章，Medium的CSS实际上非常好，还涵盖了预处理器。网格系统和响应能力网格系统是CSS结构，允许您水平和垂直堆叠元素。Bootstrap、Skeleton和Foundation等网格框架提供了样式表来管理布局中的行和列。虽然网格框架很有用，但了解网格的工作原理也很重要。文章了解CSS网格系统和不要过度思考网格是很好的概述。网格系统的主要目的之一是为您的网站增加响应能力。响应式意味着您的网站会根据窗口宽度调整大小。很多时候，响应是通过使用CSS媒体查询实现的，CSS规则仅适用于特定的屏幕宽度。关于媒体查询的知识和拓展，可以看看以下文章：IntrotoMediaQueriesmobile-firstAnIntroductiontoMediaQueriesMobile-FirstMediaQueriesPracticeHTMLandCSSBestpractice既然你已经掌握了最佳实践，那么我们继续测试.接下来两个练习的目标是练习编写干净的代码并观察最佳实践对可读性和可维护性的长期影响。练习3对于练习3，请选择一个您以前从事过的项目，并使用您在此过程中学到的知识来重构您的代码。重构意味着编写代码使其更易于阅读和更简单。能够有效地重构代码是前端开发人员的一项重要技能。编写高质量代码是一个迭代过程。CSS架构：重构您的CSS是重构代码的入门指南。重构代码时，有几件事要问自己。* 你的班级名字有歧义吗？ 6个月后，你还能看懂你的类名是什么意思吗？* 你的HTML和CSS语义化了吗？当你浏览你的代码时，你能快速辨别结构和关系的含义吗？您是否在代码中反复使用相同的十六进制颜色代码？将其重构为Sass变量是否更有意义？您的代码在Safari和Chrome上是否相同？你能用类似骨架的网格系统替换一些布局代码吗？你经常使用!important标志吗？你如何解决这个问题？练习4***一个实验把你学到的***练习用起来。但是，最佳实践的效果通常只有在您将它们应用到更大的项目后才会显现出来。在最后一个练习中，为自己建立一个投资组合网站。作为前端开发人员，您的投资组合网站是您最重要的数字资产之一。作品集是展示您作品的网站。更重要的是，它是一个持续的记录，可以帮助您跟踪您的进步和发展。因此，即使您只有一两件事要展示，也要展示出来。首先，按照AdhamDunaway的文章《设计和开发作品集网站站的简单工作流程》如果您的第一个投资组合网站迭代不完美也没关系。投资组合站点经历了许多迭代。此外，使用您的技能来构建它也很重要。与时俱进虽然HTML和CSS不会很快过时，但跟上前端环境的发展非常重要。下面列出了一些有趣且内容丰富的网站、博客和论坛。CSSTricksSmashingMagazineDesignerNewsNettuts+CSSWizardLearn***ByExample，最好的学习方法是以身作则。这里有一组风格指南和编码约定，将教您如何成为更高效的前端。样式指南Web样式指南是可在整个网站中重复使用的CSS组件和模式的集合。这些样式指南中需要注意的关键是基于组件的HTML和CSS方法如何允许代码重用以保持代码清洁(DRY)。MapboxLonelyPlanetSalesForceMailChimp编码指南编码指南使代码易于阅读和维护。其中一些链接（如CSS指南）是编写更好的HTML和CSS的指南，而其他链接（如Github内部CSS工具包和指南）是高质量代码的示例。CSS指南Github内部CSS工具包和指南AirBnB的CSSStyleguide总结希望在本文结束时，您熟悉HTML和CSS，并且掌握了一些内容。学习前端最好的方式就是搭建项目和实践。请记住，每个前端开发人员都必须从某个地方开始。今天开始比明天开始更好。本文是一个由两部分组成的系列文章中的第一篇。第二篇介绍如何使用Javascript和Javascript库/框架来增加交互性，互相鼓励，共同进步。
