前端练级攻略(第一部门)
|
副问题[/!--empirenews.page--]
我记得我刚开始进修前端开拓的时辰。我看到了许多文章及资料，被进修的资料压得喘不外气来，乃至不知道从那边开始。 本指南列出前端进修蹊径，并提供了平常保藏的一些有用的资源。 为了使这本指南易于领略，我把它分成了两部门。第一部门先容了怎样行使 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, 我挑选了一些好的例子:
假如你出来的与原计划差异，请不要泄气。 继承操练差异的计划，你会发明每次都有前进。 假如你没有计划配景，很也许你的计划目光不足成熟。具有精采计划目光的前端开拓职员将可以或许辨认好的计划并美满地复制它们。几周前，我写了一篇关于怎样作育你的计划目光的文章。 实践 2 但愿第一个实践让你对编写 HTML 和 CSS 有必然的信念。 对付实践 2，我们将看一些网站，然后编写一些组件。 一些网站行使 CSS框架或 夹杂它们的 CSS 类名，使你很难阅读它们的源代码。这就是为什么我选择了几个计划精采的网站，易于阅读源代码。
同样，实践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体系变得越来越伟大，人们提出了称为预处理赏罚器和后处理赏罚器的器材来打点伟大性。 （编辑：湖南网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
