从入门到成为前端高手（上篇）—— Jonathan

ゝ一纸荒年。 2022-09-30 07:15 166阅读 0赞

> 版权申明：  
> 此文章首发于公众号`程序员在深圳`，搜索 studycode 即可关注  
> 本文无需授权即可转载，转载时请务必注明作者

我还记得当我刚开始学习前端开发时，我被大量的技术文章淹没，当时让我非常困惑的是：我究竟需要学多少知识才算足够，我甚至不知道从哪里开始。

这篇指南会告诉你学习前端开发的方向，它会提供一些过去我在学习中遇到的非常有效的学习资源，并伴随着我的一些注解。

为了让这篇指南更容易消化，我将它分成了两部分，第一部分主要讲HTML和CSS的开发接口，[第二部分][Link 1]主要讲Javascript，框架，以及设计模式，如果你对HTML和CSS很熟悉，你可以直接跳到[第二部分][Link 1]，那里全都是Javascript。

![1240][]

part2

## HTML和CSS基础 ##

在前端开发中，所有事物都以[HTML][]和[CSS][]开始，HTML和CSS控制了你在网页上看到的内容，HTML负责网页内容，而CSS负责样式和布局。

![strip][]

From code to interface

开始前，读一读Mozilla开发网（MDN）上的[HTML][HTML 1]和[CSS][CSS 1]入门，MDN将会讲解HTML和CSS中重要的概念，另外，每章节仅仅只有一张纸那么长，另外它还提供交互页面的链接（CodePen和JSFiddle）帮助你学习。

完成这些入门教程后，可以学下CodeAcademy的课程[Make a Website][]。完成这篇教程只需要几个小时，它是使用HTML和CSS构建网站很好的入门教程，如果你停不下来，CodeAcademy还提供了另一个入门教程[Building web forms][]，可以帮助你创建一个带有样式的表单。

如果想要做一些CSS的练习，试试[CSS Diner][]，它是一个有趣的CSS挑战游戏，另外一个重要的HTML和CSS概念是布局，[LearnLayout][]是一个教你如何使用HTML和CSS创建布局的交互式教程。

同样的，要学会利用[Google字体API][Google_API]使用[Google字体][Google]的CSS技巧，Typography是一个排版组织（block of interfaces），如果你有时间，我强烈建议你读一读这本免费的在线书籍[Professional Web Typography][]，作者是Donny Truong，你将学到作为前端工程师所需要了解的所有排版知识。

通过这些资源后，不要担心自己记不住，而是将你的注意力集中在HTML和CSS在一起是如何工作的。

## HTML和CSS基础练习 ##

目前你对HTML和CSS有了基本的认识，接下来我们玩点更有趣的。这一章节里，会有两个实验，它们会教你如何创建网站和界面。我用“实验”这个词的目的是：在实验中，你从失败中学到的东西将会和你从成功中学到的一样多

### 实验1 ###

第一个试验中，我们将学习使用[CodePen][]。CodePen是一个前端编辑网站，在那里，你无需本地保存文件，就可以写HTML和CSS代码。当你保存代码的同时，你便可以进行在线预览。

CodePen是一个一石二鸟的工具，一方面，他可以帮助你练习HTML和CSS编程，另一方面，你创建了一个可以跟踪你进步的文件夹。我们还将使用[Dribbble][]，这个网站充满了设计灵感。

进入Dribbble网站，选择一些在几个小时就可以完成的设计，我替你选了几个帮助你开始：[1][]，[2][]，[3][]，[4][]和[5][]，首先从移动页面设计开始，因为我觉得它们比pc端页面简单，当然，也不用担心pc端页面设计会很难。

![1240 1][]

当你开始动手时，尝试在CodePen中写代码，如果你卡住了，记住[StackOverflow][]是你的朋友，另一种非常有价值的练习则是登录像[Medium][]，[AirBnB][]或[Dropbox][]这样的网站，使用[Chome中的检查工具][Chome]查看这些页面是如何实现不同的布局和样式的。然后，仔细研究[CodePen中的部分画笔][CodePen 1]，同样，我也挑选了几个不错的链接：

*  [Menu App Interface][]
 *  [Twitter Widget][]
 *  [Article News Card][]
 *  [Simple Flat Menu][]

如果你的“复制品”看起来和“参照物”不太一样，你也不必灰心，继续做不同的设计练习，你会发现每次你都会进步。

如果你没有任何设计背景，说明你的设计之眼没有被开发出来，一个拥有设计之眼的前端开发工程师能够很容易分辨好的设计并有能力将其完美复制出来。前不久我写了一篇关于[如何开发设计之眼的文章][Link 2]。

### 实验2 ###

希望第一个实验能给你带来一些HTML和CSS的信心。在第2个实验中，我们将看一些网站，然后试图实现它们的组件。

一些网站会使用CSS框架，或重命名它们的CSS类名，这样的代码读起来非常困难，所以我挑选了一些源代码很好读的网站，这些网站拥有良好的设计。

*  [Dropbox for Business][]: 试着复制[hero][]段落
 *  [AirBnB][AirBnB 1]: 试着复制页脚段落
 *  [PayPal][]: 试着复制导航条
 *  [Invision][]: 试着复制页面底部的登录部分
 *  [Stripe][]: 试着复制支付部分

同样的，第2个实验的重点也不是重建整个页面。选择一些像导航条或hero段落这样的关键组件去编码，对于做什么组件，我已经在网站列表右边给出了建议。

![1240 2][]

你可以在[CodePen][]中做这些实验或者在本地操作，如果你选择将其存放在本地，你可以选择把这个[例子工程][Link 3]作为模板下载下来，或者手动抓取这些文件。我建议你使用[Atom][]或[Sublime][]编辑器

同时，请记住在任何页面，你都可以看见它的HTML和CSS代码，仅仅只需要右键页面或页面中的一个组件，点击检查，一个HTML在左、CSS在右的面板便会弹出，一旦你完成了或卡住了，也可以使用检查器对你的HTML和CSS进行对照。

## HTML、CSS最佳练习 ##

到目前为止，我们学到了基本的HTML和CSS，下面我们将要进入最佳练习，最佳练习指的是一些能帮助你提升代码质量的非常规规则。

### 语义标记 ###

如何写语义标签是HTML和CSS的最佳实践之一，好的语义意味着使用合适的HTML标签以及有意义的CSS类名，它们可以传达结构的含义。

例如，h1标签标记的文字代表它们是很重要的标题，再如footer标签，同样告诉我们这部分元素属于页面的底部。更进一步，建议你读一下[A Look Into Proper HTML5 Semantics][]以及关于CSS技巧的文章：[What Makes For a Semantic Class Name][]

### CSS命名约定 ###

另一个重要的最佳实践则是CSS命名约定，像语义标签一样，好的命名约定，会传达出有意义的内容、使我们的代码具有可预见性、可读以及可维护。你可以读一读这篇文章，讲的是不同的命名约定: [OOCSS, ACSS, BEM, SMACSS: What are they? What should I use?][OOCSS_ ACSS_ BEM_ SMACSS_ What are they_ What should I use]

我还建议你尝试使用简单的命名约定以培养你对它们的直觉感受，因为随着时间推移，你将探索出那些最适合你的工作方式。想知道Medium这类公司是如何利用BEM这一命名约定的，可以读下[Medium's CSS is actually pretty f\*ing good][Medium_s CSS is actually pretty f_ing good]。在那篇文章中，你将了解到创建一组高效的CSS语法是一个逐步迭代的过程。

### CSS重置 ###

从边缘到边框，浏览器具有较小的样式不一致性。因此，请务必重置CSS。[MeyerWeb][]是一个流行的重置工具。 如果你想更深入，你可以阅读[Create Your Own Simple Reset.css File][]

### 跨浏览器支持 ###

跨浏览器支持意味着您的代码需要支持最新的浏览器。 某些CSS属性（如转换）需要[供应商前缀][Link 4]才能在不同的浏览器中正常工作。 您可以在这篇本章中了解有关供应商前缀的更多信息，[CSS供应商前缀][CSS 2]。 主要的代价是，您需要在多个浏览器（包括Chrome，Firefox和Safari）上测试您的网站。

![1240 3][]

### CSS预处理器和后处理器 ###

自从90年代引入CSS以来，CSS已经走了很长的路。 由于UI系统变得越来越复杂，人们想出了被称为预处理器和后处理器的工具来管理复杂性。

CSS预处理器是CSS语言扩展，增加了诸如变量，多态和继承的特性（bells和whistles）。 两个主要的CSS预处理器是[Sass][]和[Less][]。 在2016年，Sass开始被更广泛地使用。 Bootstrap，流行的响应式CSS框架，也从Less切换到Sass。 此外，当大多数人谈论Sass时，他们实际上在谈论[SCSS][]。

![1240 4][]

CSS后处理器支持在CSS被预处理器手写或编译后仍可更改。 例如，一些后处理器（如[PostCSS][]）具有自动添加浏览器供应商前缀的插件。

当你第一次发现CSS预处理器和后处理器，它是会引诱你无处不在的使用它们。 但是，建议你从简单开始，只有在必要时才添加扩展，例如变量和多态。 我之前提到的文章——[Medium’s CSS is actually pretty f\*ing good][Medium_s CSS is actually pretty f_ing good]——涵盖了在涉及到预处理器时，使用多少才是合适的相关内容。

### 网格系统和响应式 ###

网格系统帮助把CSS结构竖直的和水平的排列起来。

![1240 5][]

像Bootstrap，Skeleton和Foundation这样的网格框架提供了用于管理布局中的行和列的样式表。 虽然网格框架很有用，但了解网格如何工作也很重要。 [了解CSS网格系统][CSS 3]和[不要对网络想多了][Link 5]是重要的概述。

网格系统的主要目的之一是为您的网站增加响应能力。 响应性意味着您的网站可以基于窗口宽度调整大小。多次响应是由[CSS媒体查询][CSS 4]实现的，CSS规则仅仅适应于特定的屏幕宽度。

![strip 1][]

您可以在[媒体查询简介][Link 6]中了解有关媒体查询的详情。 另外，因为我们已经进入了[移动互联网][Link 7]时代，请查看[Mobile-First Media Queries简介][Mobile-First Media Queries]。

## 练习HTML和CSS最佳实践 ##

现在你已经武装了最佳实践的武器，我们可以用它来做一些"军式演习"，下两个实验的目标是练习写干净整洁的代码，以及长期观察最佳实践对可维护性和可读性的影响。

### 实验3 ###

第三个实验是，挑选一个之前的实验，并使用学到的最佳实践方法来重构它，重构的意思是编辑你的代码，让它变得更容易读和减少它的复杂性。

最为一个前端开发者，能够有效的重构代码是一项重要的能力。写出高质量代码是一个不断迭代的过程。这篇CSS[架构：重构你的CSS][CSS 5]很好的讲述了如何开始重构你的代码。

![1240 6][]

It’s not at all important to get it right the first time. It’s vitally important to get it right the last time.

当你在重构代码时，你需要问自己几个问题：

*  你的类名是否模糊不清？在六个月后吗，你还会记得这些类名的意思吗？
 *  你的HTML和CSS具有语义吗？当你在此审视你的代码时，你还能快速辨别结构和关系的意义吗？
 *  你还在一遍遍的使用十六进制颜色编码吗？难道使用[Sass变量][Sass 1]重构它们不会更能表达它们的意思吗？
 *  你的代码在Safari上是否和在Chrome上一样好呢？
 *  你可以把你的布局代码换成想[Skeleton][]这样的网格系统吗？
 *  你经常用!important标签吗？你如何解决这个问题？

### 实验4 ###

最后一个实验将告诉你如何使用你学到的最佳实践。 然而，最佳实践的效果往往不明显，直到您将它们应用到一个更大的项目。

对于最后一个实验，建立自己的文件夹网站。 作为前端，您的文件夹网站是您最重要的数字资产之一。文件夹是展示您的工作的网站。 更重要的是，这是一个持续的记录，可以帮助你跟踪你的进步和发展。所以即使你只有1或2件事可以展示，你也应该把它们放上去。

![1240 7][]

ShiftBrain Studio

在开始之前，先学习一下Adham Dannaway的文章，[我的（简单）工作流：设计开发一个文件夹网站][Link 8]。

如果你的文件夹刚开始并不完美，也没关系，随着时间推移，文件夹会迭代，最重要的是，你将使用你自己的技能来创造它。

## 保持更新 ##

虽然HTML和CSS不会马上过时，但保持最新的技术视野是一件很重要的事情。

下面的网站，博客以及论坛列表很有意思，也很有价值：

![1240 8][]

The front-end landscape is constantly changing

*  [CSSTricks][]
 *  [Smashing Magazine][]
 *  [Designer News][]
 *  [Nettuts+][Nettuts]
 *  [CSS Wizard][]

## 从例子中学习 ##

最后，最好的学习方式是从例子中学习， 这里有一套styleguides和代码约定，将教你如何成为一个更有效的前端。

### Styleguides ###

![1240 9][]

Typography styleguide

Web Styleguides是可以在网站上重复使用的CSS组件和模式的集合。从这些Styleguides中要注意的关键是，基于HTML和CSS组件的复用, 如何让你保持[DRY][]原则。

*  [Mapbox][]
 *  [LonelyPlanet][]
 *  [SalesForce][]
 *  [MailChimp][]

### 代码约定 ###

代码约定被设计用来提高代码的可读性和可维护性。很多像[CSS指南][CSS 6]这样的页面是为了帮助你写出更好的HTML和CSS代码。另一些像[Github内部CSS工具和指南][Github_CSS]这样的页面提供了高质量代码的示例

*  [CSS指南][CSS 6]
 *  [Github内部CSS工具和指南][Github_CSS]
 *  [AirBnb的CSS指南][AirBnb_CSS]

## 圆满 ##

希望在本文结束时，你已经非常熟悉HTML和CSS了，并有一些项目在折腾了。 学习前端的最好方法是建立项目和实验。 记住，每个前端开发人员都必须从某处开始。 从今天开始比明天更好。

本文是两部分系列的第一部分。[第二篇文章][Link 9]介绍了使用Javascript和JavaScript库/框架添加交互性。此外，如果你想要我详细说明任何事情或有任何问题，随时留言或[Tweet][]给我。

转载：http://www.jianshu.com/p/8e639ae10dfe\#

个人建了前端学习群，旨在一起学习前端。纯净、纯粹技术讨论，非前端人员勿扰！入群加我[微信][Link 10]：iamaixiaoxiao。

![1460000008545203_w_276_h_261][]

[Link 1]: http://jieniu.me/2016/11/12/zero-hero-2/
[1240]: /images/20220708/c01f97f2795c440a9976ba02753ac4c0.png
[HTML]: https://en.wikipedia.org/wiki/HTML
[CSS]: https://en.wikipedia.org/wiki/Cascading_Style_Sheets
[strip]: /images/20220708/602631956758480885b3b1af7eaca364.png
[HTML 1]: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Introduction
[CSS 1]: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/What_is_CSS
[Make a Website]: https://www.codecademy.com/learn/make-a-website
[Building web forms]: https://www.codecademy.com/courses/web-beginner-en-Vfmnp/0/2?curriculum_id=50b91eda28c2fb212300039e
[CSS Diner]: http://flukeout.github.io/
[LearnLayout]: http://learnlayout.com/
[Google_API]: https://css-tricks.com/snippets/css/basics-of-google-font-api/
[Google]: https://www.google.com/fonts
[Professional Web Typography]: https://prowebtype.com/
[CodePen]: http://codepen.io/
[Dribbble]: https://dribbble.com/
[1]: https://dribbble.com/shots/2262761-Mobile-Blog-App-Interface/attachments/424147
[2]: https://dribbble.com/shots/2492038-Task-List-App/attachments/489171
[3]: https://dribbble.com/shots/2144170-Day-014-Location-Card/attachments/392323
[4]: https://dribbble.com/shots/2639709-Confirm-Reservation/attachments/528798
[5]: https://dribbble.com/shots/2314157-Daily-UI-Day-1/attachments/439137
[1240 1]: /images/20220708/c7392e8c0b3546b49e081bcb9b0dbe34.png
[StackOverflow]: http://www.jianshu.com/p/stackoverflow.com
[Medium]: http://www.jianshu.com/p/medium.com
[AirBnB]: http://www.jianshu.com/p/airbnb.com
[Dropbox]: http://www.jianshu.com/p/dropbox.com
[Chome]: https://developer.chrome.com/devtools
[CodePen 1]: http://codepen.io/pens/
[Menu App Interface]: http://codepen.io/ManarKamel/pen/BooXJw
[Twitter Widget]: http://codepen.io/cameronbaney/pen/gfjLJ
[Article News Card]: http://codepen.io/jonathanzwhite/pen/GZVKmE
[Simple Flat Menu]: http://codepen.io/Jeplaa/pen/adnoH
[Link 2]: https://medium.com/@JonathanZWhite/developing-your-eye-for-design-cce944bbeae4#.tsg9204dm
[Dropbox for Business]: https://www.dropbox.com/business
[hero]: https://en.wikipedia.org/wiki/Hero_image
[AirBnB 1]: https://www.airbnb.com/
[PayPal]: https://www.paypal.com/home
[Invision]: http://www.invisionapp.com/
[Stripe]: https://stripe.com/us/pricing
[1240 2]: /images/20220708/53d40e07c67b41f9b708cc5276159514.png
[Link 3]: https://github.com/murtaugh/HTML5-Reset
[Atom]: https://atom.io/
[Sublime]: https://www.sublimetext.com/
[A Look Into Proper HTML5 Semantics]: http://www.hongkiat.com/blog/html-5-semantics/
[What Makes For a Semantic Class Name]: https://css-tricks.com/semantic-class-names/
[OOCSS_ ACSS_ BEM_ SMACSS_ What are they_ What should I use]: http://clubmate.fi/oocss-acss-bem-smacss-what-are-they-what-should-i-use/
[Medium_s CSS is actually pretty f_ing good]: https://medium.com/@fat/mediums-css-is-actually-pretty-fucking-good-b8e2a6c78b06#.ef81j61eg
[MeyerWeb]: http://meyerweb.com/eric/tools/css/reset/index.html
[Create Your Own Simple Reset.css File]: http://code.tutsplus.com/tutorials/weekend-quick-tip-create-your-own-resetcss-file--net-206
[Link 4]: https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix
[CSS 2]: http://webdesign.about.com/od/css/a/css-vendor-prefixes.htm
[1240 3]: /images/20220708/22e2fa3a18ee43abaeccc7501a2adf77.png
[Sass]: http://sass-lang.com/guide
[Less]: http://lesscss.org/
[SCSS]: https://www.sitepoint.com/whats-difference-sass-scss/
[1240 4]: /images/20220708/541efe897070482b8a52ba99b9e7980f.png
[PostCSS]: https://github.com/postcss/postcss
[1240 5]: /images/20220708/d944b4d5e7eb40d69fbc3f7c08862c26.png
[CSS 3]: http://www.sitepoint.com/understanding-css-grid-systems/
[Link 5]: https://css-tricks.com/dont-overthink-it-grids/
[CSS 4]: http://www.w3schools.com/css/css_rwd_mediaqueries.asp
[strip 1]: /images/20220708/412f94030fd4460f9391a868c19edfa0.png
[Link 6]: https://varvy.com/mobile/media-queries.html
[Link 7]: http://zurb.com/word/mobile-first
[Mobile-First Media Queries]: http://www.sitepoint.com/introduction-mobile-first-media-queries/
[CSS 5]: https://www.sitepoint.com/css-architectures-refactor-your-css/
[1240 6]: /images/20220708/a7800f7e16504f4aa488ca9483f6249d.png
[Sass 1]: http://webdesign.tutsplus.com/articles/understanding-variable-scope-in-sass--cms-23498
[Skeleton]: http://getskeleton.com/
[1240 7]: /images/20220708/45c31c1448594499be0c5d63c952077b.png
[Link 8]: https://www.smashingmagazine.com/2013/06/workflow-design-develop-modern-portfolio-website/
[1240 8]: /images/20220708/a2ff6df57fb5478badb3f28c0f638679.png
[CSSTricks]: https://css-tricks.com/
[Smashing Magazine]: https://www.smashingmagazine.com/
[Designer News]: https://www.designernews.co/
[Nettuts]: http://code.tutsplus.com/
[CSS Wizard]: http://csswizardry.com/
[1240 9]: /images/20220708/35a9510aa5884bbf9002f522c3e3f1a1.png
[DRY]: https://en.wikipedia.org/wiki/Don'%20rel=
[Mapbox]: https://www.mapbox.com/base/styling/
[LonelyPlanet]: http://rizzo.lonelyplanet.com/styleguide/design-elements/colours
[SalesForce]: https://www.lightningdesignsystem.com/
[MailChimp]: http://ux.mailchimp.com/patterns/
[CSS 6]: http://cssguidelin.es/
[Github_CSS]: https://github.com/primer/primer
[AirBnb_CSS]: https://github.com/airbnb/css
[Link 9]: http://www.jianshu.com/p/e2be2bb9d229
[Tweet]: https://twitter.com/jonathanzwhite
[Link 10]: http://lib.csdn.net/base/wechat
[1460000008545203_w_276_h_261]: /images/20220708/5e10ad0896794463ba3eb3655cba810f.png