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

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

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

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

为了使这本指南易于理解,我把它分成了两部分。***部分介绍了如何使用 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。我选择了手机为先的网页设计,因为它们比桌面网页设计要简单。不过,也可以自由选择桌面设计。

[[261962]]

在你决定了一个设计之后,继续尝试用 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 规则只适用于特定的屏幕宽度。

[[261966]]

关于媒体查询知识及扩展可以看看以下几篇文章:

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

实践 HTML 和 CSS ***实践

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

实践 3

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

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

[[261967]]

在重构代码时,有几件事需要问问自己。

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

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

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

实践 4

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

在***一个实践中,为自己建立一个作品集网站。作为前端开发者,你的作品集网站是你最重要的数字资产之一。作品集是一个展示你作品的网站。更重要的是,它是一个持续的记录,帮助你跟踪你的进步和发展。所以即使你只有一两件事要展示,也要展示出来。

[[261968]]

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

如果你的***个作品集网站迭代并不***,那也没关系。作品集网站需要经历许多迭代。还有,重要的是你要用自己的技能来建造它。

与时俱进

虽然 HTML 和 CSS 不会很快过时,但是跟上前端环境的发展是很重要的。

[[261969]]

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

  •  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库/框架添加交互性,共勉,同进步。

 

责任编辑:庞桂玉 来源: segmentfault
相关推荐

2009-06-09 14:40:01

Javascript表单验证

2009-06-11 15:25:39

Java随机数

2009-06-12 10:34:40

Java Date

2009-06-12 10:08:05

StaticJava

2013-07-08 15:45:04

Python

2018-11-15 14:52:15

Spark数据机器学习

2013-04-08 15:42:38

Backbone.js入门

2013-09-24 10:07:19

Ruby项目

2011-08-03 10:12:38

2009-06-15 13:32:18

Java applet插件

2020-10-10 14:36:10

Python

2019-04-11 10:50:26

前端JavaScript开发

2018-12-19 09:03:04

物联网供应链物联网应用

2013-11-14 16:18:05

AndroidAudioAudioTrack

2020-10-12 00:41:52

Python变量

2009-07-14 13:49:28

Swing组件AWT

2010-03-11 11:29:51

乔布斯

2020-10-11 23:45:55

Python解释器

2020-10-13 09:54:38

内存技术数据

2012-12-13 13:09:38

点赞
收藏

51CTO技术栈公众号