加入收藏 | 设为首页 | 会员中心 | 我要投稿 辽源站长网 (https://www.0437zz.com/)- 云专线、云连接、智能数据、边缘计算、数据安全!
当前位置: 首页 > 运营中心 > 建站资源 > 优化 > 正文

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

发布时间:2019-04-10 18:33:12 所属栏目:优化 来源:前端小智
导读:我记得我刚开始学习前端开发的时候。我看到了很多文章及资料,被学习的资料压得喘不过气来,甚至不知道从哪里开始。 本指南列出前端学习路线,并提供了平时收藏的一些有效的资源。 为了使这本指南易于理解,我把它分成了两部分。第一部分介绍了如何使用 HT
副标题[/!--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,  我挑选了一些好的例子:

  • 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系统变得越来越复杂,人们提出了称为预处理器和后处理器的工具来管理复杂性。

(编辑:辽源站长网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

推荐文章
    热点阅读