拓展阅读｜前端开发，从草根到英雄（第一部分）

freeCodeCamp · 公众号 · · 2017-07-10 18:56

正文

请到「今天看啥」查看全文

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

Menu App Interface
Twitter Widget
Article News Card
Simple Flat Menu

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

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

实验2

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

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

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

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

你可以在 CodePen 中做这些实验或者在本地操作，如果你选择将其存放在本地，你可以选择把这个例子工程作为模板下载下来，或者手动抓取这些文件。我建议你使用 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 。